Wechsel von WordPress zu Hugo

Datum: Sonntag, 18. Oktober 2020

Tag(s): Hugo Jekyll Wordpress

Seit 9 Jahren blogge ich mit WordPress auf diesem Blog. Auf meinem zweiten Blog, christoph.miksche.org blogge ich seit 7 Jahren mit WordPress. Zudem habe ich seit 2013 ebenfalls immer wieder eine Plattform (WebPage4.me) zum Erstellen eines eigenen WordPress-Blog betrieben und auch beruflich habe ich immer wieder WordPress Websites verwaltet.

Ich habe also eine ziemlich tiefe Beziehung mit WordPress. Allerdings habe ich in den letzten Jahren seit 2017 unter blog.m5e.de einen Blog ausschließlich mit statischen Generatoren betrieben. Hierbei war ich mit Jekyll zwar nicht so super zufrieden aber Hugo ist dafür wunderbar.

Nun will ich meinen zweiten Blog auf Hugo migrieren. Meine Hauptgründe dafür sind:

Der letzte Punkt ist der heftigste. Denn ich habe mir z.B. für automatische Updates bei Shared-Hosting Anbietern, die keine automatischen Updates via JS möglich machen, ein Skript geschrieben: https://github.com/CMiksche/wp-remote-updater

Auch für automatische Backups habe ich ein Skript geschrieben: https://git.kernel.fun/cmiksche/php-sharedhost-backup

Trotz dieser beiden Skripte bleiben aber bei Shared-Hosting-Anbietern weitere Probleme. Aktuell funktioniert z.B. der Gutenberg-Editor bei meinem zweiten Blog nicht. Auch Updates von Plugins usw. müssen dort manuell gemacht werden, weil der Hosting-Anbieter anscheinend keine JS-Verbindungen zu WordPress zulässt.

Es gibt sogar einige Anbieter wie HelioHost, welche aktiv von dem Betreiben eines WordPress-Blogs auf der eigenen Plattform abraten. (Dieser Anbieter deaktiviert anscheinend sogar Kundenaccounts, deren WordPress-Instanz zu hohe Auslastungen haben)

Bei diesem Blog (blog.wronnay.net) und auch bei WebPage4.Me habe ich dieses Problem zwar nicht, weil ich die beiden Seiten auf eigenen Servern betreibe, allerdings will ich auch noch Online-Präsenzen haben, wenn mein Server mal ausfällt und deshalb setze ich bei meinem zweiten Blog auf einen anderen Anbieter.

Diese ganzen Probleme habe ich mit einer statischen Website aber nicht. Für statische Websites gibt es unzählige kostenlose Anbieter, statische Websites sind viel schneller und leichter umzuziehen. Typischerweise ist der größte Vorteil von WordPress zwar, dass man online von überall seine Beiträge schreiben kann und auch mehrere Autoren möglich sind aber alle meine aktuellen Blogs werden nur von mir geschrieben und es gibt auch Lösungen für statische Blogs, die das gleiche möglich machen.

Bei mir kommt dann noch hinzu, das ich als Softwareentwickler seit Jahren sehr gerne Markdown schreibe und meine Projekte in Git verwalte. Dies gibt es bei statischen Generatoren „out of the Box“ und ich fühle mich in so einer Umgebung richtig wohl.

Deshalb möchte ich nun versuchen, meinen persönlichen Blog (christoph.miksche.org) auf Hugo umzuziehen. Dieser Umzug wird vermutlich etwas aufwendig sein, da ich z.B. dort auch ein custom Theme verwende, allerdings werde ich danach unabhängiger von Hosting-Anbieter sein und muss mir keine Sorgen mehr machen, dass ein Update irgendwas kaputt macht.

Das Exportieren der Daten von WordPress

Bevor man irgendwas mit Hugo macht, sollte man die Daten von WordPress exportieren.

Für Hugo gibt es z.B. WordPress Plugins wie wordpress-to-hugo-exporter, dieses hat bei meinem Hoster aber leider wegen einer Zeitüberschreitung bzw. Netzwerkfehlers nicht geklappt.

Es gibt auch den wordpress-to-jekyll-exporter{.}, den man nach dem Export dann mit dem Jekyll Importer von Hugo importieren könnte, allerdings war ich mit dem Export von dem Plugin nicht zufrieden. Oft war in den Posts z.B. noch HTML vorhanden…

Deshalb habe ich eine andere Methode gewählt: Man kann man einfach via “Werkzeuge“ > „Daten exportieren“ > „Alle Inhalte“ > „Export-Datei herunterladen“ eine XML-Datei mit den WordPress-Daten herunterladen, die man anschließend konvertieren kann.

Das Exportieren

Konvertieren in Hugo Format

Es gibt verschiedene Tools zum Konvertieren. Von WordPress-Plugins bis zu CLI-Tools. Wie schon beschrieben, habe ich keine guten Erfahrungen mit den WordPress-Plugins gemacht.

Die Ausgabe von blog2md{.} war jedoch besser, auch wenn dort keine Bilder exportiert werden und es bei manchen Posts z.B. an Absätzen fehlt.

D.h. jetzt gehen wir jeden Beitrag durch und prüfen, ob alles passt. Wir fügen Absätze hinzu, korrigieren evtl. URLs und Bilder usw…

Erstellen des Hugo-Projekts

Mit dem folgenden Befehl legt man eine neue Website mit Hugo an:

hugo new site mein-toller-blog

Nun kann man die konvertierten Dateien in den /content Ordner verschieben. Die Bilder habe ich nach /static verschoben.

Erstellen / Anpassen des Theme

Unter /themes legen wir einen neuen Ordner für unser Theme an. Als Vorlage kann man so einfache Themes wie https://github.com/J-Siu/hugo-theme-sk1 oder https://github.com/yanlinlin82/simple-style verwenden.

Anschließend musste ich mühsam mein WordPress-Theme auf die Hugo Syntax anpassen…

Fazit

Trotz der Mühe hat sich das gelohnt! Meine Seite lädt nun viel schneller und hat weniger Wartungsaufwand. In Zukunft werde ich wohl eher Hugo-Seiten als WordPress-Instanzen aufsetzen.

Kommentare

Sie können Ihr Fediverse-Konto (z. B. Mastodon und viele andere) verwenden, um auf diesen Beitrag zu antworten.