Umzug von Wordpress zu Jigsaw

Bisher lief dieser Blog ganz pragmatisch mit einem Wordpress CMS. Zu Beginn noch bei einem anderen Hosting, mit einfacher Click-Click Installation schnell eingerichtet. Allerdings war mir der Feature-Umfang für meinen Einsatzzweck schon immer sehr überladen. Wordpress ist klasse für Nutzer, die viel Content publishen wollen und wenig Programmierkenntnisse haben. Es fühlte sich aber immer so entkoppelt an und ich hatte gefühlt sehr wenig Kontrolle. Jahre später und um einige Erfahrungen reicher, war Wordpress einfach nur lästig und hat mich gehemmt, neue Posts zu schreiben.

Immer wieder schaute ich mich nach leichtgewichtigeren Ansätzen um. Sog. Static Site Generators schienen genau richtig für meine Zwecke. Die Hauptseite war schon immer nur statisches HTML in seiner Ursprungsform. Das Internet selbst, ja die aller erste Website überhaupt, bestand ursprünglich aus reinen statischen HTML-Dateien in ein paar Ordnern. Warum dann nicht auch der Blog? Davon versprech ich mir (wieder) volle Kontrolle, super schnelle Ladezeiten und maximale Sicherheit.

Folgende Anforderungen sammelte ich mit der Zeit:

• Git-basiert (Versionskontrolle und Branching, aber auch Deployment über SSH)
• Content erstellen mit Markdown in Visual Studio Code (kein Webinterface mehr)
• Komplette Kontrolle über Processing und Frontend

Und durch Zufall bin ich dann durch den Laravel-Hintergrund auf Jigsaw gestoßen. Basiertend auf PHP, mit (nur all zu bekanntem) Laravel Blade Templating, Vue.js und modernem CSS Tailwind. Content wird in Markdown mit Meta-Daten im YAML Format erstellt. Assets werden mit Laravel Mix verarbeitet, für Leute, die von Laravel kommen ein alter Schuh.

Nach einem (wirklich) kurzem Antesten war ich sofort überzeugt. Im Folgenden also nun ein Tutorial, wie man von einem Wordpress-Blog zu Jigsaw migriert:

Vorbereitungen

Wie geht`s also los? Wir erstellen uns ein neues Repository und installieren Jigsaw:

$ mkdir jackomo.net
$ cd jackomo.net
$ git init .
$ composer require tightenco/jigsaw
$ ./vendor/bin/jigsaw init blog
$ npm install
$ git add .
$ git commit -m 'Init Project'

Idealerweise kann Jigsaw mit einem Blog-Template nach der Installation eingerichtet werden:

$ ./vendor/bin/jigsaw init blog

Gleich zu Beginn füg ich mir noch folgenden Befehle zu den npm Scripts in der Datei package.json hinzu, da mir das Aufrufen aus dem Vendor Ordner zu umständlich ist:

{
  "scripts": {
    "jigsaw": "./vendor/bin/jigsaw"
  }
}

Damit kann ich (in meinen Augen auch besser zu merken) den Jigsaw-Build so anstoßen:

npm run jigsaw build

Mit Laravel Mix schnell die Assets (Javascript + CSS) kompiliert und dank Browsersync mit Hot Reload eine Live-Preview bei jedem Speichern einer Datei:

npm run watch

In meinem Lieblingseditor Visual Studio Code kann ich außerdem zwei Shells nebeneinander öffnen und beide Commandos nebeneinander nutzen. Das ist moderne Webentwicklung 😉

Übersicht

Die Ordnerstruktur von Jigsaw ist unkompliziert, man findet sich schnell zurecht:

• Output wird nach build_local bzw. build_production geschrieben
• Hauptkonfiguration in config.php (wer hätte es gedacht)
• Blade Pages in source
• Markdown Content in source/_posts
• Javascript/CSS Assets in source/_assets

Nun kann man sich ganz frei austoben, den Stil und Inhalt seiner Seite zu überarbeiten. Hier gehts zur (übrigens ausgezeichneten) Doku von Jigsaw für mehr Details.

Export von Wordpress

Wie bekommt man nun seinen alten Content migriert?

Vorab nochmal eine Warnung: Man verliert auf dem Weg der Migration (leider?) die Kommentare...für mich ist das zu verkraften.

Bestehende Posts müssen also nun ins Markdown-Format übersetzt werden. Hierfür gibt es zum Glück ein sehr nützliches (vielleicht das nützlichste überhaupt) Wordpress-Plugin für Jekyll, den sog. Jekyll Exporter. Nach der Installation einfach im Tools Menü Punkt den Export starten. Als Ergebnis erhält man ein Zip mit allen Posts als Markdown Dateien und auch alle Bilder aus dem Upload Ordner.

Import in Jigsaw

Der Import gestaltet sich sehr einfach, man muss nur wissen, wohin mit welchen Dateien:

• Den Inhalt aus dem _posts Ordner des Zips einfach in den Jigsaw Ordner source/_posts verschieben
• Den Inhalt aus dem wp-content/uploads Ordner des Zips in den Jigsaw Ordner source/assets/images/uploads verschieben

Polieren

Nach dem Import müssen wir noch zwei Details ausbessern, die noch nicht kompatibel mit Jigsaw sind:

• In allen Markdown Dateien muss im Meta-YAML layout:post ersetzt werden durch extends: _layouts.post. Einfaches Suchen->Alle Ersetzen hilft hier.
• Desweiteren können noch die Meta-Felder permalink, id und guid, sowie manche Wordpress-Theme Zusatzsfelder gelöscht werden.

Das wars, das Ergebnis sollte im Browser zu bewundern sein:

$ npm run jigsaw build
$ npm run watch

Und wenn wir dann soweit sind, dann bauen wir das Projekt für Production:

$ npm run jigsaw build production

Viel Spaß mit Jigsaw 😉

PS: Wenns ans Hosting geht, dann nicht vergessen Weiterleitungen z.b. von blog.jackomo.net/* nach jackomo.net/blog/* einzurichten...

Unter anderem motiviert durch https://tighten.co/blog/moving-from-wordpress-to-jigsaw.