Ça y est! Après maintenant 2 ans d’acharnement, j’ai enfin un système de commentaires fonctionnel et cool sur mon site! Pourquoi fut-ce si long? Eh bien pour deux raisons, la première c’est que je maintiens de site web avec le CMS Jekyll, qui permet de faire des sites uniquement statiques. L’avantage c’est que c’est très simple à mettre en place et à développer (je m’embête pas avec des bases de données ou du PHP pour avoir du back-end). L’inconvénient, c’est que je peux difficilement profiter des avantages d’un site dynamique, et notamment les commentaires. Mais ça c’était avant qu’on me parle de Staticman

Lorsque j’ai posé la question sur le chat IRC de jekyll pour savoir par quel moyen je pouvais faire marcher les commentaires sur mon site, tout de suite après on m’a redirigé vers le site de Staticman. L’idée de cet outil est d’apporter des possibilités de traitement de données sur des sites statique. Le site donne des exemples comme les commentaires, les reviews, ou les votes. En plus il est fait pour fonctionner avec un dépôt Github.

En lisant la description détaillée sur le site et sur le dépôt Github du projet, on en apprend un peu plus sur son fonctionnement, par exemple pour un commentaire:

• Un utilisateur va vouloir rédiger un commentaire sur un site X, et cliquer sur “Envoyer”
• Le formulaire envoie une requête au serveur NodeJS de Staticman, qui va recevoir la donnée, la traiter selon le fichier de configuration que vous écrivez sur le dépôt de votre site, et vous envoyer le contenu formaté sous forme de Pull Request sur votre dépôt pour ajouter un fichier dans le dossier _data/ de Jekyll
• Vous acceptez la merge request, et il ne vous reste plus qu’à build votre site jekyll et à l’envoyer sur votre serveur pour voir votre joli commentaire.

Le fonctionnement de Staticman est vraiment aussi simple que ça. Le site explique comment faire pour l’intégrer à son site. J’ai eu toutefois des petites difficultés notamment sur le fichier de configuration. Je vais donc vous poster ici le contenu de mon fichier et de mon template pour que vous voyiez comment ça marche en pratique:

comments:
  allowedFields: ["name", "email", "url", "message", "post_id"]
  allowedOrigins: ["ilphrin.com"]
  branch: "master"
  filename: "{fields.name}_{@timestamp}"
  format: "yml"
  generatedFields:
    date:
      type: date
      options:
        format: "timestamp-seconds"
  moderation: true
  name: "ilphrin.com"
  path: "_data/comments/"
  requiredFields: ["name", "email", "message", "post_id"]
  commitMessage: "New comment on the blog"

Il n’y a pas grand-chose à dire sur ce fichier-là il parle de lui-même à mon avis. Vous devez placer ce fichier à la racine de votre dépôt pour que Staticman le lise correctement. Voici ensuite la partie de la page HTML pour les formulaires sur mon site:

   id="commentform" method="POST" action="https://api.staticman.net/v2/entry/Ilphrin/ilphrin.com/master/comments">
     name="options[slug]" type="hidden" value="avoir-des-commentaires-dans-jekyll-avec-staticman">
     name="options[redirect]" type="hidden" value="https://ilphrin.com/planet/2016/12/16/avoir-des-commentaires-dans-jekyll-avec-staticman.html">
     name="options[origin]" type="hidden" value="https://ilphrin.com" />
     type="hidden" name="fields[post_id]" value="/planet/2016/12/16/avoir-des-commentaires-dans-jekyll-avec-staticman" />
     id="form_info">
       id="title_form">
        
Nom:
        
E-mail:
        
Site Web: