Les commentaires avec Utteranc.es

Il me restait à déployer un composant pour que le blog soit complet: il s’agit des commentaires. Comme le site est un site “statique”, la solution nécessite un service extérieur. Le site de Hugo propose différentes des solutions plus ou moins intégrées, plus ou moins complexes. J’ai finalement opté pour Utterances. Je vais vous expliquer brièvement mon choix, et son l’implémentation.

Les commentaires avec Utteranc.es

C’est l’inconvénient des sites statiques: toutes les fonctionnalités nécessitant des échanges clients / serveurs, doivent être réalisées via des services annexes. Ces échanges concernent notamment la page de contact, ainsi que les commentaires.

Pour le formulaire de contact, j’ai utilisé, pour l’instant, une fonctionnalité de l’hébergeur (Netlify), parce que c’est simple et rapide.

Pour les commentaires, c’est un peu plus compliqué.

Le choix de la solution

Le site de Hugo propose une liste de solutions.

Solution “intégrée”

SolutionCommentaire
DisqusSouscription gratuite avec publicité, payante sinon.
L’installation se fait à travers une template Hugo interne.

Solutions “as-a-service”

SolutionCommentaire
Graph CommentSouscriptions gratuite et payante (a partir de 7$ / mois)
MuutSouscription payante à partir de 16$ / mois
UtterancesPas de souscription - Gratuit
CommentoSouscription de 10 $ / mois
Hyvor TalkSouscription à partir de 5$ / mois

Solutions nécessitant un hébergement

SolutionCommentaire
Staticmannode.js
IntenseDebatePHP. API Inspirée de celle de WordPress
TalkyardAuto-hébergement, ou souscription à partir de 2$ / mois
RemarkGolang
IssoPython

Je n’avais pas de cahier des charges très précis. L’idée globale était

  • d’avoir une solution gratuite,
  • de rester simple, autant que possible,
  • d’avoir une solution qui ne nécessite pas de cookies.

Au départ, je pensais utiliser Disqus, mais les essais de récupération des commentaires de mon précédent blog se sont mal passés, et la solution a de plus en plus mauvaise presse dans sa version gratuite, notamment en raison de sa gestion de cookies.

En prenant en compte les trois critères cités précédemment, il ne restait plus trop de candidats. Je me suis donc arrêté sur trois solutions: Utterances, StaticMan, et Graph comment

Les candidats

Graph comment

C’est une solution purement “as-a-service”, avec une souscription gratuite, donc les restrictions ne sont pas trop contraignantes. J’ai assez rapidement éliminé ce candidat :

  • Peu d’accès à la documentation (la seule doc réellement accessible concerne un plugin WordPress)
  • Le dernier article du blog date de 2017,

StaticMan

Contrairement à Graph Comment, la documentation de StaticMan est beaucoup plus exhaustive, et accessible. Il s’agit d’un outil à héberger, qui se place entre le site, et GitHub (le GitHub qui héberge le site). Par contre, le mode de fonctionnement de l’outil pose question :

  • Lors de la soumission d’un commentaire, le contenu du commentaire est envoyé à StaticMan,
  • StaticMan met à jour le contenu du site (sur Github),
  • et génère ensuite un pull request,
  • A partir de là, soit manuellement, soit automatiquement, le site est redéployé avec le nouveau commentaire.

Figure 1 : Fonctionnement de StaticMan (schéma issu du site)
Figure 1 : Fonctionnement de StaticMan (schéma issu du site)

Cela veut dire qu’un déploiement sera effectué à chaque fois que quelqu’un soumettra un commentaire. Ce mode de fonctionnement me semble un peu lourd, mais ne me gênerait pas s’il n’y avait pas un impact possible sur le coût d’hébergement (300 déploiements maximum autorisés par mois pour la version gratuite de Netlify).

Utterances

Le principe de cet outil est un peu similaire au précédent, dans le sens où les commentaires sont stockés dans Github, et que nous avons un outil intermédiaire entre le formulaire, et Github. Mais la ressemblance s’arrête là.

Utterances se présente sous la forme d’une application “Github (que l’on trouve dans le marketplace). Le script utilise les issues de GitHub pour stocker les commentaires. Il crée une issues par article, et les commentaires sont stockés dans les commentaires de ces issues. Donc :

  • Quand un commentaire est posté, l’outil le prend en compte, et utilise l’API de GitHub le stocker,
  • Au moment ou un article est affiché, le script va chercher, toujours via l’API, les commentaires qui correspondent à l’article.

Pas de pull request, ni de déploiement à chaque commentaire. Pas de solution d’hébergement tierce à trouver.

La configuration est assez simple: il faut spécifier le nom du dépôt GitHub qui sera utilisé pour le stockage des commentaires, et indiquer le nom que porteront les issues (soit le titre des articles, soit le chemin, soit un id, …).

