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 asREMARK_URL
to backendYOUR_SITE_ID
- theSITE
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.