Comment Créer Un Site Avec Hugo Partie 10 : La gestion des commentaires

Créer un site avec Hugo partie 10 : intégrer les commentaires

Si vous désirez mettre en place la gestion des commentaires, c’est tout à fait possible avec Hugo.

Le hic, c’est que nous ne disposons pas d’une base de données à proprement parler : du coup, pour stocker et modérer ces commentaires, il va falloir passer par une solution tierce.

Eh oui ! Car le problème avec un GSS (Gestionnaire de Site Statique), c’est que c’est fait pour générer des sites pour délivrer du contenu, point barre.

Niveau fonctionnalités interactives, on est un peu limité, mais des solutions ont bien évolué ces dernières années. Voyons les options qui s’offrent à vous en 2026.

Le paysage des commentaires en 2026

Le secteur a beaucoup bougé depuis la grande époque de Disqus. Voilà mon classement actuel :

Solutions modernes que je recommande :

• Giscus — utilise GitHub Discussions comme backend. Open source, gratuit, sans tracking, sans pub. Idéal pour les blogs tech dont l’audience a déjà un compte GitHub.
• Utterances — similaire à Giscus mais basé sur GitHub Issues. Plus ancien et un peu moins riche que Giscus, mais toujours très bon.
• Cusdis — open source, simple, RGPD-friendly, version auto-hébergée possible. Pas de tracking. Bon choix si votre audience n’est pas forcément tech.

Solutions historiques :

• Disqus — toujours là, intégré nativement à Hugo, mais devenu envahissant côté publicité dans la version gratuite. À éviter si vous tenez à la vie privée de vos lecteurs.

À éviter / plus à jour :

• Just Comments (a fermé)
• StaticMan (en sommeil depuis longtemps)

Dans la suite de cet article, je vais détailler les deux options qui ont le plus d’intérêt aujourd’hui : Giscus (ma recommandation principale) et Disqus (pour ceux qui veulent la solution la plus simple à mettre en place, et qui ne sont pas dérangés par la pub).

Option 1 : Giscus (recommandé)

Giscus est probablement la meilleure solution pour un blog tech moderne :

• Backend GitHub Discussions : vos commentaires sont stockés dans le dépôt GitHub de votre site
• Open source, gratuit, pas de publicité, pas de tracker
• Markdown natif dans les commentaires
• Réactions (like, etc.) intégrées
• Authentification GitHub uniquement (limite un peu l’audience mais évite tout le spam)

Mise en place de Giscus

1. Pré-requis : votre site doit être hébergé sur un dépôt public sur GitHub. L’application Giscus doit avoir accès au dépôt.

2. Activez les Discussions dans votre dépôt GitHub : Settings → Features → Discussions.

3. Installez l’app giscus sur votre dépôt.

4. Rendez-vous sur giscus.app et configurez votre intégration (le site est en français et vous guide pas à pas) : choisissez votre dépôt, la catégorie Discussions à utiliser, la langue, le thème…

5. À la fin, giscus.app vous génère un snippet <script> à copier-coller. Ça ressemble à ça :

<script src="https://giscus.app/client.js"
        data-repo="VOTRE-COMPTE/VOTRE-REPO"
        data-repo-id="..."
        data-category="Comments"
        data-category-id="..."
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="fr"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

6. Créez un partial dédié themes/sandbox/layouts/partials/comments.html et collez-y le snippet. Vous pouvez le wrapper dans un <div> si vous voulez le styliser :

<section class="section">
    <div class="container max-800px">
        <h3>Une remarque ou un avis sur cet article ? Discutons-en :</h3>
        <script src="https://giscus.app/client.js"
                data-repo="VOTRE-COMPTE/VOTRE-REPO"
                data-repo-id="..."
                data-category="Comments"
                data-category-id="..."
                data-mapping="pathname"
                data-strict="0"
                data-reactions-enabled="1"
                data-emit-metadata="0"
                data-input-position="top"
                data-theme="preferred_color_scheme"
                data-lang="fr"
                data-loading="lazy"
                crossorigin="anonymous"
                async>
        </script>
    </div>
