Comment j'ai créé mon propre blog hébergé avec Hugo et Firebase

J’ai toujours rêvé de créer mon propre blog, personnalisé et hébergé sous mon propre domaine, sans dépenser un centime. J’ai récemment découvert Hugo, un générateur de sites statiques, et ça a allumé un feu en moi. J’ai réalisé que je n’avais pas besoin d’écrire beaucoup de code pour publier mes idées, et que rien ne pouvait empêcher mes gribouillis de trouver leur place sur Internet. Créer un blog avec Hugo est étonnamment simple, même avec des bases en codage. Et le meilleur, c’est que c’est gratuit, à condition de posséder un nom de domaine.

Associer Hugo à Firebase Hosting s’est avéré être la combinaison idéale pour moi. Hugo se charge de générer un site statique rapide, et Firebase le déploie partout dans le monde, très rapidement et gratuitement. Le plus ? Grâce à GitHub Actions, le déploiement est automatique dès que j’apporte des modifications. Il suffit de lancer le déploiement et c’est parti !

Dans ce guide, je vous expliquerai tout ce que j’ai fait pour donner vie à mon blog, de la configuration d’Hugo à sa mise en ligne avec Firebase, en passant par l’automatisation de l’ensemble du processus. Voici ce que nous aborderons :

• Création d’un blog Hugo de A à Z
• Installation d’un thème (j’ai opté pour hugo-narrow, mais vous pouvez choisir votre style)
• Configuration d’un hébergement Firebase avec prise en charge multisite
• Automatisation des déploiements avec GitHub Actions pour un fonctionnement optimal

1. Configuration d’Hugo

Tout d’abord, j’ai dû installer Hugo, le générateur de sites statiques qui rend la création de blogs ultra-rapide et légère. L’installation a été rapide et sans effort, et une fois installé sur ma machine, j’étais prêt à me lancer.

Installer Hugo

brew install hugo           # macOS
sudo apt install hugo       # Linux
choco install hugo-extended # Windows

Une fois installé, vérifiez si cela fonctionne :

hugo version

Vous devriez voir le numéro de version apparaître. Bravo ! Hugo est prêt.

Création d’un projet de blog

Une fois Hugo installé, il était temps de passer à la création du projet de blog. Cette étape était étonnamment simple : une seule commande suffit et Hugo configure tout.

hugo new site my-blog
cd my-blog

Vous disposez ainsi d’un nouveau dossier de projet avec toute la structure de base nécessaire : mises en page, dossiers de contenu, fichiers de configuration, etc.

À ce stade, le blog est encore vierge. Prochaine étape : lui donner du style grâce à un thème.

Ajouter le thème à votre blog

Un blog sans thème, c’est juste… du Markdown déprimant. Je voulais quelque chose de simple, épuré et minimaliste, et après quelques recherches, j’ai opté pour Hugo-Narrow. C’est léger et efficace.

Theme Link: https://hugo-narrow-docs.vercel.app/

git init
git submodule add https://github.com/tom2almighty/hugo-narrow.git themes/hugo-narrow
# Update submodules
git submodule update --init --recursive --remote

Update hugo.yaml:

baseURL: 'https://example.com'  # Change to your website URL
title: 'My Blog'  # Change to your website title

Ajouter une publication

C’est parti pour l’écriture ! Hugo simplifie la création d’articles de blog. Une seule commande suffit et vous obtenez un fichier Markdown prêt à être modifié, prêt à écrire.

hugo new posts/my-first-post.md

Modifier la page de garde :

title: "My First Post"
date: 2025-06-13
draft: false
categories: ["Blog"]
tags: ["Hugo", "Tutorial"]

Modifiez le titre, écrivez ce que vous voulez en dessous et lorsque vous êtes prêt à publier, définissez brouillon : faux.

Construire le site

Pour prévisualiser votre site localement :

hugo server -D

Cela génère les fichiers statiques dans lepublic/ dossier. Vous pouvez maintenant visiter http://localhost:1313 dans votre navigateur pour afficher votre site Web.

2. Lancer votre blog avec Firebase Hosting

