C’est quoi, Hugo ?

Au hasard de mes recherches sur la création d’un site avec Hugo, je suis tombé sur une série d’articles qui détaille la procédure, étape par étape, de création d’un thème custom.

Cet énorme tutoriel — qu’on peut presque qualifier de formation en ligne — m’a tellement appris de choses sur le fonctionnement de Hugo, que je me suis dit “ça serait top de proposer une version traduite avec quelques notes personnelles”.

J’ai donc demandé à l’auteur de cette série d’articles, Janne Kemppainen, s’il était possible de me baser sur sa série pour proposer quelque chose du même genre en français, tout en le citant bien entendu. Il m’a répondu simplement : “Oui aucun souci, et tu peux aussi préciser que tu as la permission de recopier le contenu”.

Si vous voulez lire les articles de l’auteur original, rendez-vous ici : the best Hugo tutorial series

Un grand merci à toi Janne, pour ce travail de longue haleine. Thanks a lot Janne for your amazing work!

J’étais fan du concept à la base, c’est ce qui m’a poussé à suivre ces tutos pour décortiquer le bouzin, et plus je mets les mains dedans, plus je me dis que c’est une petite pépite technologique, qui va changer pas mal de choses en matière de création de sites simples.

L’avenir me dira si je me suis trompé ou non ! Quoi qu’il en soit, si vous êtes ici, c’est que le sujet vous intéresse, alors entrons dans le vif du sujet :-)

Plan général du tutoriel

Ce didacticiel sur l’utilisation de Hugo se déroule en 11 parties :

1. La mise en place de l’environnement local et la création d’un premier site simple
2. Générer son premier thème
3. Mise en place du layout général
4. Création du template des articles
5. Création du template des pages
6. La gestion des templates de listes et des taxonomies
7. L’ajout du contenu en relation
8. Créer des shortcodes personnalisés
9. Déployer le site avec Netlify
10. La gestion des commentaires
11. Suivre les stats de son blog avec Matomo Analytics

Articles bonus à venir

J’ai prévu plusieurs articles complémentaires pour aller plus loin sur des sujets que je n’ai fait qu’évoquer dans la série :

• L’asset pipeline : compiler du SCSS, minifier, fingerprinter avec le dossier /assets
• Les page bundles : co-localiser articles et images, profiter du pipeline d’images
• Les render hooks : personnaliser le rendu du markdown (liens externes en target="_blank", images lazy-loaded automatiquement, etc.)

Notes sur les versions

Cette série a été rédigée initialement entre 2020 et 2021, puis intégralement mise à jour en mai 2026 pour refléter les évolutions de Hugo (versions 0.110+ avec hugo.toml, 0.128 avec la nouvelle config de pagination, 0.146 avec la nouvelle structure des layouts, 0.158 avec la dépréciation de languageCode…). Les exemples utilisent Hugo 0.161.

Si vous tombez sur des incohérences ou des choses qui ne fonctionnent plus avec une version plus récente de Hugo, n’hésitez pas à me le signaler !