Kategorie-Archiv: Jekyll

WordPress to Jekyll – Migration und Fallstricke

Schon vor einiger Zeit hat Tobi gemeint, dass es doch eine ganz coole Idee wäre, das Blog webguys.de unter GitHub zu pflegen und so anderen zu erlauben, neue Blog-Beiträge per Pull-Request zu erstellen. Richtig Entwickler-Like eben. Wer seine Präsentation schon im git hat, der sollte auch seine komplette Website in einem Repo verwalten. Oder?

Nachdem ich dann vor einiger Zeit meinen Beitrag zu GitHub Pages geschrieben habe, hatte ich mich etwas näher mit Jekyll auseinander gesetzt. Dabei ist mir aufgefallen, dass genau hier wahrscheinlich die Lösung für die Idee von Tobi liegt. In diesem Beitrag möchte ich daher einmal Dokumentieren, wie gut oder schlecht das Ganze klappt. Und ob am Ende überhaupt etwas brauchbares heraus kommt. Scheinbar ist die Technologie auf dem aufsteigenden Ast – immerhin setzt Magento 2 mit der Dokumentation ebenfalls auf Jekyll. Auch hier kann man jede einzelne Seite mit einem Fork / Pull-Request bearbeiten.

Leider hat Tobi aber momentan nicht so die Lust sich in Jekyll einzuarbeiten und ist von der Technologie noch nicht so überzeugt – daher muss ich das wohl mit meinem Hausautomatisierungsportal machen. Auch nicht schlimm! Ist auch erstmal kleiner. Außerdem hat die Seite noch nicht so viele Kommentare… Die müsste man nämlich extern auslagern (z.B. zu Disqus).

Die Schwierigkeit besteht sicher darin, alles mit der gleichen Linkstruktur zu übernehmen um keine Einbußen bei Google zu haben. Ich bin gespannt – starten wir!

Grundgerüst

Im ersten Schritt habe ich einfach „View Page Source“ aufgerufen und alles in ein entsprechendes Template kopiert. Das ist natürlich auch DIE Chance, das Ganze HTML-Zeug gleich einmal aufzuräumen! Dabei fällt einem sicher das ein oder andere Verbesserungspotenzial auf! Die wenigen Bilder auf der Seite lade ich erst einmal herunter und übernehme soviel wie nur geht. Am Ende darf nirgendwo mehr die Domain auftauchen – gar nicht so einfach und erstmal eine Menge Arbeit! Puh…

Oder doch ganz anders… Also habe ich mir nach den ersten Schritten ein Bootstrap 3 Template gekauft und baue nun da drauf auf. Fühlt sich auch sauberer an und mit einem neuen Design geht auch gleich alles viel einfacher von der Hand (Soviel zur Theorie…). Das neue Theme habe ich dann erst einmal in seine Bestandteile zerlegt und ein erstes Layout mit den entsprechenden Includes zusammengeschustert.

Jekyll-Includes

So muss man nicht alles doppelt schreiben und kann die einzelnen Bestandteile immer wieder verwenden. Gerade der Header mit Logo, Navigation, etc. und der Footer sehen schließlich auf allen Seiten gleich aus. So hat man verschiedene Bausteine und kann diese zentral bearbeiten. Änderungen über die komplette Seite sind dabei also nach wie vor sehr einfach. Die Zeit, die man hier investiert, spart man am Ende auf jeden Fall. Eine saubere Struktur macht einem das Leben schonmal viel einfacher! Und gerade in Software-Projekten lege ich sehr viel Wert auf Ordnung, Wiederverwendbarkeit und Struktur.

Mit den Includes ist es mir dann relativ leicht gefallen, die folgenden Layouts zu erstellen. Ein Layout ist dabei die „fertige“ Seite, welche mit Daten gefüttert wird. Welches Layout genutzt werden soll, legt man im Kopf der einzelnen Seiten später fest.

Jekyll-Layouts

Dennoch müssen die alten Links ja weiter bestehen bleiben. Daher erstmal die ganzen Daten aus WordPress importieren. Weiterlesen…