Créer un site statique avec Hugo

Créer un site statique avec Hugo #

Hugo est un générateur de sites statiques écrit en go. Le principe est de lui fournir du contenu écrit en markdown et de lui indiquer un thème à suivre, il génère ensuite l’ensemble du site en HTML, CSS et JS qu’il suffit de téléverser sur son serveur web.

Ce n’est pas un service disponible sur notre infrastructure mais plutôt un programme que l’on installe en local sur sa machine. Ce site de documentation ainsi que le blog utilisent ce système.

Télécharger Hugo #

On se rend sur la page GitHub de Hugo puis on sélectionne la version adaptée à son système, on va télécharger l’exécutable dans un dossier inclus dans la varible $PATH (par exemple /usr/bin)

wget -O /usr/bin/hugo <url>

Créer un nouveau site #

On se rend dans un répertoire de travail dans lequel on placera l’ensemble de nos sites. Pour créer un nouveau projet il suffit de lancer

hugo new site <nom du site>

puis un dossier <nom du site> et créé, il contient l’ensemble des fichiers nécessaires pour générer notre site.

Une bonne pratique à faire est d’initialiser un dépôt git dans ce dossier (simplement git init) et on peut y ajouter l’ensemble du dossier puis faire un commit (git add .; git commit -m "First commit"). On peut ensuite choisir un thème puis on l’ajoute en tant que sous module du dépôt

git submodule add <url vers le dépôt git du thème> themes/<nom du thème>

Cette commande est en général rappellée dans la procédure d’installation des thèmes.

Ce qui suit dépendra de votre utilisation de hugo, il faut penser à éditer le fichier de configuration comme le demande le thème, vous pouvez aussi jeter un oeil au dossier themes/<nom du thème>/exampleSite qui donne un aperçu du fonctionnement du thème.

La commande permettant de créer un nouveau fichier pré-rempli est

hugo new <chemin vers fichier>

il sera placé dans content et aura déjà un modèle de ce que doit contenir le fichier, pour un post de blog on le met dans posts/<nom>.md, pour de la doc docs/<nom>.md.

Quand vous êtes prêt à générer le site il faut lancer tout simplement

hugo

Le site sera généré dans le dossier public qu’il faut mettre dans votre serveur web.

Maintenant il suffit de tester et d’explorer les différents exemples pour en apprendre plus !