Hugo and comments with remark42

May 23, 2020 5 min

This article describes how to integrate the “lightweight and simple (yet functional) comment engine” remark42 into the static site generator Hugo.

Features

Among many others remark42 offers the following features:

Login via Google, Twitter, Facebook, GitHub, Yandex, email or anonymous access.
Import from Disqus and WordPress.
Markdown.
Moderation.
Voting and pinning.
Privacy.

Setup

The following steps show how to install remark42 on a Debian system and integrate it with Hugo.

1. Download

Download latest executable from github.com. Following command downloads version 1.6.0:

1
wget https://github.com/umputun/remark42/releases/download/v1.6.0/remark42.linux-amd64.tar.gz -O remark42.linux-amd64.tar.gz

2. Extract executable

1
tar xzf remark42.linux-amd64.tar.gz remark42.linux-amd64

3. Move executable to `/usr/local/bin`

1
mv remark42.linux-amd64 /usr/local/bin

4. Create remark42 system user

1
useradd -r remark42

5. Create server directory

1
2
mkdir -m 770 /var/www/remark42
chown :remark42 /var/www/remark42

6. Create environment file

1
vim /var/www/remark42/remark42.conf

1
2
3
4
5
REMARK_URL=http://remark42.myserveraddress.com
SECRET=some_secret_key_phrase_1234
SITE=mywebpage
AUTH_ANON=true
EMOJI=true

This enables anonymous access. See Enable OAuth providers for examples how to include other login methods.

7. Create systemd service

1
vim /etc/systemd/system/remark42.service

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
[Unit]
Description=remark42 comment engine
After=network.target

[Service]
User=remark42
Group=remark42
EnvironmentFile=/var/www/remark42/remark42.conf
WorkingDirectory=/var/www/remark42
Restart=always
RestartSec=5
ExecStart=/usr/local/bin/remark42.linux-amd64 server

[Install]
WantedBy=multi-user.target

8. Activate and start systemd service

1
systemctl enable --now remark42

9. Update Hugo’s `single.html`

1
vim layouts/_default/single.html

1
2
3
4
5
6
{{ define "main" }}
...
    {{ if (and .Site.Params.remark42SiteID .Params.comments) }}
        <div id="remark42"></div>
    {{ end }}
{{ end }}

Put the highlighted snippet where you want to have the comments appear on the page.

10. Add Javascript in `footer.html`

1
vim layouts/partials/footer.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{{ if (and .Site.Params.remark42SiteID .Params.comments) }}
<script>
  var remark_config = {
    host: {{ .Site.Params.remark42Url }},
    site_id: {{ .Site.Params.remark42SiteID }},
    url: {{ .Permalink }},
    locale: { .Site.Language.Lang }
  };

  (function(c) {
    for(var i = 0; i < c.length; i++){
      var d = document, s = d.createElement('script');
      s.src = remark_config.host + '/web/' + c[i] +'.js';
      s.defer = true;
      (d.head || d.body).appendChild(s);
    }
  })(remark_config.components || ['embed']);
</script>
{{ end }}

11. Update Hugo configuration

1
vim config.toml

1
2
3
[params]
    remark42SiteID = "mywebpage"
    remark42Url = "http://remark42.myserveraddress.com"

Use the same values as in the remark42 environment file.

12. Deploy Hugo

As a final step re-generate the website and deploy it to the server location.

Enable OAuth providers

remark42 supports a multitude of external OAuth providers to authenticate to the comment system. See the project page for a full list.

Google

Go to console.developers.google.com
Create a new project
Open navigation menu and go to APIs & Services
Click on Oauth consent screen and update information. Set website name as application name.
Go to Credentials in navigation pane and click on create credentials.
Create OAuth client ID with Web application type.
Set authorized origin to same value as REMARK_URL in environment file: http://remark42.myserveraddress.com
Set authorized redirect URIs by appending auth/google/callback to REMARK_URL: http://remark42.myserveraddress.com/auth/google/callback
Note down client id and client secret and add them to environment configuration file /var/www/remark42/remark42.conf:

1
vim /var/www/remark42/remark42.conf

