Je suis en train de réfléchir sérieusement à migrer mon blog WordPress vers Hugo, un SSG (Static Site Generator) qui offre simplicité et rapidité comparé à « l’usine à gaz » qu’est WordPress. Attention, il ne s’agit pas ici pour moi de critiquer WP, je l’ai utilisé pendant assez longtemps (~20 ans) et j’étais bien content de l’avoir. Mais il est vrai que c’est assez lourd, avec le PHP, la base de données, les plugins incertains… Pour un simple blog comme le mien, je n’ai honnêtement pas besoin d’autant de complexité.

Car ce sont autant de surfaces d’attaque, avec tout ce code généré ; il suffit d’ailleurs de voir le nombre de mises à jour de WP, sans parler de la qualité des plugins que l’on a activé sur son site, plus ou moins bien écrits, plus ou moins maintenus, etc… Avec Hugo et ses pages statiques en HTML, il n’y a rien à attaquer car rien ne s’exécute. Il ne faut pour autant pas idéaliser la chose, car si on ajoute un système de commentaires (externe), il faudra gérer la question des spams, car Hugo ne propose évidemment rien sur le sujet…

L’autre aspect problématique de WP, c’est la performance (d’où le terme « usine à gaz » utilisé), et sans un hébergeur qui a toutes capacités de mise en cache et d’optimisation en tous genres, le temps d’affichage d’une page serait vraiment très long. Hugo, en tant que SSG, génère des pages statiques en HTML, et il suffit donc de les envoyer au navigateur, et c’est évidemment beaucoup plus rapide :

Hugo, c’est donc le choix de la simplicité : on écrit ses articles en markdown, et Hugo se charge de les convertir en HTML. Il y a certainement moins de possibilités qu’avec Gutenberg, l’éditeur de WP (encore qu’il y a les shortcodes dans Hugo). Il y a surtout les aspects pas du tout gérés par Hugo, comme les formulaires ou les commentaires, mais avec des solutions externes pour les remplacer.

Mais ce côté simplification me plaît, se concentrer sur le texte de l’article, et laisser tomber les petites fioritures que permet WP avec le choix d’une multitude de plugins, mais qui finalement ne sont pas indispensables. Avoir un blog très rapide, des articles qui s’affichent en un clin d’œil, et qui se concentrent sur l’essentiel, c’est tentant. Alors pourquoi pas ?

Mais qu’est-ce que ça implique vraiment ?

Découverte

Il existe beaucoup d’articles sur Hugo, le SSG est très populaire et son développement actif, ce qui est une bonne chose. Ce n’est donc pas la littérature sur le sujet qui manque, et encore moins sur la migration en venant de WordPress. J’ai retenu ces deux articles :

• Pourquoi migrer : https://benoit.gouthiere.be/blog/migration-wordpress-hugo/
• Comprendre Hugo : https://www.regisphilibert.com/blog/2019/01/from-wordpress-to-hugo-a-mindset-transition/

Un autre environnement

Déjà, on change totalement d’environnement, il y aura plein de nouvelles choses à apprendre, c’est certain, à commencer par Hugo. J’ai commencé par l’installer sur mon PC, jouer un peu avec, générer les pages HMTL, les envoyer sur mon hébergeur. Il faut reconnaître que c’est assez simple et intuitif, une fois que l’on a assimilé les bases. On commence par la doc bien entendu, qui est d’ailleurs très bien faite. Et notamment la page de Quicktart, et en quelques minutes vous avez votre premier site disponible. Toutes les modifications faites sur les fichiers .md ou de configuration sont pris en compte dynamiquement, c’est très pratique quand on teste quelque chose. Et quand on le souhaite, on génère le site statique (dans le dossier public) qu’il suffit d’envoyer sur votre hébergeur par exemple, et voilà le tour est joué. Cette première approche s’est révélée facile et cela donne envie de continuer et d’approfondir.

Puis j’ai voulu choisir un thème. Et là, le thème Stack qui me plaît me renvoie sur une page Github qui me dit :

J’ai mis du temps à comprendre de quoi il retournait : en fait il recommande de l’installer sur Github comme un dépôt, qui permet de générer automatiquement le site statique toujours sur Github. De plus, le thème sera automatiquement mis à jour si une nouvelle version est publiée. On passe vraiment dans un autre monde, un monde de développeur, ce que je ne suis pas. Mais cela laisse entrevoir de nouvelles possibilités, si l’on souhaite les apprendre (ainsi qu’une certaine maîtrise de Github). Mais à priori je ne compte pas aller jusque là.

Heureusement, on peut aussi installer ce thème en local sur sa machine, et c’est ce que j’ai fait pour l’instant, ne maîtrisant pas Github (cela ferait beaucoup trop de choses nouvelles à appréhender en même temps). Je suis beaucoup plus à l’aise en local, et quand il s’agira de personnaliser le thème pour correspondre à mes souhaits, cela sera beaucoup plus facile ainsi.

