Pourquoi et comment je me suis débarrassé de Disqus

Dernièrement, j'ai fait quelques changements sur ce blog, discrètement. L'un des principaux changements est la gestion des commentaires, au revoir Disqus, bonjour Commento. Je vais vous expliquer pourquoi...

Un peu d'histoire de ce blog

Au commencement (je parle de février 2019, pas de temps anciens) de ce blog, mon but était assez simpliste : je voulais partager mes connaissances, ma vision sur certains sujets et parler d'anecdotes en tous genres. Un an et demi et une quarantaine de posts plus tard, objectif atteint!

Pour ça, j'ai réfléchi longuement à la solution la plus adaptée, je ne voulais pas développer moi-même la solution, bien qu'ayant pas mal d'expérience en PHP, car cela nécessitait de maintenir le tout, de mettre à jour le code etc... ce qui n'était pas dans mes objectifs, ayant moins de temps disponible que dans ma jeunesse. Après avoir hésité entre Hugo et Ghost, je suis allé finalement vers le second qui répondait plus aux critères que je m'étais fixé.

Puis, je me suis dit que ça serait cool d'avoir la possibilité pour les gens de laisser des commentaires sur mes posts, cela permettait d'apporter la notion "débat" que j'aime beaucoup. J'ai donc étudié les solutions "clés en main" à disposition, car une fois de plus, je ne souhaitais pas investir du temps dessus, car je ne savais même pas si mes articles seraient seulement lus!

Après avoir hésité entre le module de Facebook et celui de Disqus, j'ai finalement mis Disqus, qui était légèrement moins intrusif que Facebook (et accessoirement, je trouve le module de commentaires de Facebook moche).

Pourquoi Disqus me gêne

Certains le savent, je fais partie de ces gens qui militent pour un Internet plus sain, que ce soit pour les utilisateurs ou les hébergeurs. Je veux un Internet où chacune de mes actions n'est pas espionnée et mise à disposition de nos amis les GAFAM (qui ont largement assez d'infos sur moi).

Après m'être débarrassé de Google Analytics il y a six mois en implémentant mon propre dashboard qui répondait à mes besoins, j'ai décidé de me pencher sur Disqus, dernière brique de mon site faisant du tracking.

Disqus trace énormément d'action utilisateurs, même quand vous ne mettez pas de commentaires. De plus, pour les personnes qui commentent, cela lui construit une base de données assez importante et permet de tracer votre usage et d'en faire des statistiques, pouvant ensuite être revendue sans vergogne.

De plus, Disqus signifie que j'ai une adhérence avec un hébergeur externe, et avec du code que je ne maîtrise pas. Qui me dit que le code qui fonctionne sur Disqus n'a pas un backdoor suite à une mise à jour qui a eu lieu par exemple.

Accessoirement, cela veut aussi dire que Disqus a les stats d'utilisation de mon site, que je ne souhaite pas vraiment leur donner.

Reprendre la main sur mes données

Vous l'aurez compris, après Google Analytics, il était temps pour moi de me débarrasser de mon second boulet, Disqus.

Je voulais une solution que je pouvais manager et simple à intégrer à mon site.

J'ai donc étudié les alternatives à ma disposition, et en short list j'avais donc :

• Commento.io : Une solution exploitant un backend en Go qui utilise une base de données PostGres
• Isso : Une solution en Python utilisant une base de données SQLite

J'ai finalement retenu Commento, car il existe une image docker officielle, maintenue par la communauté. L'avantage étant donc que je déploie la solution et que les données sont stockées sur mon serveur et ne sont jamais partagées ou récupérées par d'autres éditeurs. Ainsi, je montre aussi à mes lecteurs que je respecte leur vie privée!

Je vais donc vous détailler comment j'ai installé Commento sur Kubernetes, mais aussi les limites que je vois aujourd'hui sur le produit, en comparaison de Disqus. Je vous mettrais aussi la configuration associée pour Traefik 2.

Deployer Commento et PostGres

En prérequis, j'ai créé un répertoire /home/kube/commento/storage qui me servira simplement de stockage stateful pour mon serveur PostGres, en effet, je voudrais éviter de perdre l'ensemble de mes données si mon pod venait à être recréé, ou en cas de montée de version.

Ensuite, j'ai appliqué le deployment suivant (oui, il faut que je mette à jour mon serveur K8S, donc attention aux API qui ont légèrement bougé) :

apiVersion: apps/v1
kind: Deployment
metadata:
  name: commento
  labels:
    app: commento
