This post number 2 in the series . Find an overview of all posts in this series here.

You can find the predecessor post of the series here.

You can find the successor post of the series here.

Motivation

My blog is running for about two years now, and already some time ago I started thinking about adding a comments section. I hope that getting actual feedback from readers will increase the value and in particular will give me something back for the stuff I write. Let’s see if I am right here.

Since my blog is generated with a static site generator, including something like a comments section is not a trivial thing to set up. Luckily, I am not the first person with this challenge, and there are a set of options out there.

Why isso?

My choice for the comments system fell to isso, for multiple reasons.

First, the guy who developed it is obviously a german. I also like the name of the blog - it is called “ich schrei sonst”, which I may loosely translate to “I don’t like any of the other options available”.

Additionally, I am a Python guy, and the backend of isso is a Python application. So I have quite a good chance to understand a thing or two of the code when interested.

Finally, the system is simple. I don’t need a complete forum for my blog, I just need a dead simple comment system. And isso is exactly that.

Server Setup

I decided to use the provided Docker image, for multiple reasons. The main one is that I then can do updates automatically via Renovate - as partly already discussed in previous posts, some more posts on this topic are still to come.

The setup is quite simple. I essentially only need a config file which contains a bit of configuration.

Docker Compose

The compose file is not too complicated, there is just one container inside:

1
2
3
4
5
6
7
8
9

services:
  isso:
    image: harbor.tech-tales.blog/github-proxy/isso-comments/isso:0.13.0
    container_name: isso-comments
    ports:
      - 8080:8080
    volumes:
      - ./isso.cfg:/config/isso.cfg:ro
      - ./db:/db

Configuration file

We have mounted the isso.cfg file. This will have the following configuration:

[general]
host = https://tech-tales.blog
dbpath = /db/isso.db
notify = stdout
reply-notifications = false

gravatar = true

[moderation]
enabled = true
# If I don't approve within 30d, the comment is deleted again
purge-after = 30d

[server]
listen = https://isso-comments.tech-tales.blog
# Setting public-endpoint is required so that
# isso knowns on which domain it actually lives
public-endpoint = https://isso-comments.tech-tales.blog

samesite = Strict

[guard]
enabled = true
ratelimit = 2

[admin]
enabled = true
password = wouldnt-think-i-included-that-here?

Let’s go through the sections.

General

  • host: This is a list of hosts for every blog considered. I only have one blog, and https://tech-tales.blog is the domain for it.
  • dbpath: Where to store data.
  • notify: Currently stdout. I would like to setup mailing, but this is not done yet.
  • reply-notifications: In case you write a comment and leave an eMail address, you can get notifications if somebody replies to you. I would like to set that up at a later point, but I didn’t yet.
  • gravatar: If you leave an eMail address, your gravatar will be shown. Fancy!

Moderation

I don’t want to get into spam, so I would like to confirm every comment that was posted. Hence, enable moderation. Also, delete comments that I don’t confirm after 30 days.

Server

Here, I am telling isso where it actually lives. This is important, as otherwise it might get confused.

Guard

This is a builtin version of fail2ban. You get a rate limit for the number of comments you can post.

Admin

Just a small site for me to check all comments available and see un-confirmed comments. As discussed in the reverse proxy setup, I decided to only make that avaliable internally, in my home network. This should be enough in most cases.

Reverse Proxy Setup

I am using nginx as the reverse Proxy. The setup was not too complicated, just generate a usual reverse proxy. I just wanted to note here that I did not have to set anything specific. Just a plain reverse proxy was sufficient.

Hugo Setup

This was the most interesting part. I have got the layouts/_default/single.html file, where all the magic happened. And the magic is quite small:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  {{ if .Params.comments | default true }}
    <!-- Comments Section -->
    <h2>Comments</h2>
    {{ if (eq hugo.Environment "production") }}
       <section id="isso-thread"></section>
      <script src="https://isso-comments.tech-tales.blog/js/embed.min.js"
              data-isso="https://isso-comments.tech-tales.blog"
              data-isso-default-lang="en"
      ></script>
    {{ else }}
      In production, here is the comments section. I just don't include it in dev.
    {{ end }}
  {{ end }}

I do not include the comments when runnig the dev server, as this would just be a confusion for me, but I added a note for myself that this would be here.

Also, I decided that comments can be turned on and off per blog post. Later on, I would like to just disallow new comments for a specific post, but I am not yet sure how to implement that. This will be a follow-up post somewhere in the future.

Conclusion

I am happy that everything works out! I still have some things to figure out, but I am happy that this now works and I am looking forward to a bit of interaction with potential readers!

Quite some stuff is still missing, but I am happy that also quite some stuff is working already.