Von WordPress zu Hugo Teil 3: Ein Blick zurück

Ende 2022 hat Hugo hier im Blog WordPress abgelöst und um das Fazit vorwegzunehmen: der Wechsel zu einem statischen Websitegenerator hat die damit verbundenen Erwartungen voll erfüllt.

Im Gegensatz zu dynamischen Websitegeneratoren werden bei statischen Websitegeneratoren die Seiten nicht bei jedem Aufruf neu aus einer Datenbank oder dem Dateisystem erstellt, sondern nur dann neu gebaut, wenn sich der Inhalt auch tatsächlich ändert. Der Einsatz eines statischen Websitegenerators ist aber nicht für jeden Einsatzzweck geeignet, denn z.B. bei einer großen Website mit vielen Autoren und täglich unzähligen Änderungen und eingehenden Kommentaren kann der Einsatz eines dynamischen Websitegenerators durchaus effizienter sein.

In vielen kleineren Projekten (wie z.B. dieser Website) werden Inhalte hingegen eher sporadisch hinzugefügt und dies i.d.R. auch nur ein oder wenige Male pro Woche. Hier kann der Einsatz eines statischen Generators den Wartungsaufwand so reduzieren, daß mehr Zeit für das eigentliche Schreiben der Beiträge bleibt und gleichzeitig einen Großteil der potentiellen Angriffsfläche auf dem Webserver verringern.

Wahl des Generators

Nach Sichtung mehrerer Alternativen fiel die Wahl auf Hugo, das mit einigen überzeugenden Features glänzt:

Genau wie Fossil, das seit Jahren bei mir als SCM im Einsatz ist, besteht Hugo aus einer einzigen ausführbaren Datei und funktioniert somit ohne tausend zu installierende Abhängigkeiten, Frameworks oder zukünfig vielleicht nur schwer zu schaffenden Voraussetzungen.

Zusätzlich verfügt Hugo über einen eingebauten Webserver mit integriertem Live-Reload, so daß ohne großen Aufwand lokal entwickelt und getestet werden kann. Last but not least ist Hugo auch rasend schnell, als Fausregel kann von 1ms pro bearbeitetem Inhalt ausgegangen werden. Dieser Punkt schien mir anfangs gar nicht so wichtig, aber spätestens beim Bearbeiten zentraler Templates ist es extrem nervenschonend, wenn die komplette Website selbst auf meinem antiquiertem i5-6600 in weniger als zwei Sekunden neu gebaut ist:

Neben einer guten und verständlichen Dokumentation war mir auch eine lebendige Community wichtig. Irgendwann kommt mit an Sicherheit grenzender Wahrscheinlichkeit ein Punkt, an dem man den Wald vor lauter Bäumen nicht mehr sieht und für zahlreiche Blog-Beiträge, Tutorials und ein reges Austauschforum dankbar ist.

Der Einstieg

Aller Anfang ist schwer, aber wenn man einmal verstanden hat, wie ein System tickt, so gehen die nächsten Schritte deutlich leichter.

Sinnvollerweise sollten erst einmal Erfahrungen mit einem neuen Werkzeug gesammelt werden und dies am besten mit einem Spielprojekt. Man kann sich das Leben aber auch unnötig schwer machhen und ohne Vorkenntnisse ein komplexes Projekt als Ziel anvisieren.

Auf der Suche nach für die Umsetzung des Blogs passenden Tutorials bin ich leider im Internet nicht fündig geworden. Die Suchmaschinen werfen zwar bei entsprechenden Suchanfragen einiges an Ergebnissen aus, aber die meisten gefunden Tutorials beleuchten nur einen Teilaspekt des geplanten Umfangs und es fehlt der umfassender Überblick.

Als Glücksgriff hat sich das Buch “Build Websites with Hugo - Fast Web Development with Markdown” von Brian P. Hogan erwiesen, welches auch auf der Hugo-Website als Starthilfe aufgeführt wird. Nach einem kurzen allgemeinen Einstieg geht es mit den Themenblöcken “Building a Basic Theme”, “Adding Content Sections” sowie “Adding a Blog” recht schnell und verständlich in die Themenbereiche, die für die Umsetzung notwendig und hilfreich waren und das Grundgerüst stand nach recht kurzer Zeit und konnte mit den Inhalten befüllt werden.

Nacharbeiten

Nachdem die Inhalte wie in Teil 2 beschrieben exportiert und im Dateisystem angelegt waren, stand noch einiges an Nacharbeiten an. TinyMCE, welches bei WordPress bis einschließlich Version 4.9 im Einsatz war, produziert zwar weitestgehend sauberen Code, der aber doch noch an der ein- oder anderen Ecke bereinigt werden musste. Besonders “schön” waren mittels Copy & Paste aus Micosoft Office übernommene Passagen, welche mit zustzlichen Formatierungen bestückt waren.

Als zeitsparend hat es sich erwiesen, daß nur ein verschwindend geringer Teil an Blogbeiträgen mit dem WordPress-Editor Gutenberg erzeugt wurden, denn diese erforderten einen deutlich höheren Bereinigungsaufwand.

In einigen Beiträgen musste manuell nachgebessert werden, da der selbstgeschriebene Quick & Dirty-Export nicht sauber gearbeitet bzw. Dinge nicht umgesetzt hatte.

Letztendlich hat es sich als sinnvoll erwiesen, im Laufe der Zeit jeden vorhandenen Beitrag einmal im Texteditor zu öffnen und einer kurzen Kontrolle zu unterziehen, damit unter der Haube die Markdown-Dateien auch wirklich sauber waren.

Auch rund um die Kommentare wurde mehrfach nachgebessert. Letztendlich werden diese im JSON-Format in einem Unterordner im Verzeichnis des jeweiligen Beitrags abgelegt. Neue Kommentare werden vom Server als JSON-Datei abgelegt und in die lokale Entwicklungsumgebung transferiert - sicherlich kein Verfahren, das bei mehr als einer Hand voll Kommentaren pro Monat sinnvoll anwendbar wäre.

Werkzeuge

Zum Generieren der Website wird Hugo in der von Debain Stable mitgelieferten Version verwendet. Dies hat den Vorteil, daß sich die technische Basis nur ungefähr alle zwei Jahre ändert und zwischenzeitlich stabil bleibt. Der Nachteil dieser Vorgehensweise ist, daß Hugo recht kurze Entwicklungszyklen hat, neue Funktionen erst einmal nicht direkt zur Verfügung stehen und bei einem Versionswechel nach zwei Jahren i.d.R. einiges an Nacharbeiten anfällt.

Als Hauptwerkzeug zum Erstellen der Blogbeiträge dient Sublime Text, welches um einige Projekt-spezifische Snippets erweitert wurde. Mit diesen lässt sich z.B. schnell die notwendigen FrontMatter-Angaben für einen neuen Blogbeitrag erzeugen, Shortcodes für Bilder und Boxen einfügen oder per Tastendruck ein Link setzen. Auch ein paar externe Werkzeuge wurden eingebunden, um z.B. aus im Verzeichnis gespeicherten Bilddateien die Liste für eine Galerie zu erstellen.

Darüber hinaus gibt es noch einige (wenige) Skripte, welche z.B. die Meta-Informationen für Bildergalerien erzeugen oder andere leicht zu automatisierende Aufgaben übernehmen.

Der Abgleich mit dem Webserver erfolgt mittels rsync, welches über eine SSH-Verbindung beim Veröffentlichen den loaken Entwicklungsstand mit dem Inhalt des Webservers abgleicht.