Hugo is great

I’m very happy to tell you I’ve been migating my blog to Hugo. This is really a good move forward.

I’m gonna continue my blog entry in french, don’t blame me, I’m just reblogging after a very long time!

Bonjour, c’est fait ! Je suis enfin passé sur Hugo. C’est un outil très sympa pour créer des sites statiques. Plusieurs raisons m’ont incité à laisser Wordpress de côté pour me mettre à Hugo.

Avec Wordpress:

  • Tout d’abord, la simplicité. Wordpress est devenu au fil du temps une usine à gaz, et je commençais à m’y perdre.

  • A force de complexité, le site devenait de plus en plus ingérable, à un tel point que des bugs sont apparus, y compris sur la console d’administration. Ce qui explique partiellement la raison pour laquelle je n’écrivais plus ; l’éditeur était devenu inutilisable.

  • La sécurité de Wordpress, avec ses bases de données et son contenu dynamique, nécessitait une maintenance

Depuis la migration sous Hugo:

  • Les pages sont générées au format HTML, tout est statique. Plus de PHP, plus de bases de données. Donc par extension moins de problèmes divers, sécurité, complexité, etc.

  • Rapidité d’affichage. Forcément !

  • Pas besoin de tableau de bord complexe ou d’interface d’administration avec ses nombreuses extensions ésotériques et jamais à jour. Pour rédiger mes pages écrites enMarkdown, j’utilise VIM et c’est tout!

  • Le format Markdown permet d’écrire des pages en se concentrant sur le fond, la forme est gérée automatiquement. Cela est quand même appréciable. Comme il s’agit dorénavant d’un standard reconnu (GitHub, etc.), je n’ai aucun souci d’obsolescence de mes pages, même dans une décennie.

De manière générale, Hugo est simple et efficace. Tout se fait en ligne de commande, c’est tellement plus pratique, rapide et simple.

Mise en oeuvre

Mon écran est mis en place de la manière suivante : A gauche un terminal vim pour éditer ma page. Tout en bas à gauche, le moteur Hugo tourne pour la prévisualisation. A droite, le rendu en temps réel (hugo détecte tout changement de page et force le rafraîchissement sur le navigateur). Bref, c’est franchement pratique.

Les commandes sont simples :

hugo server permet de lancer un serveur local sur le port 1313. Cela permet de vérifier ce que l’on fait lors de l’édition des pages. Tout changement y compris de l’aborescence est reflété en temps réel.

une fois le site validé, il suffit tout simplement de taper hugo, et les pages statiques sont générées dans un répertoire “public”. Il ne reste plus qu’à les déplacer sur le site de production (Gandi pour ma part), via sshfs, rsync, git ou tout autre moyen.

De Wordpress vers Hugo

J’avais effectué mes premiers essais Hugo en 2017, et avais prévu de faire cette migration depuis, mais compte-tenu de la masse de billets à migrer. Ayant délaissé mon blog, j’avais réellement la flemme de m’y remettre et ai reporté de nombreux mois mes essais de migration. Au final, après plusieurs tentatives j’ai trouvé une extension Wordpress permettant de générer une archive avec ou sans commentaires, de tous mes billets Wordpress, directement au format Markdown et dans la structure arborescente compatible Hugo. Tip top!

L’extension [Wordpress To Hugo Exporter]() v1.3, par Benjamin J. Balter (un avocat américain qui développe également et défend l’open-source, fait assez rare pour être souligné), s’est avérée terriblement efficace. En pratique, cependant, il m’a fallu plus d’une semaine pour réaliser l’importation, car le processus de migration a généré des bugs lors de la conversion HTML vers Markdown, et il y a de nombreux liens morts ou posant souci. Mais c’est déjà un très bel outil.

Au début, je n’avais pas exporté les commentaires (comportement par défaut). Pour sauvegarder ceux-ci, il faut aller modifier l’extension sous Wordpress pour y mettre l’option correspondante sur True : private $include_comments = true

L’export se fait en cliquant sur Outils / Export to Hugo, qui lance la conversion. Il faut être patient car rien ne s’affiche durant la conversion, et on peut penser que Wordpress s’est planté, mais il n’en est rien… Au bout de quelques minutes le navigateur invite à sauvegarder le fichier .zip produit.

L’archive obtenue peut être directement décompressée dans l’aborescence du site Hugo (créé avec hugo new site blog), sous /contents. Et voilà!

Hugo ne sachant pas afficher de page sans thème, j’ai choisi Mainroad, qui est très bien lorsqu’on vient de Wordpress, et que je trouvais assez proche de mon thème initial. Pour installer le thème, rien de plus simple :

git init
git submodule add https://github.com/Vimux/mainroad themes/mainroad

En pratique, il est bien de revérifier les pages une à une, car la conversion peut avoir partiellement échoué si le code HTML était étrange ou complexe. Pour ma part, j’ai 4 pages avec de gros soucis de conversion posant un problème d’affichage, et une quarantaine de pages avec des soucis mineurs ne posant pas de problème à l’affichage.

Hugo, et moi, et moi…

Outre les avantages nombreux de Hugo mentionnés ci-dessus, j’ai adopté Hugo car il symbolise les nouveaux outils et concepts issus du mouvement DevOps que j’affectionne. Il est écrit en GoLang, vise la simplicité, la rapidité et l’efficacité, est conçis et efficace, et offre tous les nouveaux avantages du mouvement DevOps : automatisation, entièrement utilisable en ligne de commande, orienté “Continuous Development/Continuous Integration” (CD/CI), etc. Bref, tout ce dont j’ai besoin pour démarrer l’année. En outre, il symbolise ces fameux 8-10 ans de décalage entre les Etats-Unis et l’Êurope. Golang existe depuis 2009. Hugo existe depuis 2012. On commence difficilement à en entendre parler ici… J’ai discuté avec des agences web locales mentionnant être “à la pointe de l’innovation”… mais qui n’en avaient jamais entendu parler! Bref…

En conclusion

J’ai encore du boulot pour terminer ma migration. Il y a des pages à corriger, des adaptations à faire, et tout et tout. J’ai encore beaucoup de pages à lire au niveau de la documentation très fournie de Hugo, car nombre de concepts sont à reprendre à la base. Mais je me sens content de ce passage vers une technologie plus récente, fiable et diablement efficace.

Pour le moment, je n’ai pas mis en place de mécanisme de commentaires. Hugo ne générant que des pages statiques, ce n’est pas son boulot, et l’on pense naturellement à Disqus ou Remark pour pallier à ce manque. A suivre, bien entendu ! Dans l’intervalle vos commentaires brefs sont les bienvenus via mon compte Twitter.