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”):

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.

 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>

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!

Related posts:

• Disqus Commenting  (2 minute read)