Jekyll – der praktische Generator für statische Websites

Im November 2008 veröffentlichte Tom Preston-Werner, einer der vier Gründer der Entwickler-Plattform GitHub, den Website-Generator Jekyll unter der freien MIT-Lizenz. In Ruby geschrieben greift dieser auf ein Template-Verzeichnis zurück, das eine Reihe strukturierter und statischer Textdateien (Markdowns) verschiedener Formate enthält. Diese bestimmen einerseits das Layout, andererseits den Inhalt des Webprojekts und lassen sich zu diesem Zweck individuell anpassen. Dabei stellt der Generator keinen WYSIWYG-Editor, sondern erfordert das klassische Code-Schreiben. Hierfür wird der Content-Editor Prose empfohlen, der die Markdown-Editierung vereinfacht und für Jekyll optimiert wurde.

Bevor Veränderungen an dem Code in die Live-Version der entwickelten Webanwendung einfließen, lassen sie sich dank des Jekyll-eigenen Entwicklungsservers begutachten. Für die Umwandlung der Dateien in eine statische Website, die sich mit jedem gängigen Webserver ausliefern lässt, sorgt dann die implementierte Rendering-Engine Liquid. Diese generiert den HTML-Code automatisch im Hintergrund, wenn Änderungen an den Textdateien vorgenommen werden.

So erstellen Sie sehr schnell, sehr einfache Jekyll-Websites:

Jekyll für Blogs und andere statische Webprojekte zu nutzen, stellt aus verschiedenen Gründen eine überlegenswerte Alternative zu Content-Management-Systemen, Baukästen und Co. dar. Der wesentliche Vorteil dieser Lösung ist die Simplizität, die sowohl die Arbeit mit dem Website-Generator als auch die erstellten Projekte auszeichnet. Dank der Möglichkeit, auf eine Datenbank zu verzichten, spart man sich beispielsweise die Einrichtung und Konfiguration einer solchen komplett. Außerdem entfallen die ansonsten notwendigen Datenbankzugriffe, was sich positiv auf die Ladezeit der Website auswirkt. Zur guten Performance und einfachen Projektentwicklung und -pflege trägt auch der minimalistische Code bei, der auf die wichtigen Funktionen und Features reduziert ist und sämtliche Jekyll-Themes auszeichnet. Im Gegensatz zu klassischen CMS generiert Jekyll auslieferbares Markup direkt nach einer Änderung und nicht erst dann, wenn ein Nutzer die Seite aufruft.

Ferner überzeugt Jekyll in puncto Stabilität und Sicherheit: Da der Webserver lediglich Textdateien ausliefern muss, ist das Fehlerpotenzial bei Jekyll-Präsenzen wesentlich geringer als bei Websites, die erst durch das Zusammenspiel mehrerer verschiedener Komponenten funktionieren. Und weil keine regelmäßigen Aktualisierungen notwendig sind, sorgt das stabile Codegerüst zudem langfristig für eine hohe Verfügbarkeit der Website. Die Sicherheit resultiert derweil daraus, dass Jekyll – ohne CMS, Datenbank und Skripte mit dynamischen Elementen (PHP, JavaScript etc.) – schlichtweg kaum Angriffsfläche bietet.

Während die stark eingeschränkte Codebasis für erfahrene Entwickler keinerlei Hindernis darstellt, werden sich Neulinge mit dem Website-Generator allerdings schwertun. In der Standardausführung verfügt Jekyll über keine grafische Oberfläche, weshalb Installation und Einrichtung über die Kommandozeile erfolgen müssen. Auch in Sachen Theme-Auswahl ist Jekyll vielen CMS oder anderen Website-Entwicklungstools, für die oft hunderte oder gar tausende Design- und Layout-Vorlagen existieren, deutlich unterlegen. Gleiches gilt für den Support, der aufgrund der kleinen Community und der geringen Verbreitung eher spärlich ausfällt.

Die folgende Tabelle fasst abschließend die wichtigsten Vor- und Nachteile von Jekyll zusammen.

Zunächst benötigt man einen GitHub-Account. Rufen Sie hierfür die GitHub-Website auf und geben Sie dort eine gültige Mailadresse, Ihren Benutzernamen sowie das Passwort für Ihr künftiges Konto ein.

