zur Startseite

Druckausgabe von https://privat.albicker.org
Iveco Daily 4x4, Hunde und multithematisches Blog

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:

Damit sind die meisten dort genannten Systeme schon aus dem Rennen:

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:

HashOver als Zip-Archiv

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

HashOver per git

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:

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

Hugo Anmeldung

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.

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:

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