J’avais besoin d’un espace pour présenter mon travail, partager des idées et écrire des articles — qu’il s’agisse de tutoriels, de critiques, d’éditoriaux ou de simples billets de blog. GitHub est idéal pour héberger du code, mais je voulais un espace à moi sur le web. Ce blog me sert aussi de portfolio numérique.

Quelles options pour bloguer ?

Voici quelques plateformes populaires pour démarrer un blog :

Ces plateformes tout-en-un offrent des fonctionnalités intéressantes :

  • Mise en page automatisée pour se concentrer sur le contenu
  • SEO intégré
  • Éditeur dans le navigateur
  • Gestion des médias, plugins et thèmes
  • Hébergement, base de données et mises à jour gérés automatiquement

Mais je voulais quelque chose de gratuit, minimaliste, et entièrement sous mon contrôle.

GitHub Pages propose un hébergement gratuit pour du contenu statique — sans backend, sans base de données — juste du HTML, CSS, JS. Cette contrainte m’a amené à explorer les générateurs de sites statiques.

🚧 Mes raisons de choisir Hugo, et une réflexion plus approfondie, seront abordées dans un article à part.

Mise en place du blog

J’ai suivi ces 5 étapes (inspirées de l’article de Bhanu Chaddha) :

  1. Installer Hugo
  2. Créer le projet
  3. Initialiser Git
  4. Installer un thème via un sous-module
  5. Ajouter du contenu et lancer le site

1. Installer Hugo

Sous Ubuntu :

sudo snap install hugo --channel=extended

Vérifier l’installation :

hugo version

Exemple de sortie :

hugo v0.96.0+extended linux/amd64 BuildDate=2022-03-26T09:15:58Z

2. Créer un nouveau projet Hugo

Se rendre dans le dossier de travail :

cd ~/Documents
hugo new site emmanuel-io-github-io-hugo

Cela crée la structure du projet Hugo.

3. Initialiser Git

cd emmanuel-io-github-io-hugo
git init
git branch -m main

4. Installer un thème avec un sous-module

J’ai choisi le thème Ananke et je l’ai ajouté comme sous-module Git :

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

5. Ajouter la configuration d’exemple et du contenu

Pour tester rapidement le site :

cp -R ./themes/ananke/exampleSite/{config.toml,content*,static*} ./

Puis lancer le serveur local :

hugo server

Accédez à http://localhost:1313 pour voir la version de démonstration du thème.

6. Personnaliser le site

À partir de là, j’ai commencé à adapter la configuration à mes besoins.

👉 Dans le prochain article, j’expliquerai comment j’ai structuré le site, ajouté le support multilingue, configuré GitHub Actions et personnalisé le thème.