Migration zu Hugo

Migration zu Hugo

Seit langer Zeit habe ich hier keinen neuen Beitrag mehr veröffentlicht. Was im Gegensatz zur Veröffentlichungsfrequenz neuer Artikel jedoch enorm gestiegen ist, sind die Anmeldeversuche an der hiesigen WordPress-Instanz. WordPress und die wenigen installierten Addons aktualisieren sich zwar automatisch, aber es bleibt immer das ungute Gefühl, irgendwann doch von einer Lücke im PHP-Code oder gar im PHP-Interpreter betroffen zu sein und sich dann zumindest Arbeit und evtl. auch Ärger einzuhandeln.

So geht das hier in einer Tour:

Jan 28 15:55:41 web WordPress[223248]: Authentication attempt for unknown user admin from 162.0.217.104
Jan 28 15:57:03 web WordPress[223248]: Authentication attempt for unknown user admin from 170.64.145.120
Jan 28 15:57:15 web WordPress[223249]: Authentication failure for (redacted) from 160.251.151.81
Jan 28 15:57:26 web WordPress[223249]: Authentication failure for (redacted) from 192.248.95.74
Jan 28 15:57:37 web WordPress[223248]: Authentication failure for (redacted) from 212.227.171.173
Jan 28 15:57:50 web WordPress[223014]: Authentication failure for (redacted) from 85.10.158.214
Jan 28 15:58:11 web WordPress[223248]: Authentication attempt for unknown user admin from 134.119.0.24
Jan 28 15:58:20 web WordPress[223249]: Authentication attempt for unknown user Admin from 91.134.248.249
Jan 28 15:58:27 web WordPress[223014]: Authentication failure for (redacted) from 217.182.176.140
Jan 29 00:19:52 web wordpress[223014]: Authentication attempt for unknown user crypto7CaM from 80.92.206.252
Jan 29 05:03:13 web wordpress[223014]: XML-RPC authentication failure for gast from 143.198.91.39
Jan 29 05:03:13 web wordpress[223248]: XML-RPC authentication failure for gast from 143.198.91.39
Jan 29 06:51:20 web wordpress[223248]: XML-RPC authentication attempt for unknown user admin from 2a01:4f8:121:1ee::2
Jan 29 07:22:07 web wordpress[223249]: XML-RPC authentication attempt for unknown user Admin from 159.69.220.32
Jan 29 07:29:40 web wordpress[223014]: XML-RPC authentication attempt for unknown user admin from 212.80.19.3
Jan 29 08:49:05 web wordpress[223248]: XML-RPC authentication failure for gast from 217.182.200.53
Jan 29 09:08:16 web wordpress[258284]: XML-RPC authentication failure for gast from 198.54.126.2

Daher hatte ich schon lange vor, das Blog auf statische Webseiten umzustellen. Zur Auslieferung der Webseiten ist dann kein PHP mehr erforderlich, es müssen keine Verrenkungen mehr gemacht werden, die die dynamisch erstellten Seiten irgendwie zwischenspeichern, um sie schnell an den Besucher oder die Suchmaschinen auszuliefern. Auch gibt es dann keine Anmeldung über irgendwelche PHP-Formulare oder die andauernd von der ganzen Welt ausprobierte Anmeldung über das WordPress-XML-RPC-Interface mehr. Allein im Januar 2025 wurden an meinem kleinen WordPress-Blog über 7000 unterschiedliche IPs festgestellt, welche Anmeldeversucheversuche unternahmen. Schon lange blockiere ich diese IPs automatisch mit fail2ban für zwei Monate.

Der Umstieg war also beschlossene Sache, nun galt es erst mal zu lesen, was es alles für Generatoren gibt. Meine Wahl für einen Generator zum Erzeugen statischer Webseiten fiel auf Hugo. Ich hatte gelesen, dass Hugo im Vergleich zu anderen Generatoren um einiges schneller sein sollte. Außerdem konnte ich bei jemandem abschauen, der diese Umstellung vor einiger Zeit mit seinem Blog durchgeführt hat, sein gesamtes Blog auf github hostet und den Sourcecode seines Blogs in einem öffentlichen Repository zur Verfügung stellt. An dieser Stelle: herzlichen Dank an isotopp!

Erste Schritte mit Hugo