Hébergeur

Un autre avantage d’Hugo, c’est de pouvoir se passer d’hébergeur, d’abord parce que les optimisations requises par WP sont désormais inutiles, et parce qu’il y a des solutions gratuites pour ce type de site statique : on peut donc utiliser les GitHub Pages, mais aussi Netlify, ou encore les Cloudflare Pages. À terme, je peux même imaginer auto-héberger mon blog sur mon NAS, tout simplement.

Il me suffira de conserver mon nom de domaine, et d’en faire ce que je veux. D’ailleurs, Github Pages supporte les « custom domain », si je souhaitais bénéficier du déploiement automatisé mentionné plus haut.

Migration

Le projet est donc tentant mais cela implique de migrer mon blog WP, soit près de 1500 articles, et cela signifie certainement un très gros travail de migration, même s’il y a des outils et autres scripts qui sont là pour aider : en gros, on exporte le site WP au format XML (opération standard que permet le tableau d’administration de WP), puis un script va convertir tous les articles et les pages exportés au format Markdown. C’est déjà un énorme travail de fait, et disons que le texte de chaque article est correctement migré, mais qu’en est-il du reste ?

C’est-à-dire tout le HTML autre que le texte : les liens (par exemple l’attribut _target="blank" qui permet d’ouvrir le lien dans un nouvel onglet n’existe pas en markdown), les images, tableaux, mais surtout tous les différents blocs de Gutenberg que j’ai utilisé (audio, vidéo, galerie, etc…) qui utilisent un format spécifique, et d’autres cas particuliers que je découvrirai certainement au cours de l’opération. Il faudra repasser sur certaines choses, si je peux l’automatiser avec un script, ça ira, mais sinon revoir tous les articles un par un s’avérerait un énorme boulot.

Et comment seront migrées les pages de mes journaux de voyage où j’ai fait un beau « page template » avec un sommaire glissant à droite ? Probable qu’il me faudra en revoir la présentation, même si j’ai vu que les templates existaient avec Hugo (après tout ce n’est que du HTML et du CSS), donc il y aura peut-être une solution ?

Les autres choses auxquelles il faut porter attention :

Thème

Pour le thème, l’apparence globale sera revue de A à Z, à moins de vouloir le recréer à l’aide de l’AI comme je l’ai lu une fois. Pour ma part, j’ai choisi un thème disponible pour Hugo, et ce sera l’occasion de profiter de ce nouveau thème et de l’adapter à mes souhaits. Cela donnera un coup de neuf au blog, c’est très bien comme ça. Et si certaines choses disparaîtront, de nouvelles seront présentes, c’est le principe de tout changement.

Plugins

Avec WP, j’essayais de limiter le nombre de plugins au maximum, pour ne pas alourdir ni compliquer la gestion du site, mais il y en a quand même quelques uns : l’idée c’est de se passer d’eux quand c’est possible (simplification) et de voir les solutions pour les autres.

Il y a bien sûr le plugin Akismet pour lutter contre les spams, très efficace et indispensable avec WP. Je verrai comment cela va se passer sur cet aspect avec Hugo ou plutôt avec Remark42, le système de commentaires que j’ai repéré pour l’instant, et ce qu’il propose à ce sujet : sera-t-il toujours possible de conserver les commentaires anonymes ? Ce n’est pas certain.

Autre exemple : Je pensais faire une croix sur la citation que j’affiche en haut de la colonne de droite : il s’agit du plugin UtterQuotes (qui d’ailleurs n’était plus maintenu depuis des années, mais fonctionnait encore pour l’essentiel, avec une table dédiée dans la BdD). Typiquement le genre de choses qui n’existe pas sur Hugo, mais en lisant cet article, j’ai pu recréer le système. Il a aussi fallu extraire mes citations de la BdD, et les importer dans un fichier .json, pour cela Mistral AI m’a fourni un script en quelques secondes. De bonnes surprises peuvent donc aussi se produire durant la migration.

Il y a aussi d’autres plugins dont je devrais me passer, comme celui qui me permettait d’afficher la liste d’articles par catégories, sous forme d’excerpt, mais cette possibilité est présente de base avec le thème Stack que j’ai choisi.

Les commentaires

Pour revenir aux commentaires, il y a plusieurs solutions externes de proposées pour Hugo, et notamment Disqus, le plus connu. Mais il n’est pas libre, et exploite vos données, il est donc hors-jeu d’entrée pour mon blog. Certains autres se basent sur Github où il faut donc avoir un compte pour poster un commentaire, c’est un peu limitatif. Il en reste quelques autres, et il faut idéalement qu’il soit supporté par votre thème pour assurer une intégration facile.

