Self-Hosted Commenting System using Docker

Here I will be explaining a self-hosted lightweight commenting system that can be deploy with help of Docker!

So, WTF is Remark42?

Remark42 allows you to have a self-hosted, lightweight, and simple (yet functional) comment engine, which doesn't spy on users. It can be embedded into blogs, articles or any other place where readers add comments

What we need to complete this project?

A Linux machine with Docker installed, min 1Gb RAM, 1 Core machine will work, you can choose your Linux flavour.
I will be using Nginx-Proxy-Manager (NPM) for my SSL termination and reverse proxy.
Some time ;)

If you don't have a linux machine that is with docker installed, you can follow the official guide below.

I am guessing you have Nginx-Proxy-Manager (NPM) installed and its up and running. if you don't have, follow below guide.

let's begin.

Download Remark42 docker-compose file

let's make a directory for this project

As we are using Docker engine for this project, I'll be using docker-compose.yml file for better management. download the latest compose file from official remark42 github repo.

version: '2'

services:
    remark:
        build: .
        image: umputun/remark42:latest
        container_name: "remark42"
        hostname: "remark42"
        restart: always
        logging:
            driver: json-file
            options:
                max-size: "10m"
                max-file: "5"
        ports:
          - "8080:8080"

        environment:
            - REMARK_URL=https://comments.example.com
            - SITE=example.com
            - SECRET=Ebf54*fJ&2zQmx654sdf072349*%&$&*
            - STORE_BOLT_PATH=/srv/var/db
            - AUTH_ANON=true
            - BACKUP_PATH=/srv/var/backup
            - AUTH_GITHUB_CID=XXXXXXXXXXXXXXXXXXXXXX
            - AUTH_GITHUB_CSEC=XXXXXXXXXXXXXXXXXXXXXX
            - AUTH_GOOGLE_CID=XXXXXXXXXXXXXXXXXXXXXX
            - AUTH_GOOGLE_CSEC=XXXXXXXXXXXXXXXXXXXXXX
        volumes:
            - ./var:/srv/var

We will be using minimum enivorment variables to complete this project. you can always edit based on your needs. All variable explanations you can find here in official guide

Bring the container up

issue docker-compose up command to bring the container up. test your connection by accessing the site http://comments.example.com/web

Setup on Your Website

Add config for Remark on a page of your site (here is the full reference):

REMARK_URL – the URL where is Remark42 instance is served, passed as REMARK_URL to backend
YOUR_SITE_ID - the SITE that you passed to Remark42 instance on start, remark by default.

<script>  var remark_config = {    host: 'REMARK_URL',    site_id: 'YOUR_SITE_ID',  }</script>

For example:

<script>  var remark_config = {    host: 'https://demo.remark42.com',    site_id: 'remark',  }</script>

After that place the code snippet right after config.

<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>

💡

Note: You can place the config with the snippet in any place of the HTML code of your site. If it is closer to start of the HTML (for example in <head>) it will start loading sooner and show comments faster.

Put the next code snippet on a page of your site where you want to have comments:

<div id="remark42"></div>

After that widget will be rendered inside this node.

For more information about frontend configuration please learn about other parameters here
If you want to set this up on a Single Page App, see the appropriate doc page.

here is the sample code which am using with this blog

<div id="remark42"></div>

<script>
  var remark_config = {
    host: "https://comments.example.com",
    site_id: 'example.com',
    components: ['embed'],
    theme: 'dark'
  };
</script>

<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>

Quick installation test

To verify if Remark42 has been properly installed, check a demo page at ${REMARK_URL}/web URL. Make sure to include remark site ID to the ${SITE} list.