Webflow
18
August
2022

Ajouter un système de commentaire gratuit et open source sur son blog Webflow

Cusdis, système de commentaire

Lorsque l'on veut mettre en place une section commentaire sur un blog Webflow, on peut avoir envie de se tourner vers Disqus. Disqus est aujourd'hui l'une des solutions les plus utilisées du marché avec 50 millions de commentaires gérés tous les mois.

En faisant une rapide recherche pour trouver des alternatives gratuites ou sans publicité, je suis tombé sur ce repo Github Cusdis

Cusdis, système de commentaire

Ce système de commentaire open source (GNU GPLv3) à héberger soi-même est développé par Randy (djyde). Il est encore assez jeune mais sa petite taille (~5kb gzippé), le fait qu’il n’utilise pas de cookies et sa gratuité, m’ont poussés à l’essayer.

Cusdis administration

Voici le pas à pas pour que vous puissiez l'utilisez vous aussi.

Déploiement avec Railway

En vous rendant sur le repo vous trouverez un bouton Deploy On Railway.

Deploy on Railway

Railway.app est une solution d’hébergement dans le Cloud PaaS - Platform-as-a-service -  qui permet de nous affranchir des considérations techniques liées à l’hébergement. C’est super simple d’utilisation, vous allez voir :) 

En cliquant sur ce lien vous serez redirigé sur Railway et vous devez vous identifier avec un compte GitHub, si vous n’en n’avez pas, créez votre compte Github. Github est un site de partage de code source qui permet, entre autres, de collaborer et de versionner son code source.

Railway va créer un nouveau repo sur votre compte Github et va y cloner le repo de Cusdis.

À chaque fois que vous pousserez une nouvelle version du code source sur le repo (par exemple pour faire une mise à jour), Railway déploiera automatiquement une nouvelle version de l’application.

Les variables d'environnement

Vous pourrez aussi définir les variables d’environnement pour que l’application soit tout de suite fonctionnelle. Les variables d’environnement permettent d’avoir un code source qui ne contient pas de mot de passe ou de variables relatives à un environnement afin de sécuriser et de cloisonner ses différentes instances (développement, staging, prod).

Quelques explications sur ces variables :

NEXTAUTH_URL : ${{ RAILWAY_STATIC_URL }}

C’est l’url d’authentification à votre application. Comme nous pouvons ajouter des domaines ou des sous-domaines sur Railway, je vous recommande de laisser la variable proposée par défaut. Nous reviendrons sur la gestion des domaines par la suite.

DB_TYPE : pgsql

Le type de base de données utilisé. Cette base de données sera créée et lié à votre projet via Railway.
À ne pas éditer.

DB_URL : ${{ DATABASE_URL }}

À ne pas éditer.

USERNAME : A DÉFINIR

Indiquez le nom d’utilisateur que vous souhaitez utiliser pour vous connecter sur votre application Cusdis.

PASSWORD : A DÉFINIR

Indiquez le mot de passe que vous souhaitez utiliser pour vous connecter sur votre application Cusdis.

HOST : https://${{ RAILWAY_STATIC_URL }}

C’est l’url de votre application. Comme NEXTAUTH_URL, je vous recommande de laisser la variable proposée par défaut.

JWT_SECRET : A DÉFINIR

Il faut définir un jeton secret qui permettra de sécuriser les communications avec l’application. Vous pouvez utiliser le site du Gibson Reasearch Corporation pour générer un token de 64 caractères soit 256 bits.

PORT : 3000

Le port pour accéder à l’application.
À ne pas éditer.

Et c'est tout. Une fois ces actions effectuées, Railway deploiera l'application et vous pourrez ta tester.

Optionnel : Vous pourrez configurer un sous-domaine pour rendre l'url plus personnalisée.

Intégrer Cusdis sur son site Webflow

Sur la page de template de votre blog, ajoutez un composant HTML embed et ajoutez le bout de code que vous trouverez sur votre instance cusdis.

trois variables pourront être enrichies :

  • data-page-id : Ici je récupère l'ID de l'article (via un scenario make.com), mais ça peut-être le slug ou autre id unique
  • date-page-url : L'url d'accès à l'article
  • data-page-title : Le titre de l'article

Commentaires

Tag(s) lié(s)

Je veux lire d'autres articles

Utilisation de cookies

Nous utilisons des cookies afin de mesurer notre audience et optimiser notre expérience sur notre site.
En savoir plus sur notre politique de confidentialité.