Skip to main content
LaRomierre
Illustration technique isométrique montrant un système de commentaires Remark42 hébergé sur un Raspberry Pi, connecté via des flux de données lumineux à une interface de site web Hugo, sur un fond sombre avec des icônes de sécurité.

Comment auto-héberger les commentaires Remark42 avec Docker & Hugo

• 5 min • 1,031 words
Self-hosting Remark42 Hugo Docker Raspberry-Pi Vie-privée Commentaires Système Nginx

Quand vous embarquez dans l’aventure excitante de créer un blog, vous faites rapidement face à une question cruciale : comment interagir avec votre audience ? Ce post adresse ce sujet précis. J’expliquerai comment intégrer Remark42 comme système de commentaires pour un blog Hugo (en utilisant le thème Stack comme exemple). Nous couvrirons son auto-hébergement sur un Raspberry Pi en utilisant Docker et Nginx.

Pourquoi choisir Remark42 ?

Aux débuts du blogging, beaucoup d’entre nous—moi inclus—ont opté pour Disqus. C’est incroyablement facile à installer : créez un compte, collez un snippet, et vous êtes en ligne en moins d’une heure.

Cependant, quand j’ai commencé à regarder du côté des en-têtes Content Security Policy (CSP) et de la vie privée, j’ai réalisé que Disqus ne traitait pas vraiment les données utilisateurs avec le respect que j’espérais. Puisque la confidentialité des données est un sujet auquel je porte une attention particulière, j’ai commencé à chercher des alternatives. Mes critères étaient stricts :

  • Solution open-source.

  • Auto-hébergée (pour maintenir le contrôle sur les données).

  • Activement maintenue avec des mises à jour régulières.

  • Compatible avec mon thème Hugo.

J’ai finalement jeté mon dévolu sur Remark42. Selon leur site officiel, Remark42 se concentre sur la vie privée : pas de tracking, pas d’analytics tiers, et toutes les données sensibles sont chiffrées. Il offre de multiples options de login social (Google, Twitter, GitHub, etc.), l’authentification par email, et même les commentaires anonymes. Le meilleur de tout, c’est qu’il est “entièrement dockerisé et peut être déployé en une seule commande”.

Configuration côté serveur avec Docker Compose

Pour cette configuration, nous hébergeons Remark42 sur un Raspberry Pi via Docker, en utilisant Nginx comme proxy inverse avec un certificat SSL généré par Let’s Encrypt.

Depuis la page d’installation de Remark42, vous pouvez récupérer le docker-compose.yml de base. Ci-dessous se trouve un exemple de configuration fusionnée, supposant que vous pourriez faire tourner d’autres services (comme Nginx) sur la même instance.

version: "3"

services:
  # ... autres services ...

  remark42:
    build: .
    image: umputun/remark42:latest
    container_name: "remark42"
    restart: always
    logging:
      driver: json-file
      options:
        max-size: "10m"
        max-file: "5"
    environment:
      - REMARK_URL=${remark-url}
      - SITE=${site}
      - SECRET=${secret}
      - AUTH_ANON=${auth-anon}
      - AUTH_SAME_SITE=none
      - ALLOWED_HOSTS=${website-url}
      - AUTH_GOOGLE_CID=${auth-google-cid}
      - AUTH_GOOGLE_CSEC=${auth-google-csec}
      - AUTH_GITHUB_CID=${auth-github-cid}
      - AUTH_GITHUB_CSEC=${auth-github-csec}
      - AUTH_EMAIL_ENABLE=${auth-email-enable}
      - ADMIN_SHARED_ID=${admin-shared-id}
      - NOTIFY_ADMINS=email
      - ADMIN_SHARED_EMAIL=${admin-shared-email}
      - SMTP_HOST=${smtp-host}
      - SMTP_PORT=${smtp-port}
      - SMTP_TLS=${smtp-tls}
      - SMTP_USERNAME=${smtp-username}
      - SMTP_PASSWORD=${smtp-password}
      - AUTH_EMAIL_FROM=${auth-email-from}
      - NOTIFY_EMAIL_FROM=${notify-email-from}
    volumes:
      - ./remark42:/srv/var

  nginx:
    image: nginx:latest
    container_name: "nginx"
    restart: always
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:z,ro
      - /etc/letsencrypt/:/etc/letsencrypt/:z,ro
    ports:
      - 8080:80
      - 8443:443

Détaillons les variables d’environnement (${value}) et comment les configurer.

