Solid Comments In Static Website

Résumé : J'ai ajouté des commentaires à mon site web statique. Voici comment je l'ai fait - y compris quelques détails techniques. J'ai recherché parmi différentes solutions possibles pour trouver la plus solide, je l'ai intégrée pour tous les articles et j'ai ajouté un compteur du nombre de commentaires dans la page de vue d'ensemble des articles.

Mise à jour du 2025-05-23 Depuis que je suis passé de Jekyll à Pelican, j'ai mis à jour certains détails.

Choisir une solution

Comme je prévoyais de m'amuser avec le nouveau Deep Research Model d'OpenAI, je l'ai testé sur ce sujet : n'hésitez pas à lire ici. Globalement, la recherche a été utile et j'ai fini par utiliser Giscus pour les commentaires. En partie parce qu'il semblait le plus robuste et fiable, en partie parce que j'avais eu une très mauvaise expérience avec Disqus il y a quelques années.

Le choix était basé sur l'ensemble de critères que j'avais donné au modèle. Voici les plus importants :

• Pas de serveur auto-hébergé – Je ne veux pas gérer (et payer 😉) un serveur.
• Portabilité des données – les commentaires peuvent être exportés.
• Respect de la vie privée – pas de traqueurs ou de publicités supplémentaires au-delà de ce que j'utilise déjà (par exemple, Google Analytics).
• Support Markdown – permet un formatage riche (blocs de code, etc.) adapté aux discussions techniques.
• Protection contre le spam – dispose de mesures pour réduire le spam, surtout si l'on autorise les commentaires anonymes ou non authentifiés.

Les outils que Deep Research a analysés étaient :

• Giscus
• Utterances
• Staticman
• Commento
• Hyvor Talk
• Disqus
• Certaines solutions faites maison

Intégration de Giscus

Suite à sa recherche, j'ai demandé au modèle de me donner un guide pas à pas sur la façon d'intégrer la solution. Cela s'est avéré beaucoup moins fiable que la première recherche, mais tout de même utile.

Voici le résumé exécutif (les détails sont dans le chat que j'ai eu avec l'IA) :

• Étape 1 : Activer GitHub Discussions pour votre dépôt. Cela signifie le dépôt dans lequel le site statique est généré (qui parfois n'est pas le même que la source).
• Allez sur votre dépôt GitHub
• Naviguez vers Paramètres > Général.
• Faites défiler jusqu'à la section Discussions et activez-la.
• Étape intermédiaire, que l'IA a oublié de mentionner : Installez giscus pour tous ou certains de vos dépôts. Ici
• Étape 2 : Installer Giscus et le configurer
• Visitez la page de configuration de Giscus : https://giscus.app/.
• Sous "Repository", entrez le nom de votre dépôt. Vous devriez maintenant voir la coche verte indiquant que votre dépôt répond à tous les critères pour utiliser giscus.
• L'option “Page discussion mapping” dicte une relation entre vos pages, par exemple un article, et une discussion GitHub. J'ai sélectionné le chemin.
• Pour la catégorie de discussions, j'ai sélectionné “général”. Définissez le Thème sur "Match OS" ou définissez manuellement le mode clair et sombre. Cliquez sur "Copier le code" une fois que vous avez généré la balise