J’ai donc commencé à regarder Remark42 de plus près, il a l’air de cocher pas mal de cases, axé sur le respect de la vie privée, et que l’on peut auto-héberger via Docker. Je n’ai donc pas tardé à installer le container sur mon NAS et commencé à jouer avec. Il permet l’authentification par email, ou par les réseaux sociaux (chose que je ne compte pas implémenter avec l’exception de Github), mais aussi les commentaires anonymes, que j’aimerais bien conserver, à voir si cela sera possible (risque de spams). Il lui manque juste une interface d’administration, mais si j’en avais besoin, j’ai vu qu’il existait des solutions externes, comme celle-ci : https://github.com/lauralesteves/remark42-admin-ui, si nécessaire. Le monde du logiciel libre est vaste…

Remark42 permet aussi d’importer les commentaires de WP, je n’ai pas encore testé à fond cette option, j’espère qu’elle fonctionne, ça m’embêterait de perdre tous les commentaires existants.

Les outils de migration

Voilà ce que j’ai vu pour l’instant sur le sujet : la plupart reposent donc sur l’export que permet de faire WP via le menu Outils – Exporter. On choisit « Tout » et on récupère un fichier .xml que l’outil va traiter. On en trouve une liste ici : https://gohugo.io/tools/migrations. Ou encore sur une liste fournie par un utilisateur sur le forum ici : https://discourse.gohugo.io/t/best-practices-or-a-smarter-way-to-create-a-60k-pages-website/46328. Mais elles ne fonctionnent pas toutes : certaines sont assez anciennes et ne sont pas mises à jour depuis plusieurs années, d’autres proposent un script python qu’ils ont créé pour eux… et qui ne fonctionne tout simplement pas ! D’autres encore s’installent comme plugins dans WP, mais de ce que j’ai pu voir, elles ne sont pas mises à jour non plus, et plutôt basiques.

J’ai retenu les deux les plus réputées qui sont :

wordpress-export-to-mardown (écrit en JS) : J’aime bien le fait qu’il permette d’organiser les articles dans une arborescence de type année/mois/article. On obtient un dossier pour chaque article, avec dans chaque un dossier images, où l’on retrouve les images de l’article. C’est l’organisation que j’aimerais retrouver. Mais il est plutôt limité : on peut dire qu’il gère les articles et les images, ainsi que les catégories. Et ça s’arrête là.

wp2hugo (écrit en Go) : le script est souvent mentionné, et il est sans doute le plus complet, gérant bien les contenus multimédias (liens videos, audio), et plein d’autres choses. Mais il crée les nouveaux articles à plat dans un répertoire, et les images sont dans le dossier static, en recréant l’arborescence de wordpress, genre static/wordpress/upload/year/month. Ce n’est pas ce que je voudrais.

En posant la question au développeur sur son projet Github, il m’a parlé d’un outil complémentaire qu’il est en train de développer, hugomanager, et qui permet entre autres, de réorganiser les posts en dossiers indépendants contenant ses propres images. Cela me conviendrait beaucoup plus. Pour l’instant, cela ne fonctionne pas, mais j’avance avec le dev sur le sujet.

Pour l’organisation en dossier « year/month » de l’ensemble des articles, j’ai aussi créé une issue, et il l’a déjà implémentée dans wp2hugo. Avec ces deux modifications, on obtiendrait avec le script un dossier posts avec à l’intérieur une organisation par année puis par mois, et pour chaque article un sous-dossier images. Ce serait parfait pour moi.

Si j’arrive grâce à lui à pouvoir résoudre les principaux problèmes de cette migration, cela va beaucoup m’aider. Il a l’air assez réactif, et prêt à ajouter des options à son outil, c’est vraiment génial ! 😎

Conclusion

Je suis très tenté de me lancer dans cette aventure ! L’esprit me plaît, l’approche d’un site statique aussi, je vais donc continuer à creuser et faire quelques tests de migration pour évaluer le travail que j’aurais à faire.

Chez mon hébergeur Infomaniak, j’ai déjà créé un deuxième WP de test, ou je crée quelques articles et pages pour avoir un échantillon représentatif du contenu de mon blog. Puis je l’exporte en XML, et en local sur mon PC, je peux lancer le script de migration et regarder ce que cela donne dans Hugo. Parallèlement, je personnalise le thème que j’ai choisi et m’adapte aux changements que cela oblige. Je peux même pousser le HTML généré par Hugo sur un autre sous-domaine de mon hébergeur pour voir le rendu « en ligne ». Côté commentaires, Remark42 fonctionne en auto-hébergé, avec l’identification par github, mail ou de manière anonyme. Seul l’importation ne fonctionne pas pour l’instant, mais je n’ai pas vraiment creusé.

Voilà où j’en suis, ça a quand même bien avancé, je continue de tester le script de migration et de suggérer des améliorations ou créer des bugs, d’apprendre aussi sur Hugo, le thème, le système de commentaire Remark42, etc… On verra comment ce projet évolue, j’espère pour un jour faire la bascule vers ce nouveau système.