Wie häufig bei größeren Projekten im Selbststudium ist der Anfang holprig. Meine bevorzugte Linux-Distribution enthält Hugo nur in einer alten Version, mit der nicht einmal das Quickstart-Tutorial von der Hugo-Webseite durchgeführt werden kann. Zähneknirschend installiert man dann also erstmal ein Paket, um dessen Update man sich ab da selber kümmern muss. Die anschließenden Schritte im Quickstart-Tutorial waren einfach und verständlich. Danach hat man eine Webseite mit zwei oder drei Seiten. Und was nun?

Inhalt muss her

Inhalt war vorhanden, im alten WordPress-Blog. Glücklicherweise gibt es bei Hugo eine kleine Migrationsanleitung nebst der Empfehlungen für ein paar Programme, welche die alten Artikel aus WordPress exportieren und in ein für Hugo geeignetes Format umwandeln. Am besten hat bei mir der wordpress-to-hugo-exporter funktioniert. Mit diesem Exporter können die bestehenden Artikel-URLs beibehalten werden, die bereits bei Suchmaschinen bekannt oder evtl. auch auf anderen Seiten verlinkt sind. Nach dem Aktivieren des Plugins war der Export per CLI schnell erledigt.

Die Artikel werden als Markdown exportiert und in ein ZIP-Archiv zusammengepackt. Damit war auch gleich festgelegt, in welcher Auszeichnungssprache ich weiterhin hier unterwegs sein werde: Markdown. Hugo verwendet standardmäßig den Prozessor Goldmark zur Verarbeitung der Markdown-Dateien welcher ein paar Features zur Textauszeichnung hinzufügt, so z.B. durchgestrichenen Text: durchgestrichen, was es in purem Markdown nicht gibt. Das hätte ich mal früher wissen sollen, dann hätten die ganzen <del> ... </del>-Passagen aus den alten Texten überlebt. Nun ja, nun sind sie weg und ich verspüre wenig Motivation, eh nicht mehr gültige Aussagen in alte Texte wieder einzubauen.

Den ausgepackten Inhalt verfüttert man dann direkt an Hugo und sieht erst mal jede Menge Warnungen durch die Konsole huschen.

HTML und andere Überbleibsel

Ein Blick in die Markdown-Texte offenbarte Schlimmes! Das Blog ist nun schon viele Jahre gewachsen, lief auf mehreren vollkommen unterschiedlichen CMS und hat selbst mit WordPress die Fahrt vom Legacy-Editor zu Gutenberg mitgemacht. Das dadurch entstandene Wirrwarr konnte kein noch so guter Exporter automatisch beheben, viele Artikel waren Kraut und Rüben mit haufenweise übrig gebliebenem HTML und gespickt mit NBSPs.

übrig gebliebene NBSPs

übrig gebliebene NBSPs

grep, sed und awk sind gute Freunde, die diesen Wildwuchs zähmen konnten. Leider kamen auch ein paar Stunden im Editor hinzu, da einige Änderungen nicht gut zu automatisieren waren.

Bei den Medien, meinstens also Bildern, war es nicht anders. Über die Jahre immer mal wieder wechselnde WordPress-Plugins und -Themen hatten ihre Spuren hinterlassen und Thumbnails in allen möglichen Größen angelegt.

$ ls
software_1511338364-1024x682.jpg                software_1511338364-e1511338597460-960x225.jpg
software_1511338364-150x150.jpg                 software_1511338364-e1511338597460.jpg
software_1511338364-300x200.jpg                 software_1511338364.jpg
software_1511338364-768x512.jpg                 Windows-Error-Reporting-ausgeschaltet-150x150.png
software_1511338364-e1511338424962.jpg          Windows-Error-Reporting-ausgeschaltet-300x225.png
software_1511338364-e1511338597460-150x150.jpg  Windows-Error-Reporting-ausgeschaltet-768x576.png
software_1511338364-e1511338597460-300x70.jpg   Windows-Error-Reporting-ausgeschaltet.png
software_1511338364-e1511338597460-768x180.jpg

Außerdem habe ich den Verdacht, dass ein Plugin zur Optimierung von Grafiken die Dateien mit einer eindeutigen Nummer versehen hat, was sofort die Alarmglocken aus der Tracking-Ecke schrillen ließ und ebenfalls bereinigt werden wollte.

