Premiers pas avec Hugo et Docker

Conteneur Docker

Récupérez le conteneur Docker à partir de Docker Hub :

docker pull registry.gitlab.com/pages/hugo/hugo_extended:latest

Étiquette

Par commodité, créons un alias (une étiquette) pour ne pas avoir à indiquer l’URL complète dans chaque commande Docker.

docker tag registry.gitlab.com/pages/hugo/hugo_extended:latest hugo_extended

Pour en savoir plus, consultez docker tag.

Créer un nouveau site

Nous pouvons commencer à utiliser le conteneur Hugo pour créer un nouveau site :

docker run --rm -v ${PWD}:/src hugo_extended hugo new site quickstart

• docker run demande à Docker d’exécuter (de créer) un nouveau conteneur.
• --rm indique à Docker que nous voulons supprimer le conteneur une fois son exécution terminée.
• -v ${PWD}:/src monte le répertoire courant de la machine hôte dans un dossier du conteneur Hugo situé à /site.
• hugo_extended est le conteneur Hugo que nous avons récupéré plus tôt.
• hugo new site <site_name> exécute les sous-commandes new site de Hugo. Le conteneur Hugo définit déjà la commande hugo comme point d’entrée principal. Le dernier argument est le nom du site que nous créons.

Après avoir exécuté la commande ci-dessus, vous verrez :

Congratulations! Your new Hugo site is created in /src/quickstart.

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.

1. Nous avons exécuté Hugo dans le conteneur; Hugo n’est pas installé sur l’hôte.

2. Grâce au volume que nous avons monté, les fichiers (ou artefacts) produits par hugo new site ont été conservés et demeurent accessibles sur l’hôte, même après la destruction du conteneur.

Ajouter un thème

Avant d’ajouter un thème, traitons ceci comme un vrai projet :

cd quickstart
git init
git add .
git commit -m "initial commit"

Maintenant que nous avons un dépôt git, nous pouvons ajouter un thème au moyen d’un sous-module :

git submodule add https://github.com/calintat/minimal.git themes/minimal
git submodule init
git submodule update
echo 'theme = "minimal"' >> config.toml

Si ce thème ne vous plaît pas, n’hésitez pas à parcourir https://themes.gohugo.io/ pour trouver d’autres options.

À ce stade, nous pouvons lancer le site avec :

docker run --rm -v ${PWD}:/src -p 1313:1313 hugo_extended hugo server --bind 0.0.0.0

• docker run demande à Docker d’exécuter (de créer) un nouveau conteneur.
• --rm indique à Docker que nous voulons supprimer le conteneur une fois son exécution terminée.
• -v ${PWD}:/src monte le répertoire courant de la machine hôte dans un dossier du conteneur Hugo situé à /src.
• -p 1313:1313 redirige le port 1313 de notre hôte vers le port 1313 de notre conteneur.
• hugo_extended est le conteneur Hugo que nous avons récupéré plus tôt.
• hugo server --bind 0.0.0.0 exécute la sous-commande hugo server. L’option bind supplémentaire est requise lors de l’exécution dans un conteneur; sinon, vous ne pourrez pas ouvrir le site localement dans votre navigateur.

Vous obtiendrez une sortie semblable à celle-ci :

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 42 ms
Watching for changes in /src/{content,data,layouts,static,themes}
Watching for config changes in /src/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Ouvrez un navigateur et accédez à http://localhost:1313.

Lorsque vous avez terminé, appuyez sur Ctrl+C dans le Terminal pour arrêter le conteneur Docker Hugo en cours d’exécution.

Valider vos modifications

git add .
git commit -m "add theme submodule"

Simplifier le tout avec Docker Compose

Docker Compose nous offre un mécanisme pour réduire la quantité de commandes à taper et tout mettre en marche. Dans ce cas-ci, il n’y a qu’un seul service, mais imaginez que vous ayez besoin de bases de données, de services de journalisation, de services clé-valeur et d’un service d’API. C’est tellement plus agréable de lancer une seule commande et d’avoir un système prêt à l’emploi.

Une autre raison est l’intégration et le déploiement continus. Vous entendrez souvent beaucoup de gens dire qu’ils utilisent Docker pour assurer l’uniformité entre les environnements : ce qui s’exécute en développement est identique à ce qui s’exécute en intégration, en préproduction et en production, à quelques différences de configuration près. C’est vrai, mais Docker Compose offre aussi un autre avantage puissant : un ensemble composable de commandes de déploiement. Nous y reviendrons plus tard.

Créez un fichier docker-compose.yml à la racine du projet avec le contenu suivant :

version: "3"
services:
  hugo:
    image: registry.gitlab.com/pages/hugo/hugo_extended:latest
    working_dir: /src
    ports:
      - "1313:1313"
    volumes:
      - ".:/src"
    command: server --bind 0.0.0.0

Démarrer Hugo

docker-compose up -d hugo

Ouvrez un navigateur et accédez à http://localhost:1313.

Valider vos modifications

git add .
git commit -m "add docker-compose"