Ein Kommentarsystem für Hugo-Webseiten
veröffentlicht am 01.11.2020 mit 1354 Worten - Lesezeit: 7 Minute(n) in * PROGRAMME * SOFTWARE *
Inhaltsverzeichnis
Vielerorts wird für die Einbindung eines Kommentarsystems in statische Webseiten die Verwendung externer Dienste, wie z. B. Disqus, empfohlen. Aber: ich will ja nicht die Besucher meiner Webseiten an irgendwelche schrägen Dienste in datenschutzrechtlich unsicheren Drittstaaten verkaufen …
Kommentarsystem auf dem eigenen Server
Empfehlungen aus der Dokumentation von Hugo
In der Doku des Hugo-Projektes werden verschiedene Alternativen zu Disqus aufgelistet.
Die meisten scheitern bei genauem Hinsehen aber an den Anforderungen, die sich für mich an so ein System stellen:
- Es sollte nutzbar sein, ohne daß sich die Leser erst registrieren müssen
- Es sollte auf jedem günstigen Webspace laufen, der als Mindestanforderung PHP anbietet
- Es sollte auf dem eigenen Server laufen (keine Software-as-a-Service-Lösung)
Damit sind die meisten dort genannten Systeme schon aus dem Rennen:
- Staticman: Installation braucht Zugriff auf den Server auf Betriebssystemebene: Node.js, npm)
- Talkyard: Installation braucht Zugriff auf den Server auf Betriebssystemebene
- IntenseDebate: Software-as-a-Service
- Graph Comment: Software-as-a-Service
- Muut: Software-as-a-Service
- Isso: Installation braucht Zugriff auf den Server auf Betriebssystemebene (Python)
- Utterances: braucht ein Github-Repository im Hintergrund
- Remark: Installation braucht Zugriff auf den Server auf Betriebssystemebene (Docker)
- Commento: Installation braucht Zugriff auf den Server auf Betriebssystemebene (Golang-Binary) und PostgreSQL-Datenbank
- Hyvor Talk: nur Software-as-a-Service
Es gibt noch eine weitere Lösung auf Basis der Open-Source Forensoftware Discourse, die so beschrieben wird:
In Discourse setzt sich ein Thema aus vielen Beiträgen zusammen. Wenn Sie Discourse auf einer anderen Website einbetten, verknüpfen Sie ein Dokument (Blog-Eintrag, HTML-Seite usw.) mit einem einzigen Thema. Wenn Personen in diesem Thema Beiträge verfassen, werden ihre Kommentare automatisch auf der Seite angezeigt, in die Sie sie eingebettet haben.
Aber aufgrund
Eine wichtige Sache, die bei dieser Einrichtung zu beachten ist, ist, dass Benutzer zu dem Forum wechseln müssen, um Antworten zu verfassen.
habe ich diese Möglichkeit wieder verworfen und auch nicht weiter untersucht, ob - wie bei Foren üblich - die Benutzer sich auch in diesem Fall erst registrieren müssen (was ein No-go wäre).
Selbst gehostetes Kommentarsystem mit geringen Anforderungen
Nach einer längeren Suche habe ich dann HashOver gefunden und in der Version 1 einige Zeit getestet. Nach einer kompletten “Renovierung” meiner Webseiten habe ich dann die Entwicklungsversion “HashOver Next” integriert hier auf der Seite und auch bei bilddateien.de. Und diese Implementierung möchte ich hier beschreiben.
HashOver auf einer Hugo-Webseite
Hugo-Seite vorbereiten
Zunächst erinnern wir uns: Das Arbeitsverzeichnis einer Hugo-Webseite sieht auf der obersten Ebene so aus:
homepage
├── archetypes
├── content
├── public
├── resources
├── static
└── themes
config.toml
Im Unterordner static
wird ein neuer Unterordner hashover
erstellt:
homepage
├── archetypes
├── content
├── public
├── resources
├── static
| ├── bilder
| ├── docs
| ├── hashover
| ├── iveco
| ├── logos
| ├── media
| ├── php
| └── script
| favicon.ico
| robots.txt
└── themes
config.toml
HashOver herunterladen
ZIP herunterladen
HashOver-next kann direkt hier heruntergeladen werden:
Das .zip
-Archiv muß entpackt werden und der Inhalt des enthaltenen Ordners hashover-next-master
in den oben erstellten Ordner hashover
innerhalb der Hugo-Verzeichnisstruktur kopiert werden.
git
verwenden
Wer git installiert hat, für den ist die ganze Aktion einfacher:
Man wechselt in das Verzeichnis ~/Pfad/zur/homepage/static/hashover
und öffnet dort ein Terminal.
Dann kopiert man die Adresse des Github-Repositories
und führt den Befehl git clone
mit dieser Adresse aus:
~/Pfad/zur/homepage/static/hashover$ git clone https://github.com/jacobwb/hashover-next.git
Das Ergebnis
In beiden Fällen sollte danach der Inhalt des Ordners hashover
innerhalb des Ordners static
so aussehen:
./static/hashover:
├── admin
├── api
├── backend
├── comments
├── config
├── frontend
├── images
└── themes
changelog.txt
comments.php
CONTRIBUTING.md
LICENSE
loader.php
README.md
HashOver einbinden und konfigurieren
HashOver an der vorgesehenen Stelle einbetten
Ich greife hier auf die einfachste Variante aus der Dokumentation von HashOver zurück: Im Template single.html
der Section blog
wird am Ende des Inhaltsteils dieser Code eingefügt:
<!-- Kommentarbox -->
<script type="text/javascript" src="/hashover/comments.php"></script>
<noscript>Ohne Java-Script gibt's leider keine Kommentare zu sehen ...</noscript>
<!-- Ende Kommentarbox -->
An dieser Stelle werden im Betrieb die vorhandenen Kommentare sowie das Formular für die Eingabe neuer Kommentare angezeigt.
Setup
Als erstes ist die Datei /hashover/backend/classes/secrets.php
in einem Texteditor zu öffnen und die folgenden Variablen mit Werten zu belegen:
Notwendige Basisvariablen:
$notificationEmail
- HashOver sendet an diese E-Mail-Adresse E-Mail-Benachrichtigungen, wenn Benutzer Kommentare auf Ihrer Website veröffentlichen und wenn die Benutzer einander antworten.$noreplyEmail
- Eine normale E-Mail-Adresse. Wenn Benutzer sich gegenseitig antworten, sendet HashOver eine E-Mail-Benachrichtigung an die E-Mail-Adresse, die in dem Kommentar gespeichert ist, auf den geantwortet wird. Diese Einstellung steuert, welche E-Mail-Adresse als Absender-E-Mail-Adresse für diese Benachrichtigungen eingetragen wird.$encryptionKey
- zum Verschlüsseln und Entschlüsseln sensibler Benutzerdaten in Kommentaren wie E-Mail-Adressen und Passwörtern. Sollte notiert werden für den Fall, dass die Dateisecrets.php
irgendwann durch den Standardwert ersetzt wird, z.B. beim Aktualisieren vonHashOver auf eine neuere Version.$adminName
- Benutzernamen für den Administrator, er kann die Kommentare moderieren, bearbeiten, löschen und ausstehende Kommentare genehmigen.$adminPassword
- Das Kennwort für den Admin-Benutzer. Bei dieser Einstellung wird zwischen Groß- und Kleinschreibung unterschieden.
Der nächste Abschnitt SQL-Setup
ist opitional, wenn auf dem Server die Kommentare nicht als einfache Dateien, sondern in einem Datenbankserver wie MySQL abgespeichert werden sollen. Dies erhöht die Komplexität, weshalb ich das nicht einsetze.
Im Abschnitt SMTP Setup
sind Eintragungen dann erforderlich, wenn der Provider, bei dem man seinen Webspace unterhält, die einfache PHP-Funktion mail()
(sendmail
) deaktiviert hat. Dies ist zunehmend aus Sicherheits- und Spamschutzgründen der Fall. Die Werte hier sind dieselben, wie sie bei der Einrichtung eines e-mail-Programms auch eingegeben werden müssen.
Webseite neu erstellen und hochladen
Wenn alle Dateien vorhanden sind und HashOver soweit vorkonfiguriert ist, kann die Webseite gerendert und veröffentlicht werden.
~/home/{Benutzername}/Webseiten/blog $ hugo
Das Ergebnis dessen, was Hugo im Rendering-Mode erzeugt hat, liegt im Hugo-Verzeichnis public
und dessen Unterverzeichnissen. Dort wird man auch ein neues Unterverzeichnis hashover
entdecken.
Der Inhalt von public
ist komplett auf den Webserver zu übertragen, üblicherweise mittels eines ftp-Programms.
Aussehen und Verhalten konfigurieren
Wenn nun alle Dateien hochgeladen sind, dann kann man im Browser die Adresse
https://www.domain.tld/hashover/admin/settings
aufrufen (anstelle www.domain.tld
natürlich die Adresse der eigenen Webseite eintragen!). Man erhält ein Anmeldefenster
in das man die unter Setup vergebenen Benutzernamen und Paßwort des Administrators eingibt. Man gelangt dann auf ein Webinterface, in dem man Beiträge moderieren, verschiedene Filter (IP-Adressen, URLs) konfigurieren und grundsätzliche Einstellungen tätigen kann. Zu letzteren gehören u. a.
- Sprache
- Erscheinungsbild (Theme)
- Sortierreihenfolge von Kommentaren
- Moderation nötig (ja/nein)
- e-mail-Benachrichtigungen
- Cookies
- Datum-/Zeiteinstellungen
- etc. etc.
Die hier getätigten Einstellungen werden in /hashover/config/settings.json
gespeichert (auf dem Server natürlich).
Updates von HashOver
Installation aus ZIP-File
Bitte diesen Hinweis beachten
Das ist nicht ganz einfach:
- Zunächst muß man ein neues ZIP-Archiv herunterladen und entpacken
- Am besten geht man dann wie folgt vor:
- Inhalt des Unterverzeichnisses
comments
vom bisherigen Verzeichnis auf das neu entpackte übertragen - mit der Datei
secrets.php
ebenso verfahren - Inhalt des Unterverzeichnisses
config
vom bisherigen Verzeichnis auf das neu entpackte übertragen (enthält die Einstellungen zu Aussehen und Verhalten, s. o.).
- Inhalt des Unterverzeichnisses
- bisheriges Verzeichnis
hashover
innerhalb des Hugo-Arbeitsverzeichnisses leeren - Inhalt des heruntergeladenen/entpackten und um die veränderten Dateien ergänzten Verzeichnisses dorthin verschieben.
- Alles auf den Server hochladen
Installation per git
Hier reicht der Befehl git pull
~/Pfad/zur/homepage/static/hashover$ git pull
Die in kritischen Verzeichnissen vorhandenen versteckten Dateien .gitkeep
sollten ein Überschreiben der dortigen Informationen verhindern - ein Backup vorher kann aber nie schaden … 😉
Achtung: was zu beachten ist!
Wenn man HashOver eingebunden hat, ist die Webseite keine rein statische Webseite mehr, denn “draußen auf dem Webserver” können sich Änderungen ergeben (klar, natürlich immer dann, wenn ein Leser einen Kommentar schreibt, aber auch, wenn man selbst als Administrator moderiert oder die Einstellungen ändert). Wird nun die Webseite aktualisiert oder ergänzt (neue Artikel hinzugefügt etc.), dann genügt es nicht mehr, einfach den Befehl hugo
lokal auf dem Rechner auszuführen und das Ergebnis, also den Inhalt des Unterverzeichnisses public
auf den Webserver zu laden - denn dies würde ja die inzwischen hinzugekommenen Kommentare evtl. überschreiben = löschen.
Ich nutze daher den Kommandozeilen-ftp-Client zum Synchronisieren des Serververzeichnisses mit dem lokalen Arbeitsverzeichnis wie folgt (Betriebssystem auf meinem Rechner: Linux):
$ lftp -u {benutzername}:{passwort} ftp://domain.tld -e "mirror -env {/serverpfad/hashover/comments} {/pfad/zur/homepage/static/hashover/comments} ; close -a ; exit"
Damit sind die Kommentare der Leser lokal in meinem Hugo-Arbeitsverzeichnis gesichert.
Gleiches muß man nun noch mit der Konfiguration machen, die man ggf. über die Admin-Oberfläche geändert hat:
$ lftp -u {benutzername}:{passwort} ftp://domain.tld -e "mirror -env {/serverpfad/hashover/config} {/pfad/zur/homepage/static/hashover/config} ; close -a ; exit"
weitere Artikel
- Ein Blog mit Hugo erstellen - Tutorial Teil 4 - Betriebsmodi von Hugo
- Hugo und die Krux mit dem Zeilenumbruch
- Trennung von Struktur und Design/Inhalt und Layout
- Hugo und PHP? (Teil 2)
- Ein Theme für Hugo erstellen - Tutorial Teil 1 - Das Rohgerüst und die Startseite