Détails de la Configuration Docker

  • ${remark-url} : Le domaine pointant vers votre instance Remark42. Vous devriez définir un sous-domaine (ex. comments.votre-blog.com) et ajouter une entrée DNS routant le trafic vers votre Raspberry Pi. Cela doit être accessible publiquement pour que le frontend puisse atteindre le backend et pour que les fournisseurs OAuth (Google/GitHub) fonctionnent.

  • ${website-url} : L’URL du blog où les commentaires seront affichés (ex. https://www.votre-blog.com).

  • ${site} : Un identifiant pour votre site web. Si vous hébergez uniquement les commentaires pour un site, default fonctionne très bien.

  • ${secret} : Utilisé pour signer les JSON Web Tokens (JWT). Cela doit être une chaîne longue, aléatoire et à haute entropie.

Pro Tip : Vous pouvez générer un secret robuste directement dans votre terminal :

Bash

tr -dc 'A-Za-z0-9!?%=' < /dev/urandom | head -c 30

  • ${admin-shared-id} : Une liste séparée par des virgules d’ID utilisateurs admin.

    • Comment trouver votre ID : Connectez-vous à Remark42 sur votre site. Cliquez sur votre photo de profil pour ouvrir la barre latérale. Copiez la longue chaîne sous votre nom (elle commence par le fournisseur, ex. github_...).

Comment obtenir l’ID utilisateur d’un utilisateur connecté

Configuration des Notifications Email

Pour recevoir des alertes email quand de nouveaux commentaires sont postés :

  • ${admin-shared-email} : L’adresse email de l’administrateur.

  • ${smtp-host} : L’adresse SMTP de votre fournisseur d’email (ex. smtp.gmail.com ou smtp-mail.outlook.com).

  • ${smtp-port} : Habituellement 587 ou 465. Vérifiez la doc de votre fournisseur ou cet article Cloudflare.

  • ${smtp-tls} : Réglez sur true (standard pour la plupart des fournisseurs modernes).

  • ${smtp-username} / ${smtp-password} : Vos identifiants pour le compte SMTP.

  • ${notify-email-from} : L’adresse email qui apparaîtra comme l‘“Expéditeur” de la notification.

Méthodes d’Authentification

Remark42 supporte de nombreux fournisseurs (Google, Twitter, Facebook, Microsoft, GitHub, Yandex, etc.). Ci-dessous sont les paramètres pour ceux que j’ai utilisés.

  • ${auth-anon} : Réglez sur true pour autoriser les commentaires anonymes, false sinon.

  • ${auth-email-enable} : Réglez sur true pour autoriser la connexion via des liens magiques (magic links) par email. Si activé, vous devez configurer les paramètres SMTP ci-dessus et définir ${auth-email-from}.

Exemple d'email contenant un token envoyé durant le processus de connexionExemple d’email contenant un token envoyé durant le processus de connexion

Configurer les Fournisseurs OAuth

Bien que la connexion anonyme et par email soit géniale, le login social réduit la friction pour les utilisateurs.

Authentification GitHub

C’est le plus facile à configurer.

  1. Connectez-vous à GitHub et allez dans Settings > Developer Settings > OAuth Apps > New OAuth App.

  2. Application Name : “Remark42 Comments” (ou similaire).

  3. Homepage URL : L’URL de votre blog (ex. https://votre-blog.com).

  4. Authorization callback URL : Votre domaine Remark42 + /auth/github/callback (ex. https://comments.votre-blog.com/auth/github/callback).

  5. Enregistrez l’application.

  6. Copiez le Client ID dans ${auth-github-cid}.

  7. Générez un Client Secret et collez-le dans ${auth-github-csec}.

Le formulaire de création pour une App OAuth sur GitHub
Le formulaire de création pour une App OAuth sur GitHub

Authentification Google

Avertissement : Ce processus est plus complexe et peut nécessiter de vérifier votre domaine et d’ajouter une politique de confidentialité à votre site.

  1. Allez sur la Google Cloud Console.

  2. Créez un Nouveau Projet.

  3. Naviguez vers APIs & Services > OAuth consent screen.

  4. Sélectionnez External et remplissez les détails requis (Nom de l’app, Email de support, Domaines autorisés).

    • Note : Vous n’avez pas besoin d’ajouter de scopes pour le login basique.

  5. Allez dans Credentials > Create Credentials > OAuth client ID.

    • Application type : Web application.

    • Authorized JavaScript origins : L’URL de votre blog.

    • Authorized redirect URIs : Votre domaine Remark42 + /auth/google/callback.

  6. Copiez le Client ID et le Secret dans votre fichier docker-compose.

Le menu OAuth client IDLe menu OAuth client ID

Important : Vous devez cliquer sur “PUBLISH APP” sur l’écran de consentement OAuth. Google peut exiger un processus de revue, qui peut prendre des semaines. Assurez-vous que votre site a une Politique de Confidentialité visible. Idéalement, Remark42 héberge une politique par défaut à ${remark-url}/web/privacy.html.

Intégrer Remark42 dans Hugo

Une fois le backend lancé, l’intégrer dans Hugo (spécifiquement le hugo-theme-stack) est direct. Éditez votre params.toml :

[comments.remark42]
host = "https://comments.votre-blog.com" # Votre ${remark-url}
site = "default" # Votre valeur ${site}
locale = "fr" # ou "en", etc.

La section comments.remark42 sur params.tomlLa section [comments.remark42] sur params.toml

Déployez votre site, et vous devriez voir la section commentaire apparaître !

Conseil Final

Auto-héberger un système de commentaire est gratifiant mais a une courbe d’apprentissage. Je recommande de commencer petit : faites tourner le conteneur Docker avec juste l’authentification Anonyme ou Email d’abord. Une fois que ça marche de manière fiable, attaquez-vous à la complexité de l’OAuth Google ou GitHub. Vous n’avez pas besoin de chaque fonctionnalité activée dès le premier jour—construisez-le itérativement.