Écrire, c’est amusant, mais mettre son blog en ligne ? C’est là que la magie opère. J’ai opté pour Firebase Hosting : c’est rapide, gratuit et compatible avec Hugo. Commençons par le configurer.

Installer l’interface de ligne de commande Firebase

Vous aurez besoin de l’interface de ligne de commande Firebase pour déployer des éléments :

npm install -g firebase-tools

Connectez-vous ensuite à votre compte Firebase :

firebase login

Initialiser l’hébergement Firebase (multisite)

J’ai choisi l’hébergement multisite de Firebase car j’héberge mon portfolio personnel et mon blog dans le même projet Firebase. Vous pouvez bien sûr choisir de les séparer si cela vous convient mieux.

Maintenant, dans votre dossier de projet Hugo :

firebase init hosting

À l’invite :

• Sélectionnez Utiliser un projet existant
• Choisissez Configurer comme déploiement multisite
• Pour le répertoire public, saisissez : public

Hugo crée votre site dans le dossier public ; c’est donc ce dossier que Firebase doit gérer.

Après l’initialisation, vous obtiendrez :

.firebaserc

{
  "projects": {
    "default": "Your-Blog-Name"
  },
  "targets": {
    "Your-Blog-Name": {
      "hosting": {
        "blog": ["Your-Blog-Name"]
      }
    }
  }
}

firebase.json

{
  "hosting": [
    {
      "target": "blog",
      "public": "public",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
    }
  ]
}

Assurez-vous que le nom de la cible correspond à celui que vous utiliserez ultérieurement dans les actions GitHub (par exemple, « hosting:blog »).

Tester un déploiement local (facultatif)

Vous souhaitez le tester avant de passer au CI/CD complet ? Si votre blog est en ligne à l’URL Firebase, bravo !

hugo --minify
firebase deploy --only hosting:blog

3. Déposez votre blog sur GitHub

Initialisez un dépôt Git si ce n’est pas déjà fait :

git init
git add .
git commit -m "Initial Hugo blog setup"
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Assurez-vous que votre code est bien présent dans la branche principale ; notre workflow GitHub Actions s’en chargera.

4. Automatisez avec GitHub Actions

Les déploiements manuels sont acceptables… une fois. Automatisons-les pour que votre blog soit publié à chaque fois que vous le publiez.

Générer un jeton Firebase

Opération unique : ceci donne à GitHub l’autorisation de déployer :

firebase login:ci

Copiez le jeton obtenu.

Ajouter le jeton aux secrets GitHub

Accédez à votre dépôt GitHub :

• Paramètres → Secrets et variables → Actions
• Cliquez sur « Nouveau secret de dépôt »
• Nom : FIREBASE_TOKEN
• Valeur : (collez le jeton copié)

Créer le fichier de workflow

Créons maintenant la configuration des actions GitHub :

.github/workflows/deploy.yml

name: Deploy Hugo blog to Firebase

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'

      - name: Build Hugo site
        run: hugo --minify

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase Hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
        run: |
          firebase deploy --only hosting:blog

5. Finalisation et déploiement

C’est fait ? Lancez le déploiement et laissez la magie opérer.

Déclenchez un déploiement :

git add .
git commit -m "New blog post"
git push origin main

Cela déclenchera votre workflow GitHub Actions, créera votre blog Hugo et le déploiera automatiquement sur Firebase !

Facultatif : Nettoyer les workflows supplémentaires

Si vous avez testé plusieurs fichiers « .yml » sous « .github/workflows/ » (comme moi), veillez à supprimer ou renommer ceux que vous n’utilisez pas afin d’éviter les exécutions de workflow en double.

rm .github/workflows/preview.yml
git commit -am "Remove unused workflow"
git push origin main

Résumé

Et voilà !

Vous disposez désormais de :

• Un blog fonctionnel basé sur Hugo
• Un hébergement Firebase avec déploiement basé sur les cibles
• Une CI/CD utilisant les actions GitHub de la branche « main »

Vous souhaitez ajouter des fonctionnalités comme des analyses, des commentaires ou une newsletter ? Laissez un commentaire ci-dessous ou contactez-moi et je vous enverrai un message !