1
2
AUTH_GOOGLE_CID=859110892833-7011d22en9ncjvomk1rpcull1r6tmdhi.apps.googleusercontent.com
AUTH_GOOGLE_CSEC=ds4_dawZ71bW93BPzqlbJriq

Github

Go to github.com
Click on New OAuth App
Enter website name as application name
Set homepage URL to same value as REMARK_URL in environment file: http://remark42.myserveraddress.com
Set callback URL by appending auth/github/callback to REMARK_URL: http://remark42.myserveraddress.com/auth/github/callback
Note down client id and client secret and add them to environment configuration file /var/www/remark42/remark42.conf:

1
vim /var/www/remark42/remark42.conf

1
2
AUTH_GITHUB_CID=2b3011fa2358a44cf215
AUTH_GITHUB_CSEC=7a242af3bc990b632eda013e7930f32435ae52a1

Add moderators

Adding moderators is as simple as logging in and writing the login id to the configuration file. Multiple moderators are supported by separating the ids by commas.

Login to the comment system.
Note down the id by clicking on the username and copying the information.
Add id to environment configuration file /var/www/remark42/remark42.conf:

1
vim /var/www/remark42/remark42.conf

1
ADMIN_SHARED_ID=google_109f4b3c50d7b0df729d299bc6f8e9ef9066971f

Enable Telegram notifications

You can configure remark42 to send notifications via Telegram bot.

Open Telegram app.
Search for new contact BotFather
Start chat with BotFather and create a new bot

1
/newbot

Follow instructions by choosing a nickname and username. The username has to end with _bot.
Note down the access token and write it to environment configuration file /var/www/remark42/remark42.conf:

1
vim /var/www/remark42/remark42.conf

1
2
NOTIFY_TYPE=telegram
NOTIFY_TELEGRAM_TOKEN=12345678:xy778Iltzsdr45tg

Create a private channel where you want the bot send notifications. Add the bot as administrator.
To get the channel id there are multiple ways described in How to obtain the chat_id of a private Telegram channel?
One solution is to use the Telegram Web-App:
1. Find the channel in the channel list.
2. Get the id from the browser URL:
  https://web.telegram.org/#/im?p=c1055587116_11052224402541910257
3. Add -100 as a prefix and write it to the environment configuration file:

1
vim /var/www/remark42/remark42.conf

1
NOTIFY_TELEGRAM_CHAN=-1001055587116

Complete configuration file

The following code shows the possible content of /var/www/remark42/remark42.conf:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
REMARK_URL=http://remark42.myserveraddress.com
SECRET=some_secret_key_phrase_1234
SITE=mywebpage
AUTH_ANON=true
EMOJI=true
AUTH_GOOGLE_CID=859110892833-7011d22en9ncjvomk1rpcull1r6tmdhi.apps.googleusercontent.com
AUTH_GOOGLE_CSEC=ds4_dawZ71bW93BPzqlbJriq
AUTH_GITHUB_CID=2b3011fa2358a44cf215
AUTH_GITHUB_CSEC=7a242af3bc990b632eda013e7930f32435ae52a1
ADMIN_SHARED_ID=google_109f4b3c50d7b0df729d299bc6f8e9ef9066971f
NOTIFY_TYPE=telegram
NOTIFY_TELEGRAM_TOKEN=12345678:xy778Iltzsdr45tg
NOTIFY_TELEGRAM_CHAN=-1001055587116

Server configuration

Apache

1
2
3
4
5
6
7
<VirtualHost *:80>
    ServerName remark42.myserveraddress.com

    ProxyPreserveHost On
    ProxyPass http://127.0.0.1:8080/
    ProxyPassReverse http://127.0.0.1:8080/
</VirtualHost>

Nginx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
server {
    listen      80;
    server_name remark42.myserveraddress.com;

    location / {
         proxy_redirect          off;
         proxy_set_header        X-Real-IP $remote_addr;
         proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header        Host $http_host;
         proxy_pass              http://127.0.0.1:8080/;
    }
}

Check out How to configure remark42 with nginx reverse proxy for a more exhaustive configuration.

If you don’t want to use a subdomain look at How to configure remark42 without a subdomain.

Conclusion

This article explained how to configure remark42 as a systemd service and how to adapt the Hugo templates to integrate the comment system.

technology