</section>

7. Appelez ce partial dans le template des articles (themes/sandbox/layouts/blog/single.html) juste après le contenu :

<div class="content">
    {{ .Content }}
</div>

{{ partial "comments.html" . }}

Et voilà, c’est en place ! Giscus va mapper chaque article à un thread de discussion GitHub en se basant sur l’URL (data-mapping="pathname"). Les commentaires apparaîtront sous chaque article et les nouveaux commentaires créeront automatiquement une nouvelle discussion dans GitHub.

Note importante : comme Giscus utilise un script tiers, il ne s’affiche pas en local (le script tente de communiquer avec GitHub via l’URL de votre site, qui doit être publique). Pour tester, déployez et regardez sur la version en ligne.

Option 2 : Disqus

Disqus est moins recommandable qu’avant (publicités dans la version gratuite, performance, tracking), mais il a un avantage majeur : il est intégré nativement à Hugo, donc la mise en place est immédiate.

Mise en place de Disqus

1. Créez un compte sur https://disqus.com/ et choisissez “I want to install Disqus on my site” :

2. Disqus propose un plan : restez sur le Basic (gratuit).

3. Choisissez un shortname unique qui servira d’identifiant pour votre site (par exemple monsupersitehugo).

4. Terminez la configuration de votre site (vous pouvez laisser les options par défaut, rien ne vous empêchera de revenir plus tard).

5. Une fois Disqus configuré, ouvrez votre hugo.toml et ajoutez :

[services]
  [services.disqus]
    shortname = "monsupersitehugo"

⚠️ Attention si vous suivez un vieux tutoriel : avant Hugo 0.120, on utilisait une simple ligne disqusShortname = "monsupersitehugo" au top-level du fichier de config. Cette syntaxe est dépréciée depuis 0.120 et il faut désormais passer par le bloc [services.disqus] ci-dessus.

6. Intégrez le formulaire de commentaires dans votre template d’articles. Hugo fournit un partial embarqué pour ça. Dans themes/sandbox/layouts/blog/single.html, juste après le contenu :

<div class="content">
    {{ .Content }}
    <h3>Une remarque ou un avis sur cet article ? Discutons-en :</h3>
    {{ partial "disqus.html" . }}
</div>

⚠️ Encore une nuance pour les vieux tutos : vous trouverez souvent l’ancienne syntaxe {{ template "_internal/disqus.html" . }} dans les tutos antérieurs à 2024. Cette syntaxe fonctionne toujours mais a été supplantée par les partials embarqués depuis Hugo 0.146. Préférez {{ partial "disqus.html" . }}.

7. Note : Disqus ne fonctionne pas en local (il appelle son service tiers). Il faut publier le site pour le voir fonctionner.

Une fois la publication effectuée, vous devriez voir ceci s’afficher en bas de vos articles :

Comparatif rapide

Conclusion : ma recommandation

Pour un blog tech ou un site personnel destiné à des développeurs, Giscus est sans hésitation le meilleur choix en 2026 : c’est gratuit, propre, sans tracker, et la modération via GitHub est très confortable.

Pour un blog grand public destiné à des lecteurs non-techniciens, Cusdis est probablement le meilleur compromis : pas d’auth requise, pas de tracker, simple à modérer.

Disqus garde un intérêt si vous voulez le setup le plus rapide possible et que vous n’avez pas de problème avec la pub.

Et pour ceux qui ne veulent pas du tout de commentaires (c’est une option tout à fait défendable !), envisagez de remplacer la zone commentaires par un simple lien vers vos réseaux sociaux ou votre email : “Une réaction ? Envoyez-moi un message à blog@mon-site.fr”. C’est ce que font de plus en plus de blogueurs aujourd’hui, et c’est aussi un excellent choix.

Avec cette partie, vous avez fait le tour d’un blog Hugo complet. Bravo si vous êtes arrivés jusqu’ici, ça représente un sacré chemin parcouru !