Utilisation de Hugo

Utilisation de Hugo

Photo by David Fintz on Unsplash


Et voilà, trois mois que j’ai refait mon site perso avec Hugo. Aujourd’hui je veux y ajouter un article et… après un mois et demi de vacances, je ne me souviens plus comment on fait ;-)

Donc, l’article attendra. Je commence par une petite béquille à destination de ma mémoire défaillante sur : comment créer et maintenir un site avec Hugo

Hugo, c’est quoi ?

Hugo, c’est un générateur de site web statique. Pourquoi générer des sites statiques ? C’est tout simple : ils n’ont besoin de quasiment aucune ressource pour leur hébergement. Un serveur web et c’est fini ! Si vous êtes comme moi et que vous voulez juste un blog avec quelques articles, pas d’interaction et pas de commentaires ou autre zone dynamique, n’allez pas chercher WordPress ou l’un de ses nombreux confrères. Les CMS sont inutiles, les générateurs statiques vous suffiront.

La famille des générateurs statique est très fournie : Jeckyll, Pelican, Gatsby… vous aurez l’embarras du choix. J’ai personellement choisi Hugo après quelques essais et beaucoup d’hésitations. Ce n’est peut-être pas le meilleur (s’il y en a un !) mais il me convient très bien.

Installation, création du blog

Sous Linux, comme d’habitude : apt-get install hugo, si vous utilisez un autre OS, leur doc vous expliquera comment faire.

Ah, au fait, n’oubliez pas d’installer Git également. Hugo utilise le mécanisme des submodules de Git pour récupérer ses thèmes. Et puis c’est toujours pratique de versionner les fichiers de son blog.

La création d’un site se fait par la commande hugo new site <nomdusite>. Les premières étapes sont détaillées dans la doc officielle.

Une remarque : si vous clonnez le dépôt git de votre blog, n’oubliez pas de faire git submodule init puis git submodule update après le clonnage pour récupérer aussi le thème !

Création d’un article

La doc suggère d’utiliser la commande hugo new. Pour ma part, je trouve encore plus simple de dupliquer le fichier d’un article existant et de le modifier. Comme tous mes articles ont le même modèle, je n’ai pas à me soucier d’oublier une des meta-description au début.

En parlant des meta, voici celles que j’utilise :

  • title : le titre de l’article, bien sûr
  • date : la date de rédaction/publication
  • categories : le tableau des catégories
  • tags : bon, en fait je l’ai mis mais pour l’instant je ne m’en sert pas
  • toc : true ou false selon qu’il faut générer une table des matières
  • summary : le résumé de l’article, c’est le texte qui est affichée dans les pages de liste
  • et enfin thumbnail : l’image associée à l’article

Le format d’un article est des plus simples : tous les métas au début encadrés par des +++.
Tout le reste, c’est du texte, au format markdown.
Toutes les images vont dans le répertoire /static/img. Pour l’instant, j’en ai suffisament peu pour ne pas m'être penché sur la question du rangement de ce répertoire.

Tester le site pendant l'écriture

La ligne de commande magique, c’est hugo server -D et c’est tout. Le site est immédiatement dispo en local sur le port 1313.

Et en plus, le mode server surveille les fichiers sources. Si l’un d’entre eux change, Hugo met à jour automatiquement le site.

Générer le site

Quand tout est prêt, il suffit de lancer la commande hugo -D et on récupère en sortie le site généré dans le répertoire public.