Von Joomla zu Jekyll

Posted on March 27, 2017
Reading time: 5 mins

Seit längerer Zeit beobachte ich jetzt schon Static-Website Generatoren, so wie auch Jekyll einer ist. Vermutlich sogar der bekannteste. So wird er auch bei den Github Pages eingesetzt. Diese habe ich schon vor längerer Zeit bei meinem nie wirklich fertig gestellten Projekt Startpage genutzt um eine Startseite mit verschiedenen Übersichten zu bauen. Aber das ist eine andere Geschichte. Zudem habe ich damals Jekyll nicht eingesetzt, durchaus eine Überlegung wert.

Warum nun aber static Page?

Eigentlich ist es relativ einfach, dass ständige aktualisieren der CMS-Systems geht mir auf die Nerven, zudem ist es eine potentielle Sicherheitslücke sein CMS nicht kontinuierlich auf den neuesten Stand zu halten. Mit einer Statischen Seite gibt es dieses Problem nicht, da nur ein Verzeichnisbaum mit statistischen Seiten erzeugt wird.

Migration von Joomla Artikel zu Jekyll

Dieser Teil war dank des Tools “jekyll-import” kein weiteres Problem. Da ich Ruby auf Uberspace nutzen kann, hatte ich meine Artikel schnell im entsprechenden Verzeichnis auf der Platte. So gibt es bei Jekyll den Ordner -_posts in dem die exportieren Artikel aus Joomla abgelegt werden. Somit ist es einfach und man kann in wenigen Minuten den ersten Versuch starten die statische Seite zu generieren.

Migration des Templates

Bei der Umstellung auf Jekyll muss auch das Template so aufbereitet werden das daraus jede Unterseite einzeln generiert werden kann. Das HTML muss dafür in das Liquid Format gebracht werden. Hierfür muss man sich zuerst​einmal überlegen in welche Teile man den HTML Dom unterteilen möchte. Bei meiner Webseite ist dieses erst einmal ein ausgliedern des grundlegenden Aufbaus, angefangen mit den Standart Elementen head und body mit ein paar kleinen div’s welche die grundlegende Struktur vorgeben. Auch die Sidebar samt Menü habe ich ausgegliedert so das der Aufbau insgesamt in Module unterteilt ist. Diese werden von Jekyll beim Build der Seite automatisch zusammen gefügt.

Arbeitsweise von Jekyll (vereinfacht)

Das Ziel des Templates ist es erst einmal eine Vorlage für das Layout “post” zur Verfügung zu stellen. Später werden dann noch andere Seiten wie die Index.html, die Sitemap oder der RSS-Feed drum herum gebaut, diese sind aber für den ersten Schritt nicht weiter interessant. Das wichtigste sind erst einmal die einzelnen Artikel da diese den größten Teil des Blogs ausmachen. Die Grundlage bildet hier das Layout. Denn jeder Artikel in _posts wird mit dem Layout post in eine HTML Seite umgewandelt. Man kann sich den Weg des Generators so vorstellen das er für jeden Post im Ordner hingeht und auflöst was dessen Eltern Layout ist. Im Falle dieses posts ist dies [Beitrag] --> post --> default So wird also das Markdown des Artikels zu html umgewandelt und dann innerhalb von post mit der Variable content ersetzt. So wird dann post generiert und wieder mit der content variable von default ersetzt. Dabei bin ich mir sicher in welcher Reihenfolge was gemacht wird. Für das Ergebnis ist dieses aber auch egal, da das Ergebnis das selbe sein sollte. Berichtigt mich falls ich falsch liege.

Wie ich nun meine Artikel schreibe

Zunächst einmal gibt es für jeden Artikel eine eigene Datei im Ordner _posts. Die Artikel können nun in Markdown oder auch html verfasst werden. Auch die Benutzung von Liquid ist möglich um dynamisch zur Erstellung der Seite bestimmte Details einfließen zu lassen, so kann als einfachsten Beispiel die aktuelle Uhrzeit mit in die Seite einfließen, aber auch andere Dinge sind möglich. Man kann so auch die Artikel miteinander verlinken. Da die Artikel in Markdown verfasst werden können habe ich mir fürs Handy die App Writer Plus gesucht womit ich die Artikel direkt auf dem Handy schreiben kann. Die App speichert die Markdown Dateien zudem in einem Ordner auf dem Handy den ich dann nach Bedarf automatisch synchronisieren kann. So macht das Schreiben auch endlich mal wieder Spaß und man kann sich auf das eigentliche Schreiben konzentrieren.

Und die Kommentare?

Auch wenn ich aufgrund der andauernden Aktualisierungen auf ein CMS verzichten wollte habe ich mich entschlossen trotzdem ein System für Kommentare anzubieten. Meine Wahl ist auf Isso gefallen da es eine Open Source Software ist und ich möglichst alle externen Zugreife eliminieren möchte. Das einzige was ich aktuell noch drin habe sind die Fonts von Google, welche aber hoffentlich demnächst auch noch entfallen werden.

Nachteile durch die Umstellung

  • Weniger Dynamik, keine oder kaum Dynamische Möglichkeiten. Ein Forum so umzusetzen macht kein Sinn und würde auch nicht funktionieren.
  • Erstmal viel Aufwand alles richtig zusammen zu bauen.
  • Benötigt mehr Einarbeitung
  • Für unbedarfte User nicht unbedingt ohne weiteres praktikabel da es keine GUI gibt über welche man einen Artikel hinzufügt.

Vorteile durch die Umstellung

  • Man kann endlich wieder bewusst entscheiden was man genau im HTML Dom haben möchte ohne lange rumbasteln zu müssen
  • Bessere Ladezeiten, da es sich um statisches HTML handelt
  • Sicherheits-Probleme werden verringert da man sein CMS nicht mehr zeitnahe updaten muss wenn kritische Fehler auftreten
  • Das Schreiben in Markdown macht gleich viel mehr Spaß
  • Lästige Admin-Interfaces entfallen so gibt es auch kein Einfallstor für Hacker (schreiben bleibt natürlich weiterhin vorhanden, kann aber natürlich gesichert werden)
  • Man beginnt anders über Dinge nachzudenken und überlegt ob das wirklich so sein muss wie im ersten Moment gedacht oder ob es sich auch anders lösen lässt. So als einfaches Beispiel das Kontaktformular, warum muss es ein Serverseitiges Script sein welches eine Mail an mich sendet. Warum kein Mailto mit vordefiniertem Text der Grundwerte setzt?

Fazit

Für mich als nicht so häufig schreibenden Blogger der kaum dynamische Dinge einsetzt bin ich mit Jekyll sehr gut aufgestellt und habe durch die Einfachheit auch wieder Spaß am schreiben. Wer also eine relativ Statische Seite besitzt sollte sich auf jeden Fall überlegen ob es nicht doch sinnvoll ist die eigene Seite auf Static-HTML umzubauen. Durch Engines wie Jekyll bleiben selbst diese Seiten erstaunlich dynamisch. Aber eben mehr zur Generierungszeit.

Wie geht es nun weiter? In den nächsten Tagen und Wochen werden hoffentlich weitere Artikel zu Jekyll kommen sowie Artikel darüber wie ich mein Template an Jekyll angepasst habe. Genauso werden vermutlich Artikel über den Raspberry Pi als Acardeautomat kommen. Was interessiert euch mehr, schreibt es in die Kommentare :)