Je souhaitais mettre en place un système de commentaires sur le blog depuis quelques temps afin de permettre à tous de réagir aux articles. Voila maintenant qui est chose faite avec l'ajout de Commento.io. Mais pourquoi avoir choisi cette solution ?!

Pourquoi choisir Commento.io ?

Il existe diverses solutions pour intégrer plus ou moins facilement des commentaires à votre site :

  • Disqus ( sûrement le plus connu ),
  • Discourse,
  • Isso,
  • Utteranc,
  • Coral ...

Sans rentrer dans le détail technique, la plupart de ces solutions fonctionnent d'une façon similaire : un service auto-hébergé - ou managé - pour gérer les commentaires, et un code javascript à ajouter sur votre site afin d'appeler ce service.

Mais il faut faire un choix !

Le critère pour réaliser ce choix peut se résumer - de mon côté - en 2 points plutôt simple :

  • Respect de la vie privée :
C'est un point important pour moi et il n'est pas question de passer au travers ! Même si actuellement j'utilise encore mon tag Google Analytics ( C'est bientôt fini ! ), je souhaite offrir une expérience de navigation avec un maximum de respect pour la vie privée. Ce détail exclut d'office l'utilisation de Disqus.
  • Pouvoir dockerizer l'installation ... :

On peut installer quelque chose en dehors d'un conteneur ? 😂

Bien évidemment, même si un de ces outils ne proposent pas d'image Docker, je pourrai réaliser cette image moi-même. Mais souhaitant faciliter la maintenance, il est plus simple que celle-ci soit existante et maintenue !

J'ai longtemps hésité entre Isso et Commento, mais ce dernier point a fait pencher la balance d'un côté.

Pour résumer Commento c'est :

  • Le support des commentaires anonymes,
  • Léger et simple ( peu d'impact sur le chargement du site ),
  • La possibilité d'importer les commentaires de Disqus mais aussi de Commento lui même,
  • Il est donc possible d'exporter les commentaires au format json,
  • Auto-hébergé ou managé,
  • Un système anti-spam avec Akismet,
  • Le support de login via une tierce partie ( comme Twitter ).

Voyons donc comment lancer une instance Commento.io avec Docker !

Installation

Si vous souhaitez avoir le support anti-spam d'Akismet, il sera nécessaire de vous inscrire sur le site et d'obtenir une clé API :

https://akismet.com/
akismet api key

Je vais utiliser docker-compose pour réaliser cette mise en place à l'aide d'un fichier docker-compose.yaml. La version officielle est très bien fournie :

https://docs.commento.io/installation/self-hosting/on-your-server/docker.html

Et je n'ai pas grand chose à ajouter, je vais juste modifier le fichier pour correspondre à mon environnement : Utilisation de Traefik en reverse-proxy.

Mon fichier docker-compose.yaml:

version: '3.7'
services:
  server:
    image: registry.gitlab.com/commento/commento
    environment:
      COMMENTO_ORIGIN: https://commento.mydomain.com
      COMMENTO_PORT: 8080
      COMMENTO_POSTGRES: postgres://postgres:postgres@db:5432/commento?sslmode=disable
      # COMMENTO_FORBID_NEW_OWNERS: 'true'
      COMMENTO_AKISMET_KEY: 'mykey'
      COMMENTO_SMTP_HOST: smtp.mydomain.com
      COMMENTO_SMTP_PORT: 587
      COMMENTO_SMTP_USERNAME: 'myusername'
      COMMENTO_SMTP_PASSWORD: 'mypass'
      COMMENTO_SMTP_FROM_ADDRESS: 'email@foo.bar'
    labels:
      - "traefik.enable=true"
      - "traefik.http.services.commento.loadbalancer.server.port=8080"
      - "traefik.http.routers.commento.rule=Host(`commento.mydomain.com`)"
      - "traefik.http.routers.commento.entrypoints=websecure"
    depends_on:
      - db
    networks:
      - db_network
      - traefik

  db:
    image: postgres
    environment:
      POSTGRES_DB: commento
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    networks:
      - db_network
    volumes:
      - postgres_data_volume:/var/lib/postgresql/data

networks:
  db_network:
  traefik:
    external: true

volumes:
  postgres_data_volume:

Vous pourrez l'adapter à vos besoins ou à une utilisation d'Apache/Nginx  ou un accès direct à l'application par exemple.

🚩 Un gros défaut dans cet exemple, les mots de passes dans le fichier. Si je trouve une meilleure solution pour la gestion des accès, je modifierai l'article en conséquence 🚩

Lancez votre stack avec :

docker-compose up -d

Et créez votre compte sur l'application :

commento signup

Une fois terminée, je vous conseille immédiatement de retirer le commentaire de la ligne suivante du fichier docker-compose.yaml :

COMMENTO_FORBID_NEW_OWNERS:

Celle-ci empêche la création de nouveau compte Administrateur sur l'application. Une fois votre première inscription réalisée, retirer le commentaire de cette ligne afin que personne d'autres ne puissent créer de compte modérateur :

Used to disable new dashboard registrations. Useful if you are the only person using Commento on your server. Does not impact the creation of accounts for your readers. Defaults to false.

Et relancez la stack :

docker-compose down && docker-compose up -d

Enfin créer votre site dans l'application :

Une fois votre site créé, dans le menu Installation Guide, vous allez obtenir le code à ajouter pour votre site :

<div id="commento"></div>
<script defer
  src="http://commento.example.com/js/commento.js">
</script>

Il ne reste alors qu'à intégrer ce code à votre blog.

Réalisons un petit exemple avec l'intégration dans Ghost.

Intégration sur Ghost

Vous pouvez récupérer le zip de votre thème dans l'interface d'administration de Ghost.

Une fois en votre possession et décompressé sur votre poste, installez les packages nécessaires dans le dossier de votre thème :

$ yarn install

Enfin lancez la commande :

$ yarn dev

Éditez le fichier post.hbs et trouvez le commentaire avec la section post-full-comments pour y ajouter votre code :

<section class="post-full-comments">
	<script defer src="https://commento.mydomain.com/js/commento.js"></script>
	<div id="commento"></div>
</section>

Sauvegardez votre fichier, quittez le mode développement et préparer votre fichier zip :

$ yarn build

Il ne reste plus qu'à remettre le thème via votre panel d'administration de Ghost !

Vous devriez maintenant avoir accès aux commentaires dans vos articles !

Voila, vous pouvez maintenant mettre en place un système de commentaires respectueux de la vie privée sur votre blog !

Nous avons une nouvelle fois utilisée Docker et Traefik afin de rendre cette mise en œuvre simple et rapide !

Pour la partie concernant Ghost et la modification du thème, vous pouvez consulter mon article sur la création d'un environnement de développement de thème :

Ghost & Docker : Mon environnement de développement !
Besoin de customiser votre thème Ghost et vous ne trouvez pas le moyen de mettre en œuvre un environnement de développement qui vous convienne ? J’essaye de vous donner quelques pistes pour réaliser ça !
Loïc FACHELa Grotte du Barbu

Voila n'hésitez pas à utiliser le système de commentaires 🙂

En tout cas  n'hésitez pas à m'apporter des remarques ou des commentaires sur Twitter  ou maintenant sur les commentaires juste en bas de ce post ! C'est toujours un plaisir d'avoir des retours ! 😇