spec:
  replicas: 1
  selector:
    matchLabels:
      app: commento
  template:
    metadata:
      labels:
        app: commento
    spec:
      containers:
      - name: commento
        image: registry.gitlab.com/commento/commento:v1.8.0
        imagePullPolicy: Always
        ports:
        - containerPort: 8080
        env:
        - name: COMMENTO_ORIGIN
          value: "https://commento.tferdinand.net"
        - name: COMMENTO_PORT
          value: "8080"
        - name: COMMENTO_POSTGRE
          value: "postgres://postgres:MYPASSWORD@localhost:5432/commento?sslmode=disable"
        - name: COMMENTO_FORBID_NEW_OWNERS
          value: "false"
        - name: COMMENTO_SMTP_HOST
          value: "smtp.gmail.com"
        - name: COMMENTO_SMTP_PORT
          value: "587"
        - name: COMMENTO_SMTP_USERNAME
          value: "[email protected]"
        - name: COMMENTO_SMTP_PASSWORD
          value: "MYPASSWORD"
        - name: COMMENTO_SMTP_FROM_ADDRESS
          value: "[email protected]"
        - name: COMMENTO_AKISMET_KEY
          value: "MYKEY"
      - name: postgres
        volumeMounts:
        - name : postgres-storage
          mountPath: /var/lib/postgresql/data
        image: postgres:9.6.18-alpine
        imagePullPolicy: Always
        ports:
        - containerPort: 5432
        env:
        - name: POSTGRES_PASSWORD
          value: MYPASSWORD
        - name: POSTGRES_DB
          value: commento
        resources:
          limits:
            cpu: "0.2"
            memory: "512Mi"
      volumes:
      - name: postgres-storage
        hostPath:
          path: /home/kube/commento/content/
          type: Directory

Dans ce déploiement, vous pouvez voir qu'il y a un pod contenant 2 containers : Commento (lignes 18 à 43) et PostGres (lignes 44 à 60) ainsi que le volume que j'ai mentionné plus tôt.

Concernant le déploiement de commento :

