Créer un site avec Hugo

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 dis “ç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 d'articles pour proposer quelquechose du même genre en français, tout en le citant bien entendu. Il m'a répondu simplement “Oui aucun soucis, 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, rdv donc ici : the best Hugo tutorial series

Un grand merci à toi Janne, pour ce travail de longue haleine (quand je vois le temps que ça m'a pris à suivre et à “traduire”, je me dis que tu as dû passer quelques intenses soirées à nous concocter ce partage de connaissances !). Thanks a lot Janne for your amazing work !

Je dois dire que 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 met les mains dedans et plus je me dis que c'est une petite pépite technologique, qui à mon avis, va changer les règles en matière de création de sites simples pour de nombreuses raisons que j'évoquerai dans un autre billet.

L'avenir me dira si je me suis trompé ou si j'ai eu raison ! Quoiqu'il arrive si vous êtes ici, c'est que le sujet vous intéresse alors je vais arrêter de m'étaler et on va entrer dans le vif du sujet :-)

Plan général du tutoriel sur l'utilisation de Hugo

Ce didacticiel sur l'utilisation de Hugo va se dérouler en plusieurs 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 : l'installation de Google Tag Manager Matomo Analytics
  12. (bonus pour les SEO) Proposition de workflow pour le déploiement de sites statiques ultra rapides avec un score pagespeed qui déchire en quelques minutes

NB : cette série est en toujours en cours de rédaction, il se peut que je modifie quelques passages pour rendre l'ensemble plus cohérent ; pour le moment il s'agit surtout de mes notes livrées “telles quelles”, mais si j'avais attendu que tout soit parfait je n'aurais jamais lancé ce site !

Comment créer un site avec Hugo partie 1 : intro et configurations
Avant d'apprendre à faire un thème avec Hugo, il faut comprendre son fonctionnement basique en créant un premier site et quelques pages de contenus.
Comment créer un site avec Hugo partie 2 : créer un thème
Nous avons vu comment lancer un site avec un thème blanc et une page de contenus toute simple : voyons maintenant comment créer un thème à partir de 0
Comment Creer Un Site Avec Hugo Partie 3 : Le Layout
Attaquons nous maintenant à la partie qui nous intéresse le plus dans cette série : la création d'un layout, basé sur le framework CSS Bulma.
Comment Creer Un Site Avec Hugo Partie 4 : Le Template Des Articles
On peut maintenant rentrer dans le vif du sujet et commencer à travailler sur le template qui sera le plus utilisé : celui des articles.
Comment Creer Un Site Avec Hugo Partie 5 : Le Template Des Pages
Voyons maintenant les spécificités liées aux pages qui, contrairement aux articles, ne reposent pas sur un système de datation.
Comment Créer Un Site Avec Hugo Partie 6 : Le Template Des Listes
Les pages et les articles sont prêts : attaquons nous désormais aux templates qui les réunissent tous…
Comment Créer Un Site Avec Hugo Partie 7 : ajouter des liens de contenus en relation
Les pages et les articles sont prêts, les catégories également : on va pouvoir créer quelques connexions logiques entre les pages avec la gestion du contenu en relation
Comment Créer Un Site Avec Hugo Partie 8 : créer des shortcodes
Voyons maintenant une fonctionnalité pratique pour ajouter automatiquement des bouts de code communs à plusieurs pages : l'utilisation de shortcodes
Comment Créer Un Site Avec Hugo Partie 9 : publier le site avec Netlify
Les pages et les articles sont prêts, les catégories également : on peut publier une première version du site pour voir ce que ça donne !
Comment Créer Un Site Avec Hugo Partie 10 : La gestion des commentaires
Tout ce que vous avez vu jusque là devrait vous permettre de créer un site avec des fonctionnalités basiques. Voyons maintenant comment ajouter des fonctions qui sortent du simple affichage de contenus.