La documentation tient sur une page.

Ma sélection

En fonction de mes quelques critères de sélection, et de la lecture rapide de la documentation, mes conclusions sont les suivantes :

OutilCommentaires
Graph CommentEliminé en raison du manque d’accès à la doc, et le manque d’activité sur le site
StaticManLe point d’attention est le mode de gestion des commentaires, qui génère beaucoup de déploiement
UtterancesTrès simple, à priori, mais peut-être un peu “rustique”.

J’ai décidé de démarrer mes tests avec Utterances, et de continuer avec StaticMan si les premiers tests ne sont pas concluants.

Installation de Utterances

J’avoue avoir été un peu dérangé lorsque je suis tombé sur l’unique page de la documentation. Je me suis dit qu’il manquait quelque chose. En fait non. La mise en place de l’outil, sur un site statique, se fait en cinq étapes:

  • Création du dépôt dans Github, et installation de l’application,
  • Configuration du script sur le site https://utteranc.es/
  • Modification de la template single.html,
  • Modification du fichier config.toml,
  • Règlage des notifications dans Github

Création du dépôt

Rien à dire de spécial ici. Le dépôt doit être publique (pour être accessible depuis le script).

Figure 2 : Création du dépôt
Figure 2 : Création du dépôt

Pendant que nous nous trouvons sur Github, profitons-en pour installer l’application Utterances. Il faut pour cela, utiliser le MarketPlace

Figure 3 : Installation de l’application Utterances sur Github
Figure 3 : Installation de l’application Utterances sur Github

Modification de la template single.html

L’objectif de cette modification, est d’ajouter le script Utterances dans la template chargée « de formatter » les articles. Commençons par utiliser la page https://utteranc.es/, pour configurer le script, et pour récupérer le script :

Figure 4 : Configuration du script
Figure 4 : Configuration du script

il ne reste plus qu’à copier/coller le script dans le fichier single.html. La placement de ce code dépend du thème. Il faut le placer tout en bas de la page, juste avant la partie “footer / pied de page”.

... ...
<script src="https://utteranc.es/client.js"
        repo="egeorjon/EG-Blog-Comments"
        issue-term="url"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
... ...

Pour rendre les choses un peu plus configurables, j’ai un peu modifié le code de la façon suivante :

{{- if .Site.Params.utteranc_repo | default false -}}
<script src="https://utteranc.es/client.js"
        repo        ="{{- .Site.Params.utteranc_repo -}}"
        issue-term  ="{{- .Site.Params.utteranc_term | default "path" -}}"
        theme       ="{{- .Site.Params.utteranc_theme | default "github-light" -}}"
        crossorigin ="anonymous"
        async>
</script>
{{- end -}}

Modification du fichier config.toml

L’idée est de placer dans ce fichier, les 3 paramètes utilisés précédemment :

[Params]
    utteranc_repo   = "egeorjon/EG-Blog-Comments"
    utteranc_term   = "title"
    utteranc_theme  = "github-light"

Premier tests

La figure 5 montre ce que donne l’affichage :

Figure 5 : Affichage des commentaires dans la partie basse des articles
Figure 5 : Affichage des commentaires dans la partie basse des articles

Utterances enregistre le commentaire, en tant que commentaire d’une issue qui porte le nom de l’article (dans mon cas)

Figure 7 : Les issues dans Github
Figure 7 : Les issues dans Github

Figure 8 : Les commentaires dans Github
Figure 8 : Les commentaires dans Github

Premiers feedbacks:

  • L’installation prend quelques minutes seulement,
  • Nous bénéficions des fonctionnalités de Github (notamment l’anti-spam),
  • Mais il faut disposer d’un compte Github pour pouvoir déposer un commentaire (cela pourrait repousser certains utilisateurs),
  • La modération des commentaires se fait à postériori (une fois que le commentaire est publié),
  • La gestion des commentaires se fait dans Github directement,
  • L’ergonomie est un peu limitée (pour voir l’ensemble des dernières commentaires, différencier ceux qui sont lus, de ce qui ne le sont pas, …).

Configuration de Github

Vous pouvez optionnellement effectuer quelques réglages complémentaires dans Github, notamment pour les notifications.

Conclusion

L’installation de Utterances c’est tellement bien passée, que j’ai décidé de conserver le produit, et de ne pas tester StaticMan.

Malgré certains défauts, Utterances a deux avantages principaux: il s’installe en 5 minutes, il ne demande pas d’outils supplémentaires. Ces deux arguments contre balancent largement les quelques défauts du produit.

Utterances est un peu “frustre” d’un point de vue ergonomique, mais cela reste acceptable. Personnellement, je pense que le sript gagnerait à être un peu plus configurable, et paramétrable, pour qu’il gagne encore en popularité.

Commentaires