14 Apr 2020

[Hugo] Création d'un projet Hugo avec docker

Depuis quelque temps je planifie de faire revivre ce blog. Aussi j’ai décidé de le migrer de Wordpress à Hugo, un générateur de site statique.

Qu’est-ce qu’Hugo

Hugo est un logiciel permettant de générer un site web statique, c’est-à-dire des pages HTML/CSS/JS simples. Ce type de site a l’avantage de ne pas dépendre d’un moteur d’exécution type PHP, Python, etc. Il se charge donc extrêmement rapidement.

Le produit est développé en Go et lit des fichiers au format MarkDown pour la génération. Plus d’information sur le site officiel d’Hugo .

Mise en place du projet docker local

La création d’un projet Hugo est très bien documenté sur la documentation officielles . En résumé il convient de créer un nouveau projet, cloner un thème et démarrer le serveur de développement. Notre objectif ici est de réaliser ces actions dans un projet docker-compose.

Création du projet docker-compose

Nous allons créer un nouveau dossier qui contiendra l’ensemble de notre site web ainsi que les fichiers de configuration docker.

$ mkdir monsite
$ cd monsite
$ git init

Voici le contenu du fichier docker-compose.yml. Comme vous le voyez les sources du site seront placées à l’intérieur du dossier src/ du projet. Ici nous surchargeons les UID et GID de l’utilisateur pour qu’ils correspondent à notre utilisateur local (1000:1000 pour moi). Vous constaterez aussi que la commande de démarrage du container a été surchargé pour ajouter l’option -D. Celle-ci permet d’afficher les articles à l'état de brouillon.

version: "3.0"
services:
  hugo:
    image: pockost/hugo:0.69.0
    volumes:
      - ./src/:/src
    user: "1000:1000"
    command: serve --bind=0.0.0.0 -D
    ports:
      - 1313:1313

Nous pourrons dans l’avenir démarrer le projet et nous rendre sur l’adresse locale http://127.0.0.1:1313 avec une simple commande.

$ docker-compose up -d

Ceci ne fonctionnera pour l’instant, car nous n’avons pas créé de site hugo. C’est l’objet du prochain chapitre.

Créer le projet Hugo et cloner un thème

Avec notre configuration docker-compose précédente nous pouvons lancer des commandes Hugo via une commande run. Par exemple pour afficher l’aide.

$ docker-compose run --rm hugo --help

Dans notre cas nous souhaitons créer un nouveau site, aussi nous utiliserons la commande new site.

$ docker-compose run --rm hugo new site .
Congratulations! Your new Hugo site is created in /src.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Vous pouvez maintenant démarrer le projet et confirmer que le site fonctionne.

$ docker-compose up -d
$ curl localhost:1313
<pre>
</pre>

Notre site fonctionne donc correctement mais celui-ci est vide. Il nous faut maintenant ajouter un thème et créer des pages.

Ajout d’un thème et création d’une première page

L’ajout d’un thème peu se faire de différentes manière, ceci n'étant pas l’objet de ce billet nous nous contenterons de cloner le thème d’exemple Ananke en tant que submodule git comme le suggère la documentation.

$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git src/themes/ananke
$ echo 'theme = "ananke"' >> src/config.toml

Vous pouvez maintenant configurer votre site via le fichier src/config.toml. Vous trouverez un exemple de configuration dans le fichier src/themes/ananke/exampleSite/config.toml. Vous pouvez aussi créer de nouvelles page via la commande suivante:

$ docker-compose run --rm hugo new posts/premier-post.md

Conclusion

C’est tout pour la configuration et l’utilisation d’un environnement docker dans le cadre d’un développement de site web Hugo. Il va sans dire que de nombreuses autres ressources vous seront nécessaires pour mener à bien la rédaction de vos articles.

Lerm-IT