Nachdem die Texte dann bereinigt waren, ging es um die Frage, wie der Inhalt denn nun präsentiert werden soll. Hier war erst einmal wieder das Studium der Hugo-Dokumentation erforderlich, um herauszubekommen, welche Features Hugo bereits mitbringt. Klar war auch, dass das Thema nicht von mir per Hand geschrieben werden konnte. Dazu kenne ich mich in der von Hugo verwendeten Skriptsprache bisher zu wenig aus.

Thema ist Thema

Glücklicherweise ist auf der Hugo-Webseite eine Auswahl an Themes verlinkt. Viele davon stellen eine Demo-Seite für den ersten Eindruck bereit. Anfangs habe ich mit dem Thema ananke experimentiert, welches auch im Hugo-Quickstart-Tutorial verwendet wird. Kurze Zeit später aber stellte ich fest, dass doch viele Features bzw. Darstellungsmöglichkeiten fehlen, die ich gerne gehabt hätte. Kris verwendet ein Bootstrap-Theme, welches allerdings auch einen ganzen Rattenschwanz von Node-Modulen hinter sich herzieht. Diesen Schuh wollte ich mir nicht anziehen und bin bei dem Thema Beautiful Hugo gelandet. Nach ein paar kleinen Anpassungen und dem Einspielen der Grafiken für Header, Seitenkopf und den Artikeln selbst war schon einmal ein Grundstein gelegt.

Viele kleine Baustellen

Bildergallerien

Was mir überhaupt nicht klar war, wie man in Hugo eine Bildergallerie darstellt oder einfach ein Bild beim Mausklick in einer Lightbox öffnet. Diese Funktion schien auch jedes Thema anders auf eigene Weise zu machen. Die Google-Suche nach einer Bildergalerie förderte ein paar Treffer zutage, die nach der Installation aber alle nicht so recht funktionieren wollten. Erst viel später bemerkte ich, dass Hugo selbst gallery und figure beherrscht und mein ausgewähltes Theme diese beiden überschreibt, um sie an das eigene Layout anzupassen.

Beautiful Hugo - Photoswipe Gallery

Beautiful Hugo - Photoswipe Gallery

Jetzt mussten alle Bild-Links in den Markdown-Dateien auf figure umgeschrieben werden. Nächster Auftritt von grep, sed und awk. Die wenigen alten Gallerien, gerade einmal sechs Stück, habe ich manuell angepasst.

Kontakt

Da ist es, ein Problem statischer Seiten: es gibt keine “Aktionsseiten”. Nirgendwo läuft irgendetwas, was Formulardaten entgegen nehmen und Kontaktnachrichten per E-Mail verschicken könnte. Mir ist bisher kein europäischer Dienst bekannt, der so einen Dienst innerhalb der EU GDPDR-konform anbietet. Eure Kontaktanfragen möchte ich keinem Dienst von über dem Teich zum vielleicht ewigen Speichern frei Haus liefern. Wer schon aus dem ausschließlichen Konsum von Social-Media ausgebrochen ist und Blogs ließt, kennt vielleicht noch eine ganz alte und immernoch funktionierende Methode zur Kontaktaufnahme: E-Mail. Kennste nicht? Guckste hier oder hier oder z.B. auch hier. Meine E-Mail-Adresse steht im Impressum.

Sonstige Anpassungen

Zusätzlich sind noch viele kleine Schräubchen zu drehen wie für das Datumsformat, die Sprache, die Verzeichnisstruktur, was wo liegen soll und und und. Erfreulicherweise lassen sich viele Einstellungen in einer einzigen Datei im Hauptverzeichnis der Website-Sourcen festlegen.

Eine Sache habe ich im Content geändert. Die vor vielen Jahren moderne Flut an Smileys wurde ausgemerzt. Die Dinger kann man im Chat oder in sozialen Netzwerken verwenden, bei Beschreibungen haben sie meiner Meinung nach weniger zu suchen.

Ebenfalls wurden einige Fundstücke gelöscht und werden jetzt mit einem HTTP-Code 410 beantwortet, die schon damals eher grenzwertig waren.

Präsentation

Eine erste, präsentierfähige Version ist nun fertig. Bisher noch keine Gedanken habe ich mir über eine Versionierung gemacht. Hier kommt noch einiges an Arbeit auf mich zu und evtl. wird es dann auch wieder eine Kommentarfunktion hier geben. Ich denke aber mal, das erste Ergebnis kann sich schon sehen lassen.

Hugo  CMS  WordPress  OSS 

Siehe auch