Migrer un site Jekyll sur Hugo
Il y a deux ans déjà, j’ai migré mon site Wordpress sur un site statique hébergé sur Github Pages. Ce dernier était basé sur Ruby, Jekyll et Minimal mistakes.
Bien que le projet Minimal Mistakes ne donnait plus trop de signes de vie, le rendu convenait.
Cependant, j’étais bloqué sur différents points:
- La gestion d’articles en anglais et français
- Le thème dark (inutile donc indispensable)
- Quelques fonctionnalités manquantes: par ex. MermaidJS
J’ai donc décidé de le migrer sur Hugo. Ce générateur de site est basé sur Go et est très rapide d’exécution.
1 Démarrage
Je n’ai pas migré le site comme indiquait la documentation.
J’ai préféré créer un nouveau site et copier coller le contenu existant, à savoir les images et les articles.
Je vous conseille de lire la documentation qui est bien faite.
Ensuite, j’ai choisi le thème LoveIt.
Pour l’installer, il suffit de cloner le repo dans le répertoire themes.
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt2 Reprise de données
J’ai copié les éléments suivants:
- Les fichiers statiques que j’avais à disposition (
CNAME,robots.txt) dans le répertoirestatic - Les images dansle répertoire
static/assets/images - Les posts et pages statiques
3 Travail sur les posts et images
3.1 Les posts
J’ai ensuite modifié les noms des fichiers en enlevant les dates qui les préfixaient.
Ensuite, j’ai modifié les en-têtes de chaque post. J’ai pu le faire en automatisant avec VS CODE.
Voici le pattern que j’ai modifié:
header:
teaser: /assets/images/2018/02/2000px-cygwin_logo-svg.pngen
featuredImagePreview: /assets/images/2022/12/review.webpCa c’était le plus facile…
3.2 Les images
Dans chaque post, j’ai revu les images et leur positionnement.
J’ai donc passé chaque article manuellement. C’était réellement fastidieux. Pour être totalement franc, je n’ai paas cherché à automatiser ça. Je pense qu’un script shell, python aurait pu faire l’affaire. Heureusement, je n’en avais pas une centaine…
J’ai ajouté quand je pouvais l’en-tête suivant (adaptez le chemin vers l’image ;-) ):
featuredImage: /assets/images/2022/12/review.webp
images: ["/assets/images/2022/12/review.webp"]Le premier attribut permet d’avoir une image d’en-tête pour l’article. Le second permet d’avoir l’image lors d’un partage sur un réseau social (ex. Twitter)
j’ai ajouté le code suivant pour centrer les images:
{{< style "text-align:center" >}}
{{< style >}}4 Configuration
Pour garder les mêmes URLs, j’ai choisi de modifier le pattern d’ URL pour inclure la date. C’est un vieux reliquat de mon blog Wordpress.
[languages.fr.permalinks]
posts = '/:year/:month/:day/:filename/'Pour le reste, j’ai copié collé l’exemple fourni par le thème et renseigné les champs en fonction de ce que je voulais.
J’ai ensuite adapté le multi langue pour avoir la possibilité de faire des articles en anglais et en français.
4.1 Moteur de recherche
J’utilise Lunr. Voici la configuration:
[languages.en.params.search]
enable = true
type = "lunr"
contentLength = 4000
placeholder = ""
maxResultLength = 10
snippetLength = 50
highlightTag = "em"
absoluteURL = falseIl faut également penser à activer la sortie au format JSON:
# Options to make hugo output files
[outputs]
home = ["HTML", "RSS", "JSON"]
page = ["HTML", "MarkDown"]
section = ["HTML", "RSS"]
taxonomy = ["HTML", "RSS"]
taxonomyTerm = ["HTML"]4.2 Commentaires
A l’instar de mon blog avec Jekyll, j’utilise Utteranc.es. Voici la configuration:
[params.page.comment.utterances]
enable = true
# owner/repo
repo = "alexandre-touret/alexandre-touret.github.io"
issueTerm = "pathname"
label = ""
lightTheme = "github-light"
darkTheme = "github-dark"5 Conclusion
Vous aurez bien compris que ma motivation principale derrière cette migration était d’ avoir un support multi langue un peu sympa. Vous avez dans cet article les principales actions que j’ai réalisé.
N’hésitez pas à regarder la configuration et les articles pour plus de détails.