Créer un nouveau site grâce à Hugo

Nous allons créer un site static avec Hugo! Le contenu du site est généré par des fichiers Markdown. Le site est généré avec le language Go.

Pas à pas, nous allons créer un site simple, léger et facilement modifiable.

Les prérequis pour faire ce tutoriel#

• Les bases dans un terminal
• Les bases de Git
• Les bases de Docker

Les prérequis sur la machine#

• Docker Aide pour l’installation
• Une IDE (Codium) Aide pour l’installation de Codium
• Git
• Du temps

Choisir le thème de son site#

Avant de commencer, la meilleure chose a faire est de trouver son thème de site. C’est ce qu’on verra du site.

Un bon point de départ est la partie Thèmes de Hugo

Par exemple, ce site est basé sur le thème de Michael Schnerring.

Pour les exemples suivant, je vais choisir le thème Hugo Scroll de zjedi. Je clique sur le bouton Download et je tombe sur le répertoire github du thème.

Cela me sera très utile pour lire la documentation sur comment utiliser le thème!

Création d’un squelette de site Hugo#

Dans un premier temps, nous allons configurer notre environnement ainsi que notre dossier regroupant tout ce qu’il faut pour créer notre site.

Cette partie est basée sur la documentation officiel

Création du dossier de travail#

Choisir un dossier facilement reconnaissable et vide pour stocker tous les fichiers. Nous allons créer un dossier avec les sources du site et un dossier pour le cache de Hugo (ce qui nous fera gagner du temps; Hugo ne téléchargera que si les modules ne sont pas présent das le cache). Je choisis de créer mon dossier dans ~/Code/site_limonier/, ce qui donne comme commande

  
mkdir -p ~/Code/site/site_limonier
cd ~/Code/site/site_limonier
mkdir src
mkdir hugo_cache

Vérifier que l’image Docker est bien créée et correcte#

  
docker run --user $(id -u):$(id -g) -it -v ${PWD}/src:/src -v ${PWD}/hugo_cache:/tmp/hugo_cache hugomods/hugo:ci /bin/sh

Cela nous permet de rentrer en terminal dans l’image en cours d’exécution de Docker.

Si l’image n’est pas encore téléchargée, Docker va télécharger ce qu’il faut.

Nous allons vérifier dans un premier temps qu’on arrive à utiliser la commande hugo (il fort probable que la version ne soit pas la même, le but étant que la commande hugo fonctionne)

  
hugo version
hugo v0.152.2+extended+withdeploy linux/arm64 BuildDate=2025-10-24T16:22:01Z VendorInfo=hugomods

On crée le site#

Cette commande permet de créer le squelette vide de notre site. On changera le LE_NOM_DE_MON_SITE par le bon nom.

  
hugo new site LE_NOM_DE_MON_SITE
Congratulations! Your new Hugo site was created in /src/LE_NOM_DE_MON_SITE.

Just a few more steps...

1. Change the current directory to /src/LE_NOM_DE_MON_SITE.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme "
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content /.".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.
cd LE_NOM_DE_MON_SITE

  
git init

On ajoute le thème choisi#

Il faut généralement suivre les explications présent sur le répertoire du thème.

Pour hugo_scroll, je dois

1. Ajouter le sous module git du thème.

     
   git submodule add https://github.com/zjedi/hugo-scroll.git themes/hugo-scroll
   Cloning into '/src/LE_NOM_DE_MON_SITE/themes/hugo-scroll'...
   remote: Enumerating objects: 2434, done.
   remote: Counting objects: 100% (100/100), done.
   remote: Compressing objects: 100% (53/53), done.
   remote: Total 2434 (delta 61), reused 46 (delta 46), pack-reused 2334 (from 2)
   Receiving objects: 100% (2434/2434), 48.61 MiB | 1.61 MiB/s, done.
   Resolving deltas: 100% (1195/1195), done.
   
   

2. Ajuster le fichier de configuration de Hugo

     
   echo "theme = 'hugo-scroll'" >> hugo.toml
   
   

On teste si tout est correct et le site se lance#

  
hugo server
Watching for changes in /src/LE_NOM_DE_MON_SITE/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /src/LE_NOM_DE_MON_SITE/hugo.toml
Start building sites … 
hugo v0.152.2+extended+withdeploy linux/arm64 BuildDate=2025-10-24T16:22:01Z VendorInfo=hugomods


                  │ EN  
──────────────────┼─────
 Pages            │   6 
 Paginator pages  │   0 
 Non-page files   │   0 
 Static files     │ 108 
 Processed images │   0 
 Aliases          │   0 
 Cleaned          │   0 

Built in 56 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

Travailler sur son site#

Nous allons ouvrir deux terminaux. Dans les deux, nous retournons sur notre dossier du site ~/Code/site/site_limonier/.

La commande suivate se lancer en remplaçant LE_NOM_DE_MON_SITE par le nom de votre site. (pour moi, ce sera LE_NOM_DE_MON_SITE).

Lancer le serveur qui nous permet de voir notre site dans un premier terminal#

  
docker run --user $(id -u):$(id -g) --rm -p 1313:1313 --name debugHugo -v ${PWD}/src/LE_NOM_DE_MON_SITE:/src -v ${PWD}/hugo_cache:/tmp/hugo_cache hugomods/hugo:ci server --buildDrafts --cleanDestinationDir
Watching for changes in /src/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /src/hugo.toml
Start building sites … 
hugo v0.152.2+extended+withdeploy linux/arm64 BuildDate=2025-10-24T16:22:01Z VendorInfo=hugomods


                  │ EN  
──────────────────┼─────
 Pages            │   6 
 Paginator pages  │   0 
 Non-page files   │   0 
 Static files     │ 108 
 Processed images │   0 
 Aliases          │   0 
 Cleaned          │   0 

Built in 68 ms
Environment: "development"
Serving pages from disk
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

En allant ensuite sur http://localhost:1313/, nous avons un aperçu de notre site! Il doit être totalement vide! Ce qui est normal, vu que nous n’avons pas encore ajouté de contenu!

Ajouter notre première page#

Dans l’autre terminal nous lançons la commande permettant de lancer une instance Docker de Hugo:

  
docker run --user $(id -u):$(id -g) -it -v ${PWD}/src:/src -v ${PWD}/hugo_cache:/tmp/hugo_cache hugomods/hugo:ci /bin/sh

Nous pouvons maintenant ajouter notre première page!

  
cd _LE_NOM_DE_MON_SITE_

  
hugo new homepage/welcom.md
Content "/src/_LE_NOM_DE_MON_SITE_/content/homepage/welcom.md" created

Nous avons une première page créée dans content/homepage/

Si on regarde dans le premier teminal, on verra que le serveur a mis à jour notre site!

  
Change detected, rebuilding site (#1).
2025-11-05 20:32:32.905 +0000
Source changed /homepage/welcom.md
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0)
Total in 42 ms