Migration de Pelican vers Hugo

Sun, 20 Oct 2019 11:35:00 +0200

Retour sur la migration d’un blog construit avec Pelican pour un site statique généré avec Hugo.

Ça fait un moment que je n’ai pas posté ici. Pour le dépoussierage je reviens sur la migration du générateur de ce site.

J’utilisais Pelican depuis plusieurs années. Récemment j’ai réinstallé ma machine, j’avais bien entendu sauvegardé l’environnement virtuel qui me servait à générér mon site mais au moment de le restaurer je me suis dit que c’était le bon moment pour changer.

J’ai souvent eu des problèmes avec la gestion de mon environnement Python (pour tout dire ce n’est vraiment pas ma zone de confort, et je n’en touche que très rarement…), que ce soit à cause des chemins vers mes installations de Python ou bien à cause des mises à jour de Pelican et de ses dépendances. Du coup je surveille ce qui se passe un peu dans l’univers des générateurs de site et je suis resté bloqué sur Hugo et Gatsby.

Les deux semblent assez populaires et assez similaires en terme de fonctionalités. Comme je suis bien plus à l’aise avec Go qu’avec l’écosystème React le choix a été assez facile 😇.

Ce qui m’a encouragé à migrer est que pour utiliser Hugo il suffit d’utiliser un binaire tout en un. Pas besoin de gérer x dépendances 🚀. C’est donc plus simple de reproduire la génération de son site dans le temps.

Installation
#

Il a suffit de suivre le guide d’installation soit sur macOS un simple :

brew install hugo

Puis de générer la structure du site (dans le dossier existant) avec :

hugo new site jeanchristophegay.com

Theme
#

J’ai choisi Beautiful Hugo pour le moment.
L’installation a été rapide en suivant les simples étapes de la documentation.

Migrer les articles
#

Les articles sont déplacés dans le dossier content/posts pour respecter la structure d’Hugo.
Les images sont maintenant dans static/images pour ne pas devoir réécrire les URL.

Les articles sont déjà rédigés en Markdown, il faut donc s’occuper de convertir les métadonnés et les quelques balises spécifiques à Pelican.

Les métadonnées de Pelican ressemblaient à :

Title: De la couleur dans les logs
Date: 2013-05-04 18:22
Category: java
Tags: ansi console, grep console, jansi, log, log4j, log4j 2, logback
-Slug: de-la-couleur-dans-les-logs
-Author: Jean-Christophe Gay
-lang: fr
disqus_identifier: 213 http://jeanchristophegay.com/?p=213

Pour Hugo, il faut les transformer en :

---
title: "De la couleur dans les logs"
date: 2013-05-04T18:22:00+02:00
aliases:
 - /de-la-couleur-dans-les-logs/
slug: de-la-couleur-dans-les-logs
categories:
 - java
tags:
 - ansi console
 - grep console
 - jansi
 - log
 - log4j
 - log4j 2
 - logback
disqus_identifier: "213 http://jeanchristophegay.com/?p=213"
---

Toutes les options possibles sont listées dans la documentation.

L’attribut aliases est bien pratique pour conserver les anciennes URL générées par Pelican.

Pelican : https://jeanchristophegay.com/de-la-couleur-dans-les-logs/ Hugo : https://jeanchristophegay.com/posts/de-la-couleur-dans-les-logs/

La balises  qui permettait de délimiter le résumé d’un article est remplacé par .

Pour le moment j’ai perdu la table des matières, apparemment certains thèmes permettent d’en générer une mais je n’ai pas encore essayé.

Pour les articles disponibles en plusieurs langues, pas besoin de metadonnées, le suffixe dans le nom de fichier est suffisant.

Configuration
#

Site
#

La configuration se déroule dans un fichier config.toml à la place de pelicanconf.py et publishconf.py. On y retrouve un peu le même genre d’options que dans Pelican.

Pour exemple voici à quoi ressemble le mien à ce jour :

baseURL = "https://jeanchristophegay.com/"
languageCode = "fr-FR"

title = "Jean-Christophe Gay"
theme = "beautifulhugo"
disqusShortname = ""
googleAnalytics = ""

enableEmoji = true
enableGitInfo = true
enableRobotsTXT = true

DefaultContentLanguage = "fr"
[languages]
 [languages.fr]
 weight = 1
 [languages.en]
 weight = 2

[[menu.main]]
 name = "Home"
 url = "/"
 weight = 1

[[menu.main]]
 name = "Tags"
 url = "tags"
 weight = 3

[Params]
 subtitle = "Développeur"
 mainSections = ["post","posts"]
 logo = "https://www.gravatar.com/avatar/5cee6a7b8d17e4a0f367a5f0e237c694?s=200"
 dateFormat = "2 Jan 2006"
 rss = true
 comments = true
 readingTime = true
 wordCount = false
 socialShare = true
 delayDisqus = false
 showRelatedPosts = true
 
[Author]
 name = "Jean-Christophe Gay"
 website = "jeanchristophegay.com"
 email = "contact@jeanchristophegay.com"
 github = "jcgay"
 gitlab = "jcgay"
 twitter = "jchristophegay"
 linkedin = "jcgay"

Coloration syntaxique
#

Elle s’active dans la configuration :

pygmentsCodeFences = true
pygmentsUseClasses = true

Et il faut ensuite générer le style avec la commande :

hugo gen chromastyles --style=trac > static/css/syntax.css

J’ai activé le rendu côté serveur mais on peut aussi utilisé une version déportée dans le navigateur avec ce thème.

C’est un point qu’il faut que je creuse encore un peu parce qu’en l’état le rendu n’est pas optimal, quand un bloc de code est un peu trop large on ne peut pas scrollé horizontalement… 😅

Commentaires
#

Les commentaires du blog étant hébergés sur Disqus, la migration s’est bien déroulée.
Il a suffit d’utiliser les bons disqus_identifier pour chaque article. Par contre au départ j’avais utilisé l’option delayDisqus = true pour ne pas charger les commentaires par défaut (ça alourdi pas mal les pages de charger Disqus) mais cette option ne respecte pas par la suite les disqus_identifier définis… Ce qui rendait la récupération des anciens commentaires impossibles.

Un de ces jours je jetterai un oeil aux alternatives disponibles 😇.

Redirections
#

La possibilité de définir des alias pour chaque article a été suffisant pour gérer la migration des URL des articles, les ressources statiques n’ont pas bougées. J’ai ajouté de nouvelles règles uniquement pour les flux RSS :

RewriteRule feed/?$ index.xml [R=301,L]
RewriteRule feeds/? index.xml [R=301,L]

Prévisualisation
#

Pour voir le rendu de ce qu’on est en train d’écrire :

hugo serve

Le contenu se recharche bien entendu à chaud.

Génération du site final
#

Le site prêt à déployer est disponible dans le dossier public après avoir lancé :

hugo

Conclusion
#

En 3 ou 4 heures j’ai réussi à avoir un rendu de mon blog à peu près équivalent au précédent.
Je ne pensais pas que la migration se passerait aussi facilement 😎.
Il reste 2 ou 3 réglages à faire mais je suis bien content de ne plus avoir à me compliquer la vie pour avoir un environnement stable Python pour générer ce site 🎇.

Hugo on Jean-Christophe Gay

Migration de Pelican vers Hugo

Installation #

Theme #

Migrer les articles #

Configuration #

Site #

Coloration syntaxique #

Commentaires #

Redirections #

Prévisualisation #

Génération du site final #

Conclusion #