J’ai eu l’idée de faire quelque chose pour aider les gens à choisir leur premier poste d’arbitre. J’avais envisagé de faire un graphique (un peu comme celui que j’ai fait pour les star pass), mais je trouvais que c'était pas toujours très facile à lire. Et puis j’avais envie de mettre un peu plus de détail sur chaque poste, ce qui fait vite beaucoup de texte pour un seul graphique. J’ai alors compris qu’il n’y avait qu’une seule solution : il fallait que je fasse un livre dont vous êtes le héros.

Vous pouvez trouver cette aventure textuelle à ce lien, ou peut-être prochainement sous forme de zine au stand de merch des événements du Roller Derby Toulouse. La suite de cet article expose comment j’ai créé une aventure textuelle en ligne.

J’utilise déjà Hugo pour le blog que vous êtes en train de lire, et j’ai voulu utiliser un outil que je connaissais déjà pour pas trop me prendre la tête. Si vous n’avez jamais utilisé Hugo, vous devez commencer par l’installer. Le principe général de Hugo, c’est que vous écrivez le contenu de votre site avec un fichier Markdown pour chaque page, et Hugo génère tous le HTML et le CSS pour que ça fasse un joli site.

La procédure d’installation dépend de votre machine, et vous pouvez trouver les instructions pour votre machine ici. Pour ma part, il m’a suffit de faire

sudo apt install hugo

J’ai trouvé un thème minimaliste puis j’ai créé un nouveau site avec Hugo.

hugo new site zebringo
cd zebringo
git init
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog 

Vous pouvez aussi trouver d’autres thèmes ici (ou créer votre propre thème).

Maintenant dans le sous-dossier themes, j’ai tout ce qui concerne l’apparence générale du site. J’ai copié le contenu de themes/hugo-bearblog/exampleSite dans la racine de mon dossier, afin d’avoir une arborescence toute faite à partir de laquelle travailler.

cp exampleSite/* ./

J’ai ouvert le fichier config.toml avec un éditeur de texte. Ce fichier contient plein de lignes de la forme clé = valeur. J’ai modifié au pif les valeurs qui me semblaient pertinentes pour mon site. Ça y est, je peux commencer à écrire les pages de mon aventure !

La page d’accueil du site sera générée à partir du fichier content/_index.md. Et pour créer d’autres pages, j’utilise la commande

hugo new <nom_de_la_page>.md

ce qui créé un nouveau fichier dans le répértoire content. Celui-ci est constitué d’un en-tête qui ressemble à

---
title: "Titre de la nouvelle page"
date: "2023-04-17"
draft: true
---

Sous l’en-tête, j'écris du Markdown qui sera ensuite converti en HTML par Hugo. Retrouvez la syntaxe du Markdown ici.

J'écris ce que je veux dans le fichier. Pour chaque page, j'écris un pavé de texte, puis une liste de liens vers les suites possibles de l’aventure.

Un bémol : j’avais pas anticipé à quel point écrire les liens serait relou. Par exemple, si je veux faire un lien vers la page qui sera générée par le fichier IPR.md, je dois indiquer comme lien ../ipr/index.html. À noter par la même occasion que les liens sont en lettres minuscules, même si le fichier .md contient des majuscules.

Dans l’en-tête, je remplace draft=true par draft=false. Pour prévisualiser le résultat, j’utilise la commande

hugo server

et dans mon navigateur web, je tape http://localhost:1313/ dans la barre d’URL.

Puis j’utilise la commande

hugo 

qui va créer automatiquement les pages HTML à partir des fichiers .md que j’ai écrit. Enfin je transfère le contenu du dossier public sur mon site, et voilà ! Vous pouvez retrouver les sources du site sur mon dépôt Git.