Article original : Brilliant Add-on For Static Sites That Will Make You Dance

Par Jared Wolff

Cet article provient à l'origine de www.jaredwolff.com

Vie privée.

Performance.

Apparence géniale.

Pouvez-vous avoir les trois ?

(Bien sûr !)

Avoir un blog généré statiquement est génial. De nombreuses personnes utilisent des services comme Disqus et Google Analytics pour les améliorer encore. Pas surprenant si vous en faisiez partie ! Les préoccupations concernant la vie privée sont au premier plan de l'attention de tous. Alors, plutôt que de maintenir le statu quo, il est temps de faire quelque chose à ce sujet !

Si vous cherchez à protéger la vie privée des visiteurs de votre site et à améliorer les performances, cet article est fait pour vous.

Dans cet article, nous utiliserons le droplet Docker de DigitalOcean. Il vous permet d'héberger plusieurs applications/services différents sur une seule machine (virtuelle). À la fin, vous saurez comment exécuter votre propre serveur de commentaires en utilisant Commento. De plus, je partagerai quelques astuces que j'ai apprises en cours de route pour vous faciliter la tâche.

C'est parti !

Proxy Inverse

L'un des aspects les plus importants de cette installation est le proxy inverse. Un proxy inverse agit comme un routeur. Les requêtes arrivent pour un certain domaine. Cette requête est ensuite routée vers le service associé à ce domaine.

Voici un diagramme de la documentation Nginx Reverse Proxy + Let's Encrypt Helper. Il aidera à illustrer l'idée.

Nginx Reverse Proxy avec Let's Encrypt

Un autre avantage est qu'il y a une couche supplémentaire de protection contre le monde extérieur. Vos sites web fonctionnent dans un réseau privé et le seul accès se fait via le proxy inverse Nginx. Pointez votre DNS vers le serveur et Nginx gère toute la magie.