Im Anschluss wählen Sie den gewünschten Plan (Abonnement) aus – die kostenfreie Variante für eine unbegrenzte Anzahl öffentlicher Verzeichnisse oder die kostenpflichtige für eine unbegrenzte Anzahl privater Verzeichnisse. Abschließend können Sie optional Angaben zu ihren Programmierkenntnissen und Interessen machen. Sie erhalten von GitHub danach eine Bestätigungsmail und aktivieren Ihr Konto durch einen Klick auf den darin enthaltenen Link.

Mit dem erstellten Konto können Sie sich nun bei GitHub einloggen. Das Benutzer-Dashboard gewährt Ihnen einen Überblick über die einzelnen Verzeichnisse – liefert zu Beginn aber natürlich keinerlei Informationen. Um dies zu ändern, kreieren Sie zunächst ein neues Repository. Klicken Sie zu diesem Zweck in der oberen Benutzerleiste auf das Plus-Zeichen und wählen den Menüpunkt „New repository“ aus.

Bisher handelt es sich bei dem Verzeichnis um ein gewöhnliches GitHub-Projektverzeichnis. Um es nun in Ihr Web-Repository umzuwandeln, hab Sie verschiedene Wege:

• Sie können komplett von Null anfangen und Ihre Website ohne Vorlage mit Jekyll bauen. Informationen hierzu finden Sie in der offiziellen Dokumentation.
• Wenn Sie ein fertiges Jekyll-Theme verwenden, erleichtern Sie sich den Einstieg.
• Das Jekyll-Beispiel von Deploy Now ist ebenfalls ein guter Anfang, für eine eigene Website mit dem Static Site Generator.

Im Zuge der Theme-Auswahl werden automatisch eine Konfigurationsdatei (config.yml) sowie eine Index-Seite (index.md) erzeugt. Standardmäßig handelt es sich bei letzterer um das Vorschaubeispiel für das gewählte Jekyll-Theme, weshalb diese auch bereits im Markdown-Format vorliegt. Sowohl diese Startseite, als auch die Konfigurationsdatei können Sie bearbeiten, indem Sie die entsprechende Datei auswählen und anschließend in der Menüleiste auf das Stift-Symbol klicken.

Hat die Einrichtung wie in den vorherigen Schritten beschrieben funktioniert, können Sie mit der Gestaltung Ihrer Website bzw. Ihres Blog beginnen. Alle Dateien, die Sie zu diesem Zweck benötigen, wie beispielsweise CSS-Sheets oder JavaScript-Codes, legen Sie über die Schaltfläche „Create new file“ an. Auf diese Weise erzeugen Sie außerdem auch weitere Unterseiten für Ihr Webprojekt. Über „Upload files“ ist es zudem möglich, Dateien direkt hochzuladen. Hierfür können Sie entweder den Speicherort angeben oder die gewünschte Datei per Drag-and-Drop einfügen.

Desktop-Client

Es ist zwar möglich, eine Jekyll-Website komplett über das Web-Interface von GitHub zu verwalten. Mit dem Desktop-Client, der wie bereits erwähnt für Windows und macOS zur Verfügung steht, existiert jedoch auch eine Offline-Lösung. Haben Sie diesen noch nicht installiert, klicken Sie einfach im erstellten Repository auf den Button „Set up in Desktop“, woraufhin Sie automatisch zur Downloadseite gelangen.

Nachdem Sie den Client heruntergeladen und installiert haben, können Sie diesen unter anderem dazu nutzen, eine lokale Kopie Ihrer Webpräsenz anzufertigen. Dazu melden Sie sich einfach mit Ihrem GitHub-Login an und wählen im Startmenü den Eintrag „Clone a repository“. Sie haben nun die Möglichkeit, das Repository anzugeben, dass „geklont“ werden soll. Den Speicherort legen Sie unter „Local path“ fest.

In Ihrem Repository können Sie auf verschiedene Branches zugreifen. Hierbei handelt es sich um einzelne Abzweigungen im Projekt, die es Entwicklern erlauben, simultan am Code zu arbeiten oder sich auf bestimmte Entwicklungsbereiche gesondert zu konzentrieren. Mit IONOS Deploy Now werden die einzelnen Branches des geklonten Repositories dargestellt. Sobald Sie einen neuen Branch erstellen, wird dieser automatisch mittels Deploy Now dargestellt. So können Sie jederzeit Ihr gesamtes Webprojekt sowie den Fortschritt innerhalb der einzelnen Entwicklungszweige im Auge behalten.