Comments enabled

After realizing that blogging works better than I initially feared – and after someone asked me if I’d be open to some kind of exchange – I decided to enable a comment function.

Why did it take so long? Mainly because I didn’t want to become a magnet for porn sites or shady offers. I also wanted to avoid anything semi-commercial, and then there’s the whole GDPR thing to consider.

So the decision was made: it should be a lightweight, self-hosted solution. In the end, I went with Isso. Maybe the name had something to do with it.

Technical setup #

For those interested in the technical details: the blog is served via a Caddy server running in a Docker Compose setup. Let’s start with the Caddyfile.

Adjusting the Caddyfile #

To make Caddy forward requests to the Isso API, I added the following section:

https://ch.ege.io {
    root * /site
    file_server

    handle_path /isso/* {
        reverse_proxy http://isso-server:8080 {
            header_up X-Script-Name /isso
        }
    }

    encode gzip
}

All requests to https://ch.ege.io/isso/* are forwarded to http://isso-server:8080 within the internal Docker network.

Docker Compose configuration #

Since I’m hosting on an ARM64v8 server, I had to use a recent image – the standard release image didn’t work.

isso-server:
  image: ghcr.io/isso-comments/isso:latest
  restart: always
  volumes:
    - ./isso/config:/config
    - ./isso/db:/db
  networks:
    - proxy

The configuration lives in ./isso/config, and the SQLite database is stored in ./isso/db.

Isso configuration #

Here’s an excerpt from my config.cfg:

[general]
dbpath = /db/comments.db
host = 
    http://ch.ege.io/
    https://ch.ege.io/
public-endpoint = /isso

[moderation]
enabled = true

[server]
listen = http://0.0.0.0:8080/

[guard]
enabled = true
ratelimit = 2
direct-reply = 3
reply-to-self = false
require-author = true
require-email = true

[smtp]
username = <user name>
password = <user password>
host = <smtp server>
port = 465 
security = ssl 
to = <admin mail address>
from = <sender address>
timeout = 10

With this, the server is ready to go.

Hugo integration #

To make Isso work properly with Hugo, I had to get a little creative. Since I develop locally in a VS Code Devcontainer, I wanted to test comments there as well. I start Isso locally with:

isso -c isso/config/config.cfg run

My local configuration looks like this:

[general]
dbpath = /workspaces/ch.ege.io/isso/db/comments.db
host = 
    http://localhost:1313/
    http://127.0.0.1:1313/

[server]
listen = http://0.0.0.0:8080

To switch between local and production environments, I use Hugo environments. In config/local/params.toml I have:

isso_script = "http://localhost:8080/js/embed.min.js"
isso_endpoint = "http://localhost:8080/"

I start Hugo with:

hugo server -e local -D

Template integration #

The theme supports comments, you just need to create layouts/partials/comments.html:

<section id="isso-thread"></section>
<script 
  src="{{ .Site.Params.isso_script | safeURL }}"
  data-isso="{{ .Site.Params.isso_endpoint }}"
  data-isso-require-author="true"
  data-isso-sorting="newest"
  data-isso-lang="{{ .Site.Language.Lang | default "en" }}"
></script>

The data-isso-lang value ensures automatic localization depending on the site’s language setting.

CSS adjustment #

With the dark mode in my theme enabled, I had the classic problem: white text on a white box – the visual equivalent of a “white dove on white background” (something my elementary school teacher wouldn’t have appreciated).

The fix: I added a custom CSS file assets/css/custom.css with the following:

html.dark #isso-thread textarea,
html.dark #isso-thread input,
html.dark #isso-thread .isso-postbox,
html.dark #isso-thread .isso-comment {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark, #333) !important;
}

html.dark #isso-thread ::placeholder {
  color: var(--color-text-dark) !important;
  opacity: 0.6;
}

Depending on your theme, variable names and class selectors may vary – you might need to define your own.

Conclusion #

Getting comments to work with Hugo and Isso is definitely doable – but not exactly plug-and-play if you’re detail-oriented like me. The integration now works functionally, and although the design isn’t quite perfect yet, there’s definitely room for improvement.

Feel free to drop a comment – I’d love to hear from you! 😁