Kommentare auf meinem Blog via Isso Comments

Motivation

Mein Blog läuft bereits etwa zwei Jahre, und schon vor einiger Zeit habe ich darüber nachgedacht, dass eine Kommentar-Spalte spannend wäre. Durch Feedback von Lesenden erhoffe ich mir einen Mehrwert für mich, und insbesondere würde es mir etwas zurückgeben für meine Artikel. Mal schauen ob das tatsächlich so klappt.

Da mein Blog mit statisch generiert wird, ist eine Kommentar-Section nicht trivial. Ich bin aber gott sei Dank nicht der erste Mensch mit diesem Problem, und ich kann mich durch einige Möglichkeiten wühlen.

Warum isso?

Meine Wahl fiel auf das System isso, aus mehreren Gründen.

Der Entwickler ist scheinbar deutschsprachig. Mir gefällt dazu auch der Name als Abkürzung für “Ich schrei sonst”.

Zusätzlich bin ich ein Python Entwickler, und isso ist in Python geschrieben - ein weiterer Pluspunkt. Falls etwas schief gehen sollte, ist es realistisch dass ich etwas bewirken kann.

Und abschließend ist das System wirklich simpel. Ich benötige kein riesiges Forum nur für ein paar wenige Kommentare, ich benötige einfach nur ein simples Kommentar-System. Und isso bietet mir genau das.

Server Setup

Ich deploye die Software über Docker, aus mehrern Gründen. Hauptsächlich ist das Update Management dadurch sehr einfach - mithilfe von Renovate, was ich in früheren Posts bereits besprochen habe (und mehr Posts folgen sicher noch).

Das Setup ist dann eigentlich sehr einfach. Ich benötige nur eine Konfigurationsdatei.

Docker Compose

Mein Compose File ist einfach:

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

Konfigurationsdatei

Die isso.cfg Datei ist in den Container gespielt. Ich habe die folgende Konfiguration definiert:

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

Ich werde jede Section einzeln diskutieren.

General

• host: Eine Liste an Hosts für jeden beachteten Blog. Ich habe nur einen Blog mit der Domain https://tech-tales.blog.
• dbpath: Wo die Datenbank gespeichert wird.
• notify: Vorerst gibt es nur Notifications via Standard Output (also ins Terminal). In Zukunft möchte ich auch eMails aufsetzen, aber das existiert noch nicht.
• reply-notifications: Falls du eine eMail Adresse bei einem Kommentar hinterlässt, kannst du über Antworten zu deinem Kommentar informiert werden. Das werde ich vielleicht später aufsetzen, aber ich kam noch nicht dazu.
• gravatar: Wenn du deine eMail Adresse mit einem Gravatar versehen hast, wird der hier gezeigt.

Moderation

Ich möchte nicht zu viel Spam bekommen, also werde ich jeden Kommentar manuell freischalten. Entsprechend wird die Moderation aktiviert. Zusätzlich wird ein Kommentar gelöscht, wenn ich ihn nicht innerhalb von 30 Tagen akzeptiere.

Server

Hier teile ich isso mit, unter welcher Domain die Applikation selbst lebt. Sonst ist sie verwirrt.

Guard

Das ist deren eingebaute Version von fail2ban. Ein Besucher bekommt ein Rate Limit für die Anzahl an Kommentaren die in einer bestimmten Zeit erzeugt werden dürfen.

Admin

Die Admin-Seite ist eine kleine Seite für mich, um alle Kommentare aufzulisten und zu sehen, was nicht bereits freigeschaltet ist. Diese Seite ist verfügbar (per enabled = true), aber auf die IP Adressen aus meinem Heimnetzwerk eingeschränkt. Das sollte für die meisten Fälle genügen.

Reverse Proxy

Ich nutze nginx als Reverse Proxy. Das Setup war nicht komplizierter als meine anderen Reverse Proxies. Diese Section existiert also nur um festzuhalten: Nichts Wesentliches war notwendig, ich habe einen ganz typischen Reverse Proxy aufgesetz.

Hugo Setup

Dieser Teil war am spannendsten. Ich habe die Datei layouts/_default/single.html erweitert, mit überraschend wenig Veränderungen:

 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 }}

Wenn ich den Dev-Server aufsetze, benötige ich keine Kommentare. Damit mich das nicht verwirrt, habe ich mir eine entsprechende Notiz eingefügt.

Ich habe auch beschlossen, dass ich Kommentare für einzelne Posts ein- und ausschalten können möchte. In Zukunft möchte ich auch steuern können dass nur keine neuen Kommentare erlaubt sind, aber hier bin ich mir noch nicht sicher wie das gehen kann.

Fazit

Ich finde wirklich cool dass das alles so gut geklappt hat! Einige Dinge muss ich noch herausfinden, aber mit dem generellen Setup bin ich bisher zufrieden. Und ich freue mich auf potentielle Interaktionen mit meinen Besuchenden!