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:

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

[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:

  {{ 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.