• Vous pouvez voir que je pars directement de l'image officielle, disponible sur GitLab
• Je bind le port 8080 (port par défaut de l'application)
• Je lui indique la "base URL", pour moi https://commento.tferdinand.net
• Je lui indique sa chaine de connexion à la base de données, qui tourne en localhost, que nous sommes dans un pod
• Je lui indique que la création de nouveaux utilisateurs sur le back office est autorisée, chose que je changerais après avoir créer mon utilisateur "admin"
• Je configure le nécessaire pour les envois de mails (important : voir encadré ci dessous)
• Je renseigne la clé API créée pour le service Akismet, qui sert pour l'antispam.

Pour le déploiement de postgres, on est sur quelque chose de classique:

• Je renseigne le mot de passe de base
• J'indique à postgres de créer une base "commento" lors de son premier démarrage
• Je monte le volume que j'ai créé pour avoir un stockage persistant

A partir de là, vous pouvez lancer votre déploiement Kubernetes.

Pas d'inquiétude, si vous voyez des erreurs de connexion à la base de données au démarrage, c'est normal, notre pod va démarrer la base de données et l'application au même moment, l'application essayant de se connecter avant que la base soit prête, des erreurs apparaissent.

Néanmoins, Commento faisant des retry, il arrivera à se connecter à la base de données dès qu'elle sera prête.

Configurer Traefik 2

Maintenant que notre application est prête, nous allons configurer Traefik pour diriger le record DNS https://commento.tferdinand.net vers l'application.

Je vais donc créer :

• Un service, qui va me permettre d'exposer le container commento de mon pod
• Un IngressRoute, qui va me permettre de configurer Traefik 2 pour router mon trafic vers le service (en http + https)

kind: Service
apiVersion: v1
metadata:
  labels:
    app: commento
  name: commento
spec:
  type: ClusterIP
  ports:
  - port: 8080
    name: http
  selector:
    app: commento
---
apiVersion: traefik.containo.us/v1alpha1
kind: IngressRoute
metadata:
  name: commento-tls
  namespace: default
spec:
  entryPoints:
    - websecure
  routes:
  - kind: Rule
    match: Host(`commento.tferdinand.net`)
    services:
    - name: commento
      port: 8080
    middlewares:
      - name: security
  tls:
    certResolver: le
    options:
      name: mytlsoption
      namespace: default
---
apiVersion: traefik.containo.us/v1alpha1
kind: IngressRoute
metadata:
  name: commento
  namespace: default
spec:
  entryPoints:
    - web
  routes:
  - kind: Rule
    match: Host(`commento.tferdinand.net`)
    services:
    - name: commento
      port: 8080
    middlewares:
      - name: security
      - name: redirectscheme

De plus, j'ai indiqué à Traefik d'utiliser le modèle de sécurité que j'avais déjà décrit dans un de mes anciens articles.

Une fois cette configuration déployée, j'ai maintenant accès au backoffice.

Configuration de Commento

Je peux maintenant créer un compte en cliquant sur "Don't have an account yet? Sign up."

Une fois le compte créé, je vais retourner dans mon déploiement commento, et changer la variable "COMMENTO_FORBID_NEW_OWNERS" à "true". Cela empêchera la création de nouveaux comptes, puis je redéploie.

Ensuite, je peux aller sur le backoffice avec mon compte nouvellement créé et cliqué sur "New domain" à gauche.

Je donne un nom à mon site (qui sert uniquement pour l'affichage dans le backoffice), puis j'indique le domaine du site web.

Maintenant, je clique sur le site que je viens de créer à gauche, puis "Installation Guide", qui m'indique que j'ai juste un petit bout de code à copier!

Intégration à Ghost

Maintenant, je peux intégrer ce code à Ghost, en fonction du thème utilisé cela peut être plus ou moins facile.

Néanmoins, la démarche globale reste la même.

Depuis le backoffice, cliquez sur "Design" puis sélectionnez téléchargez le thème actuellement actif.

Ensuite, dézippez le contenu, puis insérez le code indiqué dans le backoffice.

Puis, recompressez le contenu, et renvoyez le vers le backoffice.

A noter que vous pouvez aussi automatiser le packaging et l'envoi vers le back office avec un gestionnaire de version, comme je l'avais décrit dans un de mes post (ce qui est la solution que j'utilise, d'où les hash dans les noms de mes thèmes).

Si comme moi, vous avez des soucis de transparence, il est possible d'imbriquer le "div" de commento dans un autre, portant un fond coloré.

Il est aussi possible de surcharger le fichier css de base par un autre, mais je trouvais cette démarche clairement trop lourde par rapport à mon besoin.

Vous avez maintenant les commentaires qui sont disponibles sur vos articles!

Si vous voulez aller plus loin, continuons un peu...

Bonus - Ajouter le compteur de commentaires

Pour ceux qui souhaitent, comme moi, ajouter le compteur de commentaires, c'est tout à fait possible, et assez simple.

Tout d'abord, il faut ajouter le téléchargement du script "count.js" dans les headers de votre site.

Ensuite, il suffit de mettre un lien vers la page dont vous voulez le nombre de commentaire avec l'ancre "#commento" (il est possible de mettre des liens relatifs), par exemple pour mon dernier article sur Twitter, cela donne :

ou en version templating Ghost :

Ce qui me permet de faire ce genre de chose, en bas à droite :

A noter qu'il y a actuellement un bug dans le comptage des commentaires qui fait que les commentaires supprimés sont comptabilisés, une issue est ouverte à ce propos.

Bonus - Importer les commentaires de Disqus

Il est aussi possible d'importer les commentaires depuis Disqus, pour cela, rendez vous sur le backoffice de Disqus, selectionnez "Export" depuis la catégorie "Community", puis cliquez sur "Export Comments".

L'export prend de quelques minutes à quelques heures, même si vous avez peu de commentaires.

Une fois l'export terminé, vous recevrez un mail avec votre archive :

Il vous suffit ensuite de l'importer depuis le back office de Commento, depuis le menu "Import comment" de votre site :

Conclusion : Disqus VS Commento : mon avis

Commento est une bonne solution pour intégrer des commentaires de manière éthique sur votre site web, néanmoins, de mon point de vue, il ne s'agit pas d'un produit de niveau professionnel comme peu l'être Disqus.

Pourquoi ? Tout simplement car ce projet a actuellement une petite communauté et que Disqus est un mastodonte à côté.

Pour pouvoir proposer quelque chose de similaire, il faudrait, de mon point de vue, ajouter les fonctionnalités suivantes :

• Un back office plus complet, permettant de modérer directement les commentaires
• Une personnalisation plus simple que devoir surcharger entièrement un CSS (qui n'est pas documenté de plus est)
• Une configuration qui ne passe pas que par des variables d'environnement ou des fichiers de configuration, nous avons une base de données!

Comme je l'ai dit, je suis conscient qu'il s'agit d'un petit projet open source, toutefois, si comme moi, vous voulez le voir grandir, n'hésitez pas à contribuer :

• Parlez-en!
• Vous savez développer en Go, contribuez au code!

Et la prochaine fois que vous voulez intégrer de nouveaux services à votre site, posez-vous la question : Est-ce que ces services ont un comportement éthique vis-à-vis de mes lecteurs / utilisateurs / clients ?

Faire preuve d'éthique envers eux, c'est aussi une marque de respect!

Et vous, qu'en pensez-vous ?