Setting up Commento with Hugo

Posted May 9, 2018

Last updated May 15, 2019 | 220aebf


9 minute read

Update
15 Apr 2018

While Commento served its purpose fantastically, I have moved on to Isso.

Update
11 Nov 2018

Commento has stopped working on my VPS and I have disabled it while I try to troubleshoot and rebuild it.



Update
11 Jan 2019

I have Commento working again on the site.











As I thought about it more, I realized that I didn’t like the idea of using Disqus for a commenting here on my Hugo site. This was for a few different reasons, but mainly because reduced privacy and tracking users across the internet1 2 3 are just part of the Disqus package.

This led me back out on a search for an alternative for commenting that could still be useful without trading off privacy or lack of tracking.

I just so happened to run across a Reddit post of a static-looking site that had some nice looking commenting at the bottom. And since I have the trusty uMatrix extension in all of my browsers, I could see that this site was requesting to reach out to a subdomain of the main site called commento. After a quick search, I had found what seemed like a perfect commenting solution.

The new solution 🔗

Commento is a commenting system that has the ability to be self-hosted, which I always love. Its main benefits are having a tiny payload when loading comments on a page and having no sort of tracking whatsoever. It is maintained by adtac on GitHub, and seems to still be pretty active. He has talked about a hosted solution in the future, but as long as it retains the ability to self-host, I will stick with that route.

Getting a VPS 🔗

Realizing I’d have to host it on my own to get this up and going, I racked my brain for the cheapest but most reliable way I could do this. Luckily, I had run across a provider named ChicagoVPS 4 that had dollar-a-month (!) VPSes with low resources that would perfectly fit the bill. I went with a minimal CentOS 7 install, which is easy on the 128MB of RAM. If you’re planning on using Commento, I think this is probably the best way to get it done.

Getting and running Commento 🔗

From your terminal, enter the following commands:

  I have updated the download link directly below with a fork that I have made (of a fork of Commento) when the binaries were still available.

wget https://github.com/oct8l/commento/releases/download/v0.3.1.0.1/commento.tar

tar xvf commento.tar

rm -rf commento.tar

./commento &

This will download, unzip, remove the tar.gz file, and then run Commento in the background on the default port 8080. You can also specify the port with the COMMENTO_PORT param, for example; COMMENTO_PORT=80 ./commento &. Using this command allowed me to test accessing Commento over plain HTTP on port 80 for a proof of concept.

Unfortunately, modern browsers are just too dang secure and were having issues loading the insecure JavaScript from Commento over port 80/http. The section at the bottom of posts wouldn’t load, and Chrome would give me a little shield up in the address bar (Firefox also showed this same “issue”):

Unsafe content alert in Chrome

But at least this meant it was working!

At this point you can go ahead and kill the Commento process. Run pgrep commento to find the PID, and then run kill -9 PID and replace PID with the number printed by the last command (e.g. kill -9 4422).

Setting up a subdomain 🔗

I have my domain of oct8l.com registered with Namecheap, which I highly recommend. All support requests have been handled very quickly, and the prices really can’t be beat in most cases.

Most registrars have their own instructions, including Namecheap. Just Google away, or search your registrar’s knowledge base.

If you wait a few minutes (Namecheap says 30) to a couple hours, you should be able to dig or ping your new hostname and get your VPS’s IP as a response. I would wait for this to propagate before going on to the next step.

Configuring HTTPS 🔗

My first thought to get the issue with browsers blocking insecure content cleared up (and more secure), was to install Nginx to accept the secure traffic on port 443/https, and then proxy to Commento inside of the VPS. I’ve used this solution before (thanks to a cool web series from Juriy Bura), so I figured it would be relatively painless to get set up. Since I chose CentOS 7 minimal for the OS on my ChicagoVPS, I followed the wonderful tutorial from DigitalOcean for getting it installed.

An awesome perk of using Nginx is that it gives us a method for automating our SSL cert setup and renewal process with the help of EFF’s Certbot This will keep the total yearly cost of this libre commenting at $12, which I don’t mind for a fun little project.

So now that we have Nginx installed, we’ll run Certbot and have it set up a Let’s Encrypt certificate for us.

Enter certbot --nginx into your VPS’s terminal and enter your domain name you have registered in the previous step when prompted, commento-gitlab-pages.oct8l.com for example.

Tell Certbot to go out and register you a new certificate, and then tell it to not create an HTTPS redirect automatically for you. I had issues when I accidentally selected the option to create the redirect the first time around.

Nginx config 🔗

Back on your VPS, use vi (or run yum -y install nano and use nano if you’d like to be able to exit your editor) to look at the default config file for Nginx, which should be at /etc/nginx/nginx.conf. You can also add a secondary config to /etc/nginx/conf.d/XXXX.conf but I found it just as easy to edit the main config.

Yours should look similar to what I have below, with the exception of the domain name used. I have highlighted the lines that I changed, and I suggest you change your config file to match mine.

Note: I had removed most of the content in the middle of the config pasted below, as Certbot made entries at the bottom (see lines containing # managed by Certbot) that duplicated existing entries


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
# include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    # include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 ;
        listen       [::]:80 ;
        server_name  YOUR-DOMAIN-HERE; # managed by Certbot
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	        proxy_pass "http://127.0.0.1:8080/";
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }


    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/YOUR-DOMAIN-HERE/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/YOUR-DOMAIN-HERE/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}}

This config will listen on ports 80 and 443 for traffic, and then send that traffic to the internal port 8080 that Commento is listening on for commenting traffic.

After making the changes, exit your editor and run nginx -s reload to reload Nginx with the new config file. You should then be able to go to the FQDN of your new subdomain through port 443/HTTPS and see the JavaScript and CSS files. We’re almost done!

Automating certificate renewal 🔗

If you went with the CentOS 7 Minimal installation like I had, you’ll need to do a little bit extra work for setting up the automatic renewal of the Let’s Encrypt cert.

You’ll need to install the cronie package, so run the following commands:

yum install cronie

systemctl start crond

systemctl enable crond

This will install the package, start the cron daemon, and enable it on boot so it’ll automatically start when CentOS does.

You should now be able to run crontab -e to edit your cron file. Add something similar to this line:

42 6 * * * certbot renew

This uses vi by default, so enter the following sequence to get out: ESCAPE :wq ENTER

This specific line would have your machine go out at 6:42 local (to the VPS) time and check if the certificate is close to expiring. If so, Certbot will take over and renew your certificates for you. Otherwise, it’ll just wait until the next day.

You can change this time to something random, and check with crontab.guru to make sure it’s valid.

Adding the comments to your Hugo site 🔗

In Hugo, add a partial under layouts/partials/ named commento.html with the following HTML:

1
2
3
4
5
<div id="commento"></div>
<script defer
  src="https://YOUR-DOMAIN-HERE/assets/js/commento.js"
  data-div="#commento">
</script>

Note: Make sure to replace your subdomain on the highlighted line


Now add {{ partial "commento.html" . }} in your single.html default layout (like I have implemented), or wherever you would like comments on your site to be displayed.

Now go ahead and push that code to CI or regenerate your site, and you should have secure and private commenting in Hugo!