Créez vos sites web statiques sans prise de tête avec Hugo

Créez vos sites web statiques sans prise de tête avec Hugo

Un site web statique est un site web dont le contenu ne change pas en fonction de la personne qui navigue dessus. Vous pouvez bien sûr éditer le site directement en HTML et en CSS, mais cela peut vite devenir un enfer si vous devez modifier le style du site, il faut alors modifier toutes les pages déjà créées.

Un générateur comme Hugo ou comme Jekyll permet d’écrire le contenu du site dans un langage simple comme markdown (et uniquement le contenu) et de générer automatiquement les pages finales et leur style à l’aide de templates. Il est ainsi super simple de modifier le style des pages, car on ne modifie que les templates et on relance la génération des pages. Par ailleurs ces générateurs permettent de créer automatiquement le flux RSS.

Hugo

Jekyll

J’ai choisi de vous présenter Hugo car c’est celui que j’ai choisi pour mes besoins, il est écrit en go donc est compilé et plus rapide logiquement, il est multiplateforme donc fonctionne peu importe le poste sur lequel je travaille, libre bien évidemment et propose une large bibliothèque de thème. En effet certains thèmes conviennent pour des blogs (comme le thème Terminal que j’utilise ici), d’autres pour de la documentation, des CV ou encore des portfolios. J’ai donc l’intention de l’utiliser également pour ma documentation par exemple.

Thème Terminal

L’avantage d’un générateur comme celui-là au lieu d’un interpréteur markdown écrit en NodeJS ou en PHP par exemple, c’est qu’il n’est exécuté qu’une fois au moment de la mise à jour et il suffit ensuite de servir les pages générées sur un serveur Apache, Nginx ou Caddy, ainsi l’administration se trouve fortement simplifiée, les ressources de la machine et l’électricité sons économisés et le service de la page au client est plus rapide.

Afin de le mettre en place, il suffit de télécharger l’exécutable sur la page GitHub su projet puis de le mettre dans le $PATH de votre machine. Puis vous vous rendez à l’endroit ou vous souhaitez placer le dossier de votre projet et lancez hugo new site <nom du site>. Un dossier avec le nécessaire est créé puis dans ce dossier vous lancez hugo new posts/<nom du poste>.md pour créer un post. Vous pouvez l’éditer et vous terminez par un simple hugo pour générer le site. Le produit final se trouve dans le dossier public.

hugo new site <nom du site>
hugo new posts/<nom du poste>.md
hugo

Une page de documentation viendra bientôt pour montrer comment je fais sur ma propre infrastructure, en attendant, vous pouvez regarder la documentation officielle pour avoir plus de précisions.

Documentation officielle de Hugo

EDIT : La page de documentation se trouve ici.

Page de documentation

Originellement publié sur le web le 20 juillet 2020 par Romain de Laage

Retour à la liste des articles

🔝