Anmelden
Der Wechsel von WordPress zu Hugo
Ich habe nun endlich eine Mammutaufgabe für mich erledigt. Den Wechseln von WordPress hin zu Hugo. Ich war mir hier der große der Aufgabe bewusst, aber dass er so schwer werden würde, hätte ich nicht gedacht. Ich hatte den Wechsel schon einmal vor 15 Jahren vorgenommen, aber aus Gründen der Faulheit dann doch wieder zu WordPress gewechselt. Hier möchte ich Euch an meiner Reise teilhaben lassen, vielleicht hilft euch der eine, oder auch andere Hinweis.
Grundlegende Informationen
Bei Hugo handelt es sich um einen Generator für statische Webseiten, welcher aus Textdateien im Markdownformat HTML Seiten erstellt. Anhand eines Grundgerüsts, sogenannte Templates, lassen sich Webseiten generieren.
Dies bedeutet ich muss von einem CMS ( Content Management System), welches die Webseite aus den Daten einer SQL-Datenbank mit Hilfe von PHP generiert in ein neues Format bringen. Hierbei spielt auch noch der Einsatz von Erweiterungen, welche im CMS installiert werden können, eine große Rolle. Dies haben Einfluss auf den Inhalt, wie zum Beispiel Text, Bilder und Code, welcher sich in den einzelnen Seiten, oder auch Blogposts befindet. Auch haben diese Erweiterungen Einfluss auf das Aussehen der Webseite, in meinem fall dem Blog, welchen ich später nachbilden muss.
Da ich hier sehr viele Erweiterungen, Plugins, für WordPress im Einsatz hatte, war für mich erst einmal ein Punkt für das Deployments eines neuen Blog sehr wichtig:
Teil 1: Das Ziel ein schlankes WordPress als Basis
Sind wir ehrlich, ich habe mich doch sehr verhaltend in dem letzten 3-4 Jahre verhalten, wenn es um das schreiben von Artikeln ging. Auch schon vorher waren die Kommentare nicht wirklich en masse, sodaß ich sagen würde, ich brauche unbedingt eine Kommentarfunktion. Da die abgegeben Kommentare nicht meine eigenen sind, gehören diese auch nicht mir. Somit habe ich mich entschieden diese Kommentare zu behalten und für später zu erhalten.
Mit dieser Entscheidung konnte ich schon 3 Plugins aus meiner Installation verbannen. Eines gegen Spamschutz, eines für die datengerechte Anfrage für das Informieren über neue Kommentare und das andere für die Vorschau während des Kommentarschreibens.
Ich habe dann als weitere Plugins für die Entfernung das Einbinden von Gists von Github, sowie ein datenschutzgerechtes Einbinden von Youtubevideos vorgesehen. Hierzu musste ich alle Blogposts umschreiben in welchen die Kürzel der Plugin vorgekommen sind. Und den Code dort direkt einfügen. Ein Link zu dem Gist wurde auch hinzugefügt.
Mit dem weiteren Schritt, die Entfernung eines Gallerieplugins und einem Plugin, welches bei einem Mausklick das Originalbild anzeigt, hatte ich schon sehr viel von dem Code bereinigt. Mein WordPressblog war immer noch fähig die Artikel in umgeänderter Form anzuzeigen. Das ist nur die halbe Wahrheit, da ja das Gallerieplugin fehlte. Aber so viele Gallerien mit Bilder hatte ich nicht und ich verlinke lieber auf ein eigenes Fotoblog, eingebunden im Fediverse, als weiterhin die eierlegende Wollmilchsau zu betreuen.
Teil 2: Einfache Transformation?
Es war ein ewiges hin und her, sowie ein Abwiegen zwischen einem Plugin, oder einem selbstgeschriebenem Script.
Auch hier hatte ich sehr viele Fragen offen. Viele Fragen handelten davon, ob ich alle Informationen, inklusive der Formatierungen, aus den Artikeln übernehmen kann. Mir waren die die Kommentare, die enthaltenen Bilder, inklusive der Bildbeschreibungen, sehr wichtig. Ich fragte mich, ob die SEO Informationen hoffentlich auch exportiert, oder hatte ich diese umsonst jahrelang eingegeben? Wenn Ja, wo landen diese. Das Internet brachte hier leider nicht alle Informationen. Aber da es zum Glück einige Plugins für den Export in das Format markdown gibt, war ich guter Dinge.
Aber mir stellte sich auch noch eine sehr interessante Frage. Können über 1350 Blogposts aus zwei Jahrzehnten exportiert werden, oder stoße ich bei dem Webspace von Netcup an die Grenzen der Ausführungszeit für PHP-Scripte?
Ich habe mich Schlussendlich für das Plugin WordPress to Hugo Exporter entschieden und dies via Shell in meinem Wordpress installiert. Nach der Installation hatte ich in meinem Webroot des Webspace das Verzeichnis hugo_export erstellt und den Export angestossen.
cd httpdocs/got/wp-content/plugins/wordpress-to-hugo-exporter/
php hugo-export-cli.php /httpdocs/hugo_export/Dieser Befehl zog sich dann eine Weile hin und ich hatte bei dem ersten Mal Angst dass jener ohne eine Fehlermeldung abgebrochen war. Heraus kam am Ende die Datei wp-hugo.zip mit einer Größe von 61GB. Ich hatte vergessen den Optionsparameter –no-zip mitzugeben. Ich denke das Komprimieren war einer der Gründe für die Dauer des Exports. Der andere war definitiv jener, welcher das Verzeichnis des WordPress-Plugins BackWPup für das automatische Backup betraf. Dieses Verzeichnis ist nämlich auch mit in das Backup eingeflossen. Natürlich mit den darin befindlichen letzten erstellten 5 Backups. Nach dem Dekomprimieren und dem Löschen des Verzeichnisses backwpup nur noch 1,5GB an wirklichen Nutzdaten übrig. Wir reden nicht darüber.
Teil 3: Exportierte Daten
In meinem jugendlichen Leichtsinn dachte ich dass der Befehl hugo server doch schon ein rendern des Blogs ergibt. Mein Verdacht bestätigt sich, Page not found wird im Browser bei er lokalen Adresse http://localhost:1313/ angezeigt.
Eine Auflistung des Verzeichnisses ergab dann folgende Struktur:
❯ ls
about config.yaml impressum index.md public
blog homepage impressumalt posts wp-contentUnd der Blick in die config.yaml war auch sehr ernüchternd:
❯ cat config.yaml
url: https://got-tty.org
name: Got tty
description: It is time for ...In dem Verzeichnis posts sind alle posts vorhanden und in wp-content alle meine Bilder. Danke WordPress in jeder erforderlichen Auflösung. Hierzu später mehr.
Ich habe mir einmal den ältesten Post angeschaut und war doch über die Syntax im Headerbereich verwundert:
---
title: Blog ist installiert
author: Christian M. Grube
type: post
date: 2006-11-24T18:22:06+00:00
url: /blog-ist-installiert/
explore_page_layout:
- default_layout
iawmlf_links:
- 'a:0:{}'
categories:
- Software
tags:
- Blog
---
Nur muss ich, wie ich sehe mal massiv an dem Design arbeiten.
Hoffe nicht , dass es ein Fass ohne Boden wird ;)
Aber trotzdem freue ich mich insgeheim auf die Arbeit, muss ich zugeben, denke aber erst, dass ich am Mittwoch oder Donnerstag die Herausforderung annehmen kann, da ich leider bis definitiv Mittwoch bei einem großen schwäbischen Autokonzern mein Brot verdingen muss.
Aber somit wünsche ich noch viel Spaß mir und Euch und harren wir der Dinge die da noch kommen.%Über den Schreibstil lässt sich streiten 😉, aber über einige Anweisung/Parameter nicht. Die Anweisung iawmlf_links sagt mir leider nichts und auch das explore_page_layout ist mir nicht bekannt.
Ich habe exemplarische dann einmal diesen Post in die Form gebracht in welche er sein sollte:
---
title: Blog ist installiert
author: Christian M. Grube
date: 2006-11-24T18:22:06+00:00
slug: blog-ist-installiert
url: /blog-ist-installiert/
categories:
- Software
tags:
- Blog
---
Nur muss ich, wie ich sehe mal massiv an dem Design arbeiten.
Hoffe nicht , dass es ein Fass ohne Boden wird ;)
Aber trotzdem freue ich mich insgeheim auf die Arbeit, muss ich zugeben, denke aber erst, dass ich am Mittwoch oder Donnerstag die Herausforderung annehmen kann, da ich leider bis definitiv Mittwoch bei einem großen schwäbischen Autokonzern mein Brot verdingen muss.
Aber somit wünsche ich noch viel Spaß mir und Euch und harren wir der Dinge die da noch kommen.%Dies ist das Minimum welches ich mich jedem Post erreichen muss.
Somit habe ich nach einigen Abfragen auf der Kommandzeile die zu löschenden Artefakte eingegrenzt und zum löschen freigegeben.
Hier eine kurze Liste der nicht mehr nötigen WordPresshinterlassenschaften:
- iawmlf_links
- ample_page_layout
- tc-thumb-fld
- explore_page_layout
- type
- s_gallery_properties
- enclosure
- format
Des Weiteren habe ich alle vorkommen wp-content/uploads/ in /uploads/ geändert, versteckte WP Plugin DIVs entfernt ( diese gibt es nicht in meiner CSS unter Hugo) und fehlerhafte Datum- und EntwurfsURLs gefixt. Letzte haben den Buildprozess von hugo gestört.
Nach einem durchsuchen nach dem Kürzel wp- habe ich dann sehr viele Hinterlassenschaften von Wordpress gefunden. Jedes wp-block-{Gallery,quote,group,video,etc.} und jedes vorkommen der foogallery-{link, Lightbox, foobox, etc.} wurde gelöscht bzw. angepasst.
Hiernach habe ich mir dann noch mit einem Pythonscript geholfen, welches mir WP-Markup/HTML in sauberes Markdown/HTML umwandeln kann.
Nach einem erstellen meiner eigenen hugo.toml und dem Implementieren von fixIT als Theme hatte dann meinen ersten funktionierenden und grauenhaft aussehenden Build meines Blogs. Und dann wollte ich erst einmal nicht mehr.
Teil 4: Lassen wir es einmal gut aussehen und dann sehen wir weiter
Ich bin ganz offen. Ich habe erst einmal mein komplettes Projekt hinterfragt und mir gesagt, komm lass das WordPress, schreibe ab und zu. Das Leben geht weiter. Man hüpft dann von einem Projekt zum anderen.
Geht es mit Jekyll besser? Hier gibt es ja noch dieses und jenes Theme, welches vielleicht die komplette Sache besser aussehen lässt. Ich habe versucht mich zu selbst zu überreden und einen Funken Hoffnung zu finden. Ein guten Weg zum nächsten Plateau. Leider gab es diesen nicht und ich habe das ganze Projekt für gute 4 Wochen liegen gelassen.
Aber irgendwann bin ich dann ein wenig genervt und als Entspannung neben meiner Arbeit brauche ich auch etwas Ablenkung. Dies habe ich mir dann mit dem Projekt “Wir machen einmal Design” geholt. Wenn ich nun die Aufstellung so lesen, ich glaube ich hätte niemals damit angefangen. Das Durchsehen der git-Logs ist hier sehr Aufschlussreich gewesen. Aber ich habe in den Commitnachrichten nicht geflucht. Das ist eher eine Angelegenheit bei dem Schreiben von ansible playbooks und der YAML-Formatierung. YAML bedeutet auch “Yelling At My Laptop” 😆
Teil 4.1 eine kleine Aufstellung
-
Ich habe das komplette Farbschema passend zu meinem alten Blog welches mit GeneratePress betrieben wurde angepasst.
-
Die Schriftart wurde geändert, sowie auch die Schriftgrößen entsprechend dem alten Blog angepasst
-
Ich habe teilweise die Fontawesome Icons entfernt. Als Beispiel, bei dem Autor und Tag als Meta, ersetzt wurden jene mit einem Veröffentlicht am $DATUM
-
Ich habe das Menü überarbeitet und neue nicht vorhandene Punkte hinzugefügt. Es fehlt noch das Untermenü für die Kategorie
-
Die Paginations hatte einen Bug und es gab die Auflistung 1 2 3 … … … … … … 133. Diese habe ich in 1 2 3 … 133 bzw. 1 … 48 49 50 51 52 … 133 geändert.
-
Im Breadcrumb Stand “Startseite / Artikel / $ARTIKELTITEL”, dies habe ich in “Startseite / $KATEGORIEKLICKBAR / $ARTIKELTITEL” geändert.
-
In der Übersichtsseite stand unter jedem Artikel ein “Weiterlesen”. Hier habe ich einen Check auf den Tag gesetzt, sodaß nur noch “Weiterlesen” bei “truncated” Posts erscheint.
-
Ich habe das Footerlayout angepasst, sodaß es aussieht wie in dem alten Blog.
-
Auf der Übersichtsseite gab es eine komische Trennlinie, welche ich mit einer eigenen ersetzt habe.
-
Ich habe die Tags aus dem Footer entfernt und diese neben den Autorennamen in den Singlepost gesetzt. Über die Fontawesomeicons bin ich mir hier noch im uneins. Schön zu klicken und unterscheiden, aber ich habe das Gefühl das Blog sei im Moment überfüllt im Design.
-
Der Singlepostfooter musste enagepasst werden. Da sind ja die Tags entfernt worden, siehe oben. “Zurueck | Startseite” mussten zentriert werden.
-
Es gab eine komische Sidebar auf der linken Seite, welche ich für die “Ähnlichen Inhalte” nicht haben wollte, denn jene sind schon unter dem Artikel.
-
An den Footer musste ich nochmals ran. Hier fehlte die Vorstellung meiner Person und der Hinweis auf das OSBN.
-
Des weitern habe ich den Link zu Hugo und FixIT angepasst und diesen komischen Zähler deaktiviert.
-
Eigentlich hab eich noch die Lightbox aktiviert. Für eine Vollansicht des Bildes bei klick. Aber sie funktioniert scheinbar noch nicht. Hier muss ich mir nochmals den Code anschauen
-
Die Codeboxen waren immer zugeklappt und mussten manuell geöffnet werden. Ich habe ein maxShownLines -1 gesetzt, aber leider ist hier immer noch nicht die komplette Box zu sehen. Eine weitere Baustelle,
-
Der Darkmode ist per Knopfdruck vorhanden, fehlt aber noch die Automatisierung. Offener Punkt.
Teil 5: 50% geschafft, oder?
Hugo erstellt aus dem markdown der Blogposts, der Layouts und Templates endlich eine Seite. Aber hier fehlt natürlich noch etwas essentielles. Die Suche. Diese habe ich mit Hilfe von hugo-fuse-search implementiert. Diese findet sich oben im Header rechts neben dem Menü.
Wenn ich via hugo server -D meine Entwürfe sehen wollte kam es zu einem absoluten Chaos, welches ich noch nicht lösen konnte. Es wurde jedes mal nur ein einzelner Post aus den Entwürfen angezeigt und keine der bis jetzt veröffentlichten. Faszinierend war, es war jedesmal ein einzelner anderer Entwurf. Somit habe ich 136 Entwürfe in einen eigenen zu ignorierenden Ordner verschoben. Diese Artikel bekomme ich mit allen anderen angezeigt, wenn ich den Entwurfsmodus von hugo nutze. Ich werde mir auf jeden Fall mal die anderen Entwürfe anschauen. Vielleicht finde ich hier noch die eine, oder andere Perle.
Ich habe dann noch via Script in jedem Post nachgeschaut, welches Bild wirklich genutzt wird und die nichtgenutzten in ein eigenes Verzeichnis zur Sicherheit verschoben.
Bisheriges Fazit
Das war einiges. Ich kann mir aber sicher sein, dass ich nur einmal die Arbeit in die Entwicklung stecke und eine sehr lange Zeit davon zehren kann. Ich bin unheimlich froh, dass ich hier für das Deployment git nutzen kann und die Dateien dann via rclone auf den Netcup Webspace schiebe. Leider kann ich hier nicht mit Checksummen arbeiten und nutze hier die Dateigröße für den Vergleich. Ein weiterer User für SSH lässt sich bei Netcup für den Webspace nicht anlegen.
Es ist noch nicht alles so in der Form wie ich es haben möchte. Aber ein grundlegender Anfang ist nun geschafft und ich bin ein Stück Sicherheitsdruck im Nacken mit der Abkehr von WordPress losgeworden. Nicht dass ich WordPress per se für unsicher halte, aber nach einem 10 Stundentag in der IT möchte ich nicht noch zuhause Deployment und Serversicherheit betreiben. Hierfür habe ich meinen Webspace bei Netcup inklusive Mailserver und meine Ruhe. Und so etwas ist manchmal unbezahlbar.
Ich Danke Euch für das lesen des langen Textes und hoffe Ihr habt einen kleinen Einblick bekommen.