Voici comment le configurer :

  1. Allez-y et configurez votre Digital Ocean Droplet. Toutes les informations dont vous avez besoin sont ici. La version à 5 $ est plus que suffisante.

  2. Allez ici pour cloner le dépôt. Vous pouvez également exécuter cela dans votre terminal. Assurez-vous de vous connecter en SSH à votre droplet Digital Ocean d'abord !

    git clone git@github.com:evertramos/docker-compose-letsencrypt-nginx-proxy-companion.git

  3. Changez de répertoire pour le dépôt cloné.

  4. Copiez .env.sample en .env et mettez à jour les valeurs à l'intérieur. J'ai dû changer la valeur IP par l'IP de mon Digital Ocean Droplet. J'ai laissé toutes les autres telles quelles.
  5. Exécutez docker-compose up -d pour tout démarrer. (vous pouvez exécuter sans l'option -d pour vous assurer que tout démarre correctement. Ou vous pouvez attacher la sortie du journal en utilisant docker container logs -f <container name

Lorsque vous pointez vos sous-domaines vers ce serveur, assurez-vous d'utiliser un enregistrement A. Voici un exemple du mien :

Configuration de l'enregistrement A NS1

Selon votre fournisseur DNS, vous devrez déterminer comment configurer un enregistrement A. Cela dépasse le cadre de cet article !

Configuration de Commento avec Docker Compose

Logo Commento avec Logo Docker

Voici le fichier docker compose actuel que j'utilise pour Commento. Il inclut quelques variables d'environnement supplémentaires pour configurer Github, Gitlab et Google. Il inclut également les variables d'environnement pour définir les paramètres SMTP. Ces paramètres sont importants. Sinon, vous ne pouvez pas recevoir d'e-mails de réinitialisation de mot de passe ou de modération !

version: '3'

services: commento: image: registry.gitlab.com/commento/commento container_name: commento restart: always environment: COMMENTO_ORIGIN: https://${COMMENTS_URL} COMMENTO_PORT: 8080 COMMENTO_POSTGRES: postgres://postgres:postgres@postgres:5432/commento?sslmode=disable COMMENTO_SMTP_HOST: ${SMTP_HOST} COMMENTO_SMTP_PORT: ${SMTP_PORT} COMMENTO_SMTP_USERNAME: ${SMTP_USERNAME} COMMENTO_SMTP_PASSWORD: ${SMTP_PASSWORD} COMMENTO_SMTP_FROM_ADDRESS: ${SMTP_FROM_ADDRESS} COMMENTO_GITHUB_KEY: ${COMMENTO_GITHUB_KEY} COMMENTO_GITHUB_SECRET: ${COMMENTO_GITHUB_SECRET} COMMENTO_GITLAB_KEY: ${COMMENTO_GITLAB_KEY} COMMENTO_GITLAB_SECRET: ${COMMENTO_GITLAB_SECRET} COMMENTO_GOOGLE_KEY: ${COMMENTO_GOOGLE_KEY} COMMENTO_GOOGLE_SECRET: ${COMMENTO_GOOGLE_SECRET} COMMENTO_TWITTER_KEY: ${COMMENTO_TWITTER_KEY} COMMENTO_TWITTER_SECRET: ${COMMENTO_TWITTER_SECRET} VIRTUAL_HOST: ${COMMENTS_URL} VIRTUAL_PORT: 8080 LETSENCRYPT_HOST: ${COMMENTS_URL} LETSENCRYPT_EMAIL: ${EMAIL} depends_on:

  • postgres networks:
  • db_network

  • webproxy

    postgres: image: postgres container_name: 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: webproxy: external: true

    volumes: postgres_data_volume:

Pour définir les variables d'environnement, placez-les dans un fichier .env. Assurez-vous que le fichier .env se trouve dans le même répertoire que docker-compose.yml. Lorsque vous exécutez docker-compose up, il appliquera les variables définies dans le fichier .env. Rien n'est défini si elles sont laissées vides.

Définissez les variables requises COMMENTS_URL et EMAIL ou vous pourriez rencontrer des problèmes. La meilleure façon de les définir est de les placer dans le fichier .env. Voici un exemple :

COMMENTS_URL=comments.votre.url EMAIL=vous@votre.url

Obtenir la clé et le secret OAuth

Commento fonctionne avec la plupart des fournisseurs OAuth populaires. Ainsi, les visiteurs peuvent laisser des commentaires sans créer de compte.

Les instructions sont similaires pour chacun. J'ai décrit les étapes pour tous ci-dessous.

Twitter

  1. Connectez-vous à Twitter.com et demandez un compte développeur : https://developer.twitter.com/en/application/use-case

    Accès à l'API Twitter

  2. Décrivez comment vous utiliserez l'API. Vous pouvez utiliser ce que j'ai écrit.

    Comment allez-vous utiliser l'API ?

  3. Vérifiez votre entrée et cliquez sur Cela a l'air bien !

    Tout est-il correct ?

  4. Acceptez les conditions de service.

    Accepter l'accord de développeur

    Vous l'avez fait !

  5. Ils vous diront de vérifier votre email pour une confirmation. Confirmez votre email et vous devriez pouvoir créer votre première application !

  6. Une fois approuvé, cliquez sur Commencer puis sur Créer une application.

    Créer une application

  7. Sur l'écran suivant, cliquez à nouveau sur Créer une application

    Créer une application

  8. Entrez tous les détails appropriés. Pour l'URL de rappel, utilisez https://<votre URL>/api/oauth/github/callback où <votre URL> est votre sous-domaine Commento.

    Détails de l'application

  9. Enfin, une fois que vous avez terminé de remplir les informations, allez dans la section Clés et jetons. Sauvegardez à la fois la clé et le jeton. Entrez-les dans le fichier .env. Vous pouvez utiliser COMMENTO_TWITTER_KEY et COMMENTO_TWITTER_SECRET

    Obtenir la clé et le secret oauth

Gitlab

  1. Connectez-vous à Gitlab.com et allez en haut à droite et cliquez sur Paramètres

  2. Ensuite, cliquez sur Applications

    Profil Gitlab

  3. Entrez un nom pour votre application. J'ai mis Commento.

  4. Définissez l'URI de redirection sur https://<votre URL>/api/oauth/gitlab/callback

  5. Sélectionnez la portée read_user.

    Ajouter une application Gitlab

  6. Cliquez sur le bouton vert Enregistrer l'application

  7. Copiez l'ID de l'application et le Secret et placez-les dans votre fichier .env en utilisant COMMENTO_GITLAB_KEY et COMMENTO_GITLAB_SECRET

    Clé et secret de l'application

Github

  1. Pour obtenir votre clé et votre secret OAuth, vous devrez vous rendre à cette URL : https://github.com/settings/developers

  2. Une fois là-bas, cliquez sur Nouvelle application OAuth

    Ajouter une application OAuth

  3. Entrez vos détails. Pour l'URL de rappel, utilisez https://<votre URL>/api/oauth/github/callback où <votre URL> est votre sous-domaine Commento.

    Enregistrer une nouvelle application OAuth

    Remarque : Assurez-vous d'inclure https dans vos URLs.

  4. Récupérez l'ID client et le secret client et placez-les dans votre fichier .env en utilisant COMMENTO_GITHUB_KEY et COMMENTO_GITHUB_SECRET

    Application créée avec succès

Google

La configuration de Google est presque aussi fastidieuse que celle de Twitter. Malgré la façon dont je viens de le décrire, c'est tout à fait réalisable. Voici les étapes.

  1. Allez à cette URL : Console des développeurs Google

  2. Créez un nouveau projet

    Créer un nouveau projet

  3. Cliquez sur le logo GoogleAPIs dans le coin supérieur gauche pour revenir en arrière une fois que vous avez un projet. (Assurez-vous que la liste déroulante à côté du logo GoogleAPIs est la même que votre nouveau projet !)

  4. Ensuite, cliquez sur Identifiants sur le côté gauche.

  5. Mettez à jour le Nom de l'application et les Domaines autorisés dans l'écran de consentement OAuth

    Configurer l'application

  6. Cliquez sur Créer des identifiants puis sur ID client OAuth

    Configurer les identifiants

  7. Sur Créer un ID client OAuth, entrez le sous-domaine associé à Commento dans Origines JavaScript autorisées. Ensuite, entrez l'URL de rappel complète. Par exemple https://comments.jaredwolff.com/api/oauth/google/callback. Remplacez comments.jaredwolff.com par votre URL.

    Créer un ID client OAuth

    Une fois entré, cliquez sur le bouton créer.

  8. Récupérez l'ID client et le secret client

    Identifiants OAuth

  9. Mettez à jour votre fichier .env en utilisant COMMENTO_GOOGLE_KEY et COMMENTO_GOOGLE_SECRET

Installer votre application

Vous avez entré vos identifiants OAuth, votre email, votre domaine et vos identifiants SMTP. Il est temps de conclure ce spectacle !

  1. Une fois que vous avez terminé de modifier votre fichier .env, exécutez docker-compose up (Pour les fichiers non nommés docker-compose.yml, utilisez le drapeau -f. Exemple : docker-compose -f commento.yml up
  2. Surveillez la sortie pour les erreurs. Si tout semble bon, vous pouvez vouloir l'arrêter (CTRL+C) et l'exécuter avec le drapeau -d

  3. Au premier démarrage, Commento vous invitera avec un écran de connexion.

    Connexion Commento

  4. Créez un nouveau compte en cliquant sur Vous n'avez pas encore de compte ? Inscrivez-vous.

  5. Entrez vos informations et cliquez sur S'inscrire

  6. Vérifiez votre email et cliquez sur le lien inclus :

    Email de validation avec lien

  7. Connectez-vous avec votre compte nouvellement créé.

  8. Ensuite, cliquez sur Ajouter un nouveau domaine.

    Ajouter un nouveau domaine

  9. Une fois créé, allez dans Guide d'installation. Copiez le snippet et placez-le où vous voulez que vos commentaires apparaissent. Dans mon cas, j'ai placé le snippet dans une zone juste après ma balise <article>.

    Snippet de code

  10. Recompilez votre site et vérifiez le succès !

    Section des commentaires du blog avec des cochet

    Cochet ! Enfin, je vous recommande d'essayer de vous connecter avec chaque configuration OAuth individuelle. Ainsi, vous savez qu'elle fonctionne pour les visiteurs de votre site web. ?

Alternatives

J'ai passé un bon moment à jouer avec certaines des alternatives. Ce n'est en aucun cas un guide définitif sur ce qui fonctionnera le mieux pour votre site. Voici quelques-unes des meilleures à ce jour :

https://utteranc.es/#configuration

https://github.com/netlify/gotell

https://github.com/eduardoboucas/staticman

https://posativ.org/isso/

https://www.remarkbox.com

https://www.vis4.net/blog/2017/10/hello-schnack/

https://github.com/gka/schnack

Il y a aussi un énorme fil de discussion sur le blog Hugo qui contient beaucoup plus de liens et de ressources également :

https://discourse.gohugo.io/t/alternative-to-disqus-needed-more-than-ever/5516

Conclusion

Félicitations ! Vous hébergez maintenant votre propre serveur de commentaires ! ?

Dans cet article, vous avez appris à exploiter la puissance de Docker et d'un proxy inverse Nginx. En prime, vous savez comment configurer les identifiants OAuth ! Ainsi, la configuration future sera facile.

D'ailleurs, ce n'est que la partie émergée de l'iceberg. Vous pouvez configurer le même serveur pour l'analyse, la collecte de données et plus encore. Tout le code exemple, y compris le code pour d'autres applications, peut être trouvé ici.

Enfin, si vous cherchez à payer pour Commento, rendez-vous sur www.commento.io et inscrivez-vous au service. Vous soutiendrez un logiciel open source génial !

Si vous avez des commentaires et des questions, faisons-les entendre. Commencez la conversation ci-dessous. ???