Comment Créer Un Site Avec Hugo Partie 9 : publier le site avec Netlify

Créer un site avec Hugo partie 9 : publier le site sur internet

Normalement, à cette étape, vous devriez avoir une base de site statique propre et complète : template d’accueil, pages, articles, listes, taxonomies, shortcodes. On va voir comment publier une première version du site avant d’ajouter quelques fonctionnalités supplémentaires (comme les commentaires).

Netlify : à quoi ça sert, et comment ça marche ?

Netlify est une plateforme d’hébergement spécialisée dans les sites statiques (et progressivement dans les applications JAMstack plus larges). Elle propose une offre gratuite généreuse — largement suffisante pour un site personnel ou un blog moyen — avec :

• 100 Go de bande passante mensuelle (sachant qu’une page HTML moyenne pèse souvent moins de 1 Mo, vous pouvez absorber pas mal de trafic)
• 300 minutes de build par mois
• Déploiement automatique à chaque push
• HTTPS gratuit via Let’s Encrypt
• Deploy previews automatiques sur les pull requests
• Formulaires intégrés (qu’on a utilisés dans la partie 5)
• DNS et noms de domaine personnalisés gratuits

Par défaut, Netlify vous attribue un sous-domaine en .netlify.app (du genre suspicious-archimedes.netlify.app). Vous pouvez bien sûr utiliser votre propre nom de domaine, on verra ça à la fin de l’article.

Configuration du projet : netlify.toml

Avant de passer au déploiement, on va préparer un fichier de configuration à la racine du projet. C’est devenu la pratique recommandée par rapport à l’ancienne méthode où on configurait tout depuis l’interface Netlify (qui devenait vite illisible et qu’on devait répliquer manuellement quand on créait un nouveau site).

Créez un fichier netlify.toml à la racine de votre site (pas dans le thème !) avec ce contenu :

[build]
publish = "public"
command = "hugo --gc --minify"

[build.environment]
HUGO_VERSION = "0.161.1"
NODE_VERSION = "22"

[context.production.environment]
HUGO_VERSION = "0.161.1"
NODE_VERSION = "22"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.161.1"
NODE_VERSION = "22"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.161.1"
NODE_VERSION = "22"

Décortiquons :

• [build] définit ce que Netlify exécute pour générer le site :

  • publish = "public" : c’est le dossier que Hugo génère (la racine du site final).
  • command = "hugo --gc --minify" : la commande de build. --gc nettoie les ressources inutilisées, --minify réduit la taille des fichiers.

• HUGO_VERSION : épingle la version d’Hugo. C’est crucial. Sans cette ligne, Netlify utilise une vieille version par défaut, ce qui peut casser votre site. Vérifiez la dernière version stable sur github.com/gohugoio/hugo/releases et mettez-la ici.

• NODE_VERSION : Netlify provisionne aussi un environnement Node.js (pour ses outils internes comme les Agent Runners, les plugins, etc.), même si votre site Hugo n’utilise pas Node. Sans cette variable, Netlify utilisera une vieille version (Node 10) et vous verrez un warning du genre “Your project uses Node.js 10. Agent Runners work best with Node.js 22 or higher”. Mettre NODE_VERSION = "22" règle ça.

• [context.production.environment] : variables spécifiques au build de production (la branche principale qui sert le site en ligne).

  • HUGO_ENV = "production" : permet à Hugo de savoir qu’on est en prod (utile dans les templates pour conditionner certains comportements).
  • HUGO_ENABLEGITINFO = "true" : enrichit les pages avec les infos git (date du dernier commit, etc.).

• [context.deploy-preview] et [context.branch-deploy] : Netlify crée des aperçus pour les pull requests et les branches autres que la principale. L’option -b $DEPLOY_PRIME_URL permet de générer les URLs absolues correctement pour ces aperçus. --buildFuture autorise la génération d’articles datés dans le futur (utile en preview).

Les étapes pour rendre votre site public

Étape 1 : envoyer votre site sur GitHub (ou GitLab)

Pour permettre à Netlify de publier votre site, il lui faut accéder à vos fichiers. L’utilisation de Git prend tout son sens : en envoyant les fichiers sur un dépôt distant (GitHub, GitLab, Bitbucket), Netlify pourra récupérer les sources et compiler le site à chaque modification.

Si vous n’avez pas encore initialisé git pour votre projet :

git init
git add .
git commit -m "Initial commit"

Créez ensuite un dépôt sur GitHub (ou GitLab), et poussez votre code :

git remote add origin git@github.com:votre-compte/votre-repo.git
git branch -M main
git push -u origin main

Petit conseil : créez un fichier .gitignore à la racine du projet pour éviter de versionner certains fichiers générés. Au minimum :

/public
/resources
.hugo_build.lock

Étape 2 : créer un compte Netlify et y connecter votre dépôt

Rendez-vous sur https://www.netlify.com/ et créez votre compte (vous pouvez utiliser l’authentification GitHub, ça simplifie tout).

Une fois connecté, cliquez sur “Add new site” → “Import an existing project” et sélectionnez votre fournisseur git (GitHub, GitLab, Bitbucket).

Autorisez Netlify à accéder à vos dépôts, puis sélectionnez celui qui contient votre site.

Bonne nouvelle : comme on a déjà configuré netlify.toml à l’étape précédente, Netlify détecte automatiquement les bons paramètres. Vous n’avez rien à modifier dans le formulaire de configuration — laissez tout par défaut et cliquez sur “Deploy site”.

Si vous n’aviez pas créé de netlify.toml, vous auriez dû configurer manuellement la commande (hugo --gc --minify), le dossier de publication (public) et les variables d’environnement (notamment HUGO_VERSION et NODE_VERSION).

Étape 3 : observer le build

Attendez quelques secondes que la magie opère. Netlify va :

1. Cloner votre dépôt
2. Installer Hugo à la version spécifiée
3. Exécuter la commande de build
4. Servir le contenu du dossier public/

Une fois le build terminé, Netlify attribue un domaine aléatoire (du type suspicious-archimedes.netlify.app) :

Vous pouvez désormais visiter votre site à cette adresse !

Étape 4 : utiliser votre propre nom de domaine

Pour utiliser un domaine personnalisé :

1. Dans Netlify, allez dans Domain management → Add custom domain
2. Indiquez le domaine que vous souhaitez utiliser (vous devez bien sûr en être propriétaire)
3. Netlify vous demande de faire pointer vos DNS

Deux options pour les DNS :

Option A — Déléguer entièrement les DNS à Netlify (recommandé) : vous changez les serveurs DNS de votre domaine pour pointer vers Netlify. Plus simple à gérer, plus performant, mais ça veut dire que toute la gestion DNS passera par Netlify.

Option B — Garder son registrar et configurer un A record : chez votre registrar (OVH, Gandi, Cloudflare…), créez un enregistrement de type A pointant vers l’IP de Netlify (75.2.60.5 au moment où j’écris ces lignes — vérifiez la valeur exacte dans l’interface Netlify, ça peut bouger).

Pour le sous-domaine www, créez un enregistrement CNAME qui pointe vers votre site Netlify (votresite.netlify.app).

Après quelques minutes (le temps que les DNS se propagent), votre site sera accessible sur votre domaine. Netlify délivre automatiquement un certificat SSL via Let’s Encrypt, donc votre site sera en HTTPS dès le départ. Magique !

Un point sur le workflow

Désormais, vous avez :

• Une version locale de votre site que vous pouvez prévisualiser via hugo server
• Une version en ligne délivrée par Netlify qui récupère automatiquement tout ce que vous “pushez” sur la branche principale

Bonus deploy previews : si vous travaillez avec des branches et que vous créez des pull requests, Netlify créera automatiquement une URL d’aperçu pour chaque PR. C’est super pratique pour tester une fonctionnalité ou un design avant de merger en production. L’URL est postée en commentaire sur la PR si vous utilisez GitHub.

Workflow recommandé :

develop locally  →  git push branche-feature  →  PR sur GitHub  →  deploy-preview Netlify
       ↓                                                                  ↓
  hugo server                                                  test sur l'URL de preview
                                                                          ↓
                                                                merge → déploiement prod

Alternatives à Netlify

Netlify reste une référence pour les sites statiques, mais le marché s’est étoffé. Quelques alternatives à connaître si vous voulez comparer :

• Vercel — créé par les auteurs de Next.js, excellente plateforme similaire à Netlify, particulièrement bonne pour les apps React/Next mais supporte aussi Hugo. Offre gratuite généreuse.
• Cloudflare Pages — bande passante illimitée en gratuit, builds illimités, infrastructure Cloudflare (rapidité mondiale). Mon préféré quand on veut zéro contrainte sur le trafic.
• GitHub Pages — gratuit, intégré à GitHub, mais plus limité (pas de deploy previews, pas de formulaires, build via GitHub Actions).
• Render — moins connu mais très bon, surtout si vous avez aussi des besoins backend.

Pour ce tuto on reste sur Netlify, mais sachez que la migration vers une de ces alternatives est généralement très simple : il suffit de leur indiquer la commande de build et le dossier de publication, le reste est identique.

Conclusion

Votre site est en ligne ! Il ne reste plus qu’à ajouter les commentaires (partie 10) et vous aurez un blog complet, performant et publié dans des conditions de prod sérieuses.