Installer Hugo sous ArchLinux

September 2, 2017
web hugo static-site-generator

Hugo est un générateur de site static open-source extrêmement flexible, installable un peu partout mais par contre tout ce fait via un terminal ou presque.

Pour installer Hugo sous ArchLinux il suffit d’ouvrir son terminal, hugo ce trouvant dans le dépôt Community : sudo pacman -S hugo ou yaourt -S hugo

Dans votre home on va créer un dossier pour accueillir nos futurs sites par exemple mkdir hugo_site
Pour le reste il ne vous reste plus qu’a créer votre site, cela ce passe toujours dans le terminal avec la commande : hugo new site nom_de_votre_site
Cela va créer un répertoire dans le dossier créé un peu plus haut, qui va contenir la structure du site.
Ensuite histoire d’avoir un peu de contenu on va créer un premier article. Pour cela placez vous dans votre répertoire cd /hugo_site/nom_de_votre_site/ puis hugo new posts/pouet-pouet.md

La commande hugo new posts/pouet-pouet.md va créer un dossier posts dans le répertoire content de votre site, vous n’êtes pas obligé de le nommer posts, par exemple vous pouvez faire ceci
hugo new articles/pouet-pouet.md ou tout autre nom qui vous passe par la tête, cela sert à compartimenter et structurer votre site.

Les .md eux peuvent être édité avec votre éditeur de texte préféré comme vim ou gedit. Vous pouvez aussi passer outre l’étape du terminal et créer votre_article.md directement avec vim ou autre et le placer dans le dossier posts, qui peut lui aussi être créer directement via le gestionnaire de fichier.

Si vous le faite via votre éditeur de texte il faudra ajouté à la main la base pour avoir un fichier .md valide, à savoir :

title: “Votre Titre”
description: “Votre Description”
date: “2017-08-23”
tags: [ “tag”, “tag” ]
draft: true

L’entête commence et ce termine par --- car nous sommes en Yaml. Il se peut que si vous le faite via la commande hugo new posts/pouet-pouet.md le résultat diffère au niveau de la forme et soit moins complet, pour plus d’info sur les différent Front Matter Formats rendez-vous ici.

NOTE : Pour passer un article en mode publié il suffit de passer draft: true en draft: false et inversement.

Vous devez aussi choisir un thème car il n’y en a pas de base dans votre répertoire /themes, pour ça rendez vous sur cette page puis soit ; passer directement par le terminal en utilisant git ou alors en téléchargeant le thème à la main puis le placer dans le dossier themes ensuite il nous reste à dire au fichier config.toml que l’on va utiliser le thème choisi.
Profitez en pour donner un titre à votre site via la ligne title = “”.

Dans le terminal vim config.toml puis chercher la ligne theme = “” et mettez y le nom du répertoire du thème. Lisez aussi bien la page du thème choisi certains ont besoin d’option à définir dans le config.toml.

Exemple de config.toml

baseURL = “http://example.org/"
languageCode = “en-us”
title = “Free Cake”
theme = “minimal-master”

NOTE : Souvent il vous sera proposé de remplacer directement le config.toml de base par celui présent dans le dossier du thème.

Maintenant que tout est prêt pour avoir un site qui ressemble à quelque chose on peut lancer la commande hugo server -D, le -D servant à afficher le contenu marqué en draft (de base quand on génère un .md).
Votre site est ensuite accessible à l’adresse : http://localhost:1313/

Vous pouvez laisser le serveur tourner dans un terminal et construire votre site en temps réel, tout ce mettra à jour automatique à chaque sauvegarde de fichier ou tout autres ajouts/modifications dans dans le dossier du site.

Une fois que vous avez fini de construire votre site il ne vous restera plus qu’a exécuter la commande hugo pour que celui génère le site. Un dossier public apparaîtra et il ne vous restera plus qu’a upload son contenu sur votre serveur.

NOTE : n’oubliez pas passer vos articles en mode publié avant de générer le site et de remplir baseURL = ""

Voila pour les grandes lignes qui finalement reprennent la doc officiel mais en français pour les réfractaire à l’anglais et en moins éparpigné.

Pour le reste je suis encore un novice avec Hugo et vu la masse d’option possible avec celui-ci je pense que je n’ai pas fini de me servir de la doc, notamment pour la structure des .md, je posterais donc probablement quelques trucs & astuces au fur et à mesure de mon utilisation.

Pour un article que je voulais court c’est plutôt long au final mais j’espère que ça vous servira.

Liens utiles