Jekyll erzeugt aus Markdown- oder HTML-Dokumenten eine statische Website. Es eignet sich vor allem für Blogs und sich selten ändernde Internet-Auftritte.

Jekyll [1] nimmt einen Ordner mit Texten entgegen und konvertiert die Inhalte anhand einer Designvorlage in eine passende Website. Das Ergebnis müssen Sie lediglich noch auf Ihren Server hochladen. Darüber hinaus unterstützt das Werkzeug Sie aktiv bei der Pflege eines Blogs. Haben Sie bereits mit WordPress gearbeitet, dürften Ihnen sogar einige Konzepte vertraut vorkommen. Sie können Ihre Texte mit Markdown oder HTML-Tags anreichern und so etwa Überschriften als solche kennzeichnen oder Wörter kursiv setzen. Eine maßgeschneiderte Designvorlage entsteht zudem schnell in HTML und CSS.

Aufgrund seiner Arbeitsweise zählt Jekyll zu den sogenannten statischen Website-Generatoren. Damit benötigen Sie auf Ihrem Webserver weder eine Datenbank noch eine Skriptsprache wie PHP. Das sorgt für einen äußerst schnellen und sicheren Webauftritt: Eine statische Webseite lässt sich nicht ohne Weiteres hacken. Im Gegenzug müssen Sie bei Änderungen an Ihrem Auftritt die Seiten von Jekyll erneut erzeugen lassen und die resultierende Webseite erneut auf den Webserver übertragen. Zudem müssen Sie bei interaktiven Elementen wie etwa einer Kommentarfunktion auf externe Anbieter wie Disqus zurückgreifen.

Kickstart

Jekyll offerieren die meisten großen Distributionen über ihre Software-Verwaltung. Unter Ubuntu genügt zur Installation beispielsweise ein sudo apt install jekyll. Da Jekyll in der Programmiersprache Ruby implementiert ist, steckt das Werkzeug bei einigen Distributionen in einem Paket, dessen Name mit ruby beginnt.

Finden Sie Jekyll im Paketmanager nicht, installieren Sie Ruby (ab Version 2.4), das zugehörige Entwicklerpaket Ruby Gems sowie Make und GCC (Listing 1, erste Zeile). Anschließend richten Sie Jekyll via Ruby Gems ein (zweite Zeile). Das befördert auch gleichzeitig die neueste Version des Werkzeugs auf die Festplatte.

$ sudo apt install ruby-full build-essential
$ sudo gem install bundler jekyll

Sobald Jekyll einsatzbereit ist, müssen Sie für Ihre Website ein neues Arbeitsverzeichnis erstellen. Im Folgenden soll als kleines Beispiel eine Seite mit Linux-Nachrichten entstehen, ein passender Ordnername wäre etwa linuxfacts/. Als Nächstes muss eine Startseite her. Für den Anfang soll sie nur den kurzen Begrüßungstext aus Listing 2 enthalten.

---
title:  "Linux News"
---
Auf dieser Seite finden Sie aktuelle Nachrichten aus der Linux-Welt.

Ganz am Anfang finden Sie einen Abschnitt, den jeweils drei Minuszeichen einrahmen. Dieses sogenannte Front Matter liefert Jekyll ein paar Informationen über die Seite. In Listing 1 folgt hinter title lediglich der Titel beziehungsweise die Überschrift der Seite in Anführungszeichen. Die Notation folgt dabei dem sogenannten YAML-Format. Das Front Matter müssen Sie am Anfang jeder Seite und in jedem Blog-Post hinterlegen.

Häufig möchte man im Text einzelne Wörter fett drucken, Links einbauen oder andere Auszeichnungen vornehmen. Unter Jekyll nutzen Sie dazu wahlweise den Markdown-Standard oder aber herkömmliche HTML-Tags. Je nachdem, für welche Variante Sie sich entscheiden, müssen Sie den Seiteninhalt in einer Textdatei mit der Endung .md oder .html speichern. Jekyll baut dann daraus gleich automatisch eine richtige Webseite. Im Beispiel speichern Sie Listing 2 in der Datei index.md in Ihrem Arbeitsverzeichnis (Abbildung 1).

Abbildung 1: In diesen Verzeichnissen sortiert Jekyll die Bestandteile einer Website. Beachten Sie die Unterstriche von einigen Verzeichnissen.

Den Dateinamen dürfen Sie prinzipiell frei wählen, er bildet jedoch später die Basis für die zugehörige Internet-Adresse. Die in index.md gespeicherten Texte erreichen Sie beispielsweise später unter http://example.com/index.html. Das ist übrigens auch genau die Seite, die der Browser als Erstes abruft, sobald ein Benutzer die URL http://example.com im Webbrowser ansteuert.

Bauhaus

Lassen Sie jetzt Jekyll die fertige Website erzeugen. Dazu wechseln Sie auf der Kommandozeile ins Verzeichnis linuxfacts/ und rufen dort jekyll build auf. Die aus Ihrem Text erzeugte Website finden Sie anschließend im Unterordner _site/. Dort können Sie die HTML-Datei bereits mit einem Browser öffnen und das Ergebnis überprüfen. Den Inhalt dieses Unterordners laden Sie später auf Ihren Webserver hoch.

Noch bequemer geht es mit dem Befehl jekyll serve (Abbildung 2). Damit erstellt Jekyll zunächst wie mit jekyll build die Website, startet aber dann einen simplen Webserver. Rufen Sie danach mit dem Browser die Adresse http://localhost:4000 auf, sehen Sie die unter _site/ erzeugte Website (Abbildung 3).

Abbildung 2: Der in Jekyll eingebaute Webserver hilft ausschließlich bei der Entwicklung. Er ist nicht dazu gedacht, die fertige Seite auf einem produktiven Server auszuliefern.

Hängen Sie den Parameter --livereload an jekyll serve an, überwacht Jekyll Ihre Texte. Bei einer Änderung generiert das Werkzeug dann automatisch die Website neu und weist gleichzeitig den Browser an, die Seite zu aktualisieren. So verfolgen Sie die Auswirkungen Ihrer Arbeit direkt im Webbrowser. In jedem Fall beenden Sie den Webserver mit [Strg]+[C].

Abbildung 3: Jekyll hat hier aus dem Listing 2 eine vollständige, wenn auch minimale Internet-Seite generiert.

Bauplan

Das Ergebnis sieht im Moment noch recht karg und eintönig aus. Wie die Website auf den Betrachter wirkt, regelt eine passende Designvorlage. Zahlreiche davon finden Sie betriebsfertig vorbereitet im Internet [3], manche sind jedoch kostenpflichtig. Achten Sie daher vor dem Download auf die Lizenz.

Jekyll nutzt die Ruby-eigene Paketverwaltung zur Installation der Vorlagen. Sie müssen sich daher mit dem Gems getauften System auskennen. Das gilt insbesondere unter Ubuntu, wo die Installation holperte und sich die Probleme nicht ohne Kenntnisse rund um das Ruby-Gems-System lösen ließen.

Im Folgenden soll deshalb eine eigene Designvorlage entstehen, für die Sie rudimentäre HTML-Kenntnisse mitbringen müssen. Die benötigen Sie ohnehin auch dann, wenn Sie eine fertige Designvorlage nachträglich an Ihre Vorstellungen anpassen möchten.

Den Aufbau und die Optik einer einzelnen Webseite bestimmt eine Seitenvorlage, die Jekyll als Layout bezeichnet. Für die Startseite, einen Blog-Post und alle weiteren Seitentypen gibt es jeweils ein eigenes Layout. Um die bereits existierende Startseite aus dem Beispiel etwas aufzuhübschen, muss folglich ein neues Layout her. Erstellen Sie dazu in Ihrem Arbeitsverzeichnis den Unterordner _layouts/. In ihm landen jetzt alle Ihre selbst geschriebenen Layouts.

Jedes Layout besteht aus einer herkömmlichen HTML-Datei. Der Dateiname dient dabei gleichzeitig als Name des Layouts. Im Beispiel soll ein neues Layout default entstehen, das die Startseite formatiert. Erstellen Sie folglich im Ordner _layouts/ die Datei default.html, deren Inhalt Listing 3 zeigt. Der Übersicht halber fehlt in ihr die Einbindung einer CSS-Datei. Sie können eine solche jedoch wie üblich nachrüsten, Einschränkungen gibt es dabei nicht.

<!doctype html>
<html>
  <head>
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ page.title }}</h1>
    {{ content }}
  </body>
</html>

Eingehängt

Innerhalb der HTML-Datei markieren Platzhalter die Stellen, an denen Jekyll später die Inhalte beziehungsweise die Texte einbauen soll. Die Platzhalter erkennen Sie an doppelten geschweiften Klammern, wie etwa {{ content }}. Diesen Platzhalter ersetzt Jekyll durch den Text der Seite, der in der index.md hinter dem Front Matter folgt. {{ page.title }} steht hingegen für den Seitentitel, den Sie im Front Matter abgelegt haben.

Sie dürfen im Front Matter auch eigene Informationen unter beliebigen Namen ablegen, wie etwa stichwort: Büro. Im Layout bauen Sie diese sogenannten Variablen dann über den Platzhalter {{ page.variablenname }} ein. Im Beispiel würden Sie mit {{ page.stichwort }} an das Stichwort gelangen. Sofern eine Seite diese Variable nicht im Front Matter auflistet, ignoriert Jekyll den entsprechenden Platzhalter.

Abschließend müssen Sie Jekyll noch mitteilen, dass es der Datei index.md das Layout default überstülpen soll. Genau das legen Sie im Front Matter der index.md hinter layout: fest. Ergänzen Sie folglich im Beispiel aus Listing 2 das Front Matter wie in Listing 4 gezeigt.

---
title:  "Linux News"
layout: default
---

Betrachten Sie jetzt die von Jekyll generierte fertige Website im Browser, steht über dem Seiteninhalt nun eine in großen Lettern und fett geschriebene Überschrift (Abbildung 4). Allerdings soll die Seite nicht nur einen Text anzeigen, sondern ein Blog mit mehreren Nachrichten.

Abbildung 5: Mit dem passenden Layout aus Listing 6 listet die erste Seite jetzt auch die Blog-Beiträge auf, wobei hier nur der Beitrag über LibreOffice existiert.

Jekyll ersetzt übrigens nicht selbst die Platzhalter, sondern delegiert diese Aufgabe im Hintergrund an eine Komponente namens Liquid. Sie bietet neben den gezeigten Platzhaltern noch weitaus mehr Möglichkeiten, die an eine einfache Programmiersprache heranreichen. So können Sie etwa Teile der Seite nur dann einblenden, wenn eine bestimmte Bedingung erfüllt ist. Eine Beschreibung aller von Liquid angebotenen Möglichkeiten würde einen eigenen Artikel erfordern. Weiterführende Informationen hierzu finden Sie in den Dokumentationen zu Liquid [4] und Jekyll.

Eingehängt

Ein Internet-Auftritt benötigt auch ein Impressum mit Kontaktdaten. Solche Seiten mit statischem Inhalt bezeichnet Jekyll als Pages. Die wiederum erstellen Sie wie die Startseite. Legen Sie also im Arbeitsverzeichnis eine Textdatei impressum.md an. Die Dateinamen der Pages dürfen Sie frei wählen und sie zudem nach Belieben in Unterverzeichnissen sortieren.

Den Datei- und Ordnernamen nutzt Jekyll allerdings wieder als Bestandteil der Internet-Adresse. Die in impressum.md gespeicherten Texte erreichen Sie später also unter http://example.com/impressum.html. Würden Sie die Datei ins Unterverzeichnis about/ verschieben, wären die Kontaktdaten hingegen unter http://example.com/about/impressum.html zu erreichen.

Die neue Seite startet wieder mit einem Front Matter, der im einfachsten Fall nur aus dem Layout und dem Titel besteht (Listing 7). Denken Sie sich noch einen Text aus, und speichern Sie die Datei.

---
layout: default
title:  "Impressum"
---

Auf Ihrer Website sollte das Impressum über ein kleines Menü von allen Seiten aus erreichbar sein (Abbildung 6). Anstatt jetzt in jedem Layout die passenden Tags für ein solches Menü zu hinterlegen, lagern Sie die entsprechenden Tags besser in eine eigene Datei aus. Das hat den Vorteil, dass Sie bei einer Änderung am Menüaufbau nur eine einzige Datei anpassen müssen.

Abbildung 6: Das Layout default.html bindet das Menü aus der Datei menu.html ein. Da das Layout default als Basis für alle anderen Layouts dient, erscheint das Menü auf jeder Unterseite.

Solche ausgelagerten Codeschnipsel bezeichnet Jekyll als Includes. Die wiederum sammelt das Unterverzeichnis _includes/. Erstellen Sie es in Ihrem Arbeitsverzeichnis, und legen Sie darin eine neue Datei menu.html an. In ihr verstauen Sie den HTML-Schnipsel aus Listing 8, der ein einfaches Menü realisiert. Diesen Schnipsel binden Sie im Layout default.html an einer passenden Stelle mit dem Platzhalter {% include menu.html %}ein.

<nav>
  <a href="/">Startseite</a>
  <a href="/impressum.html">Impressum</a>
</nav>

Umleitung

Alle Seiten und Blog-Beiträge sind unter Internet-Adressen zu erreichen, die Jekyll selbstständig wählt. Sie dürfen aber auch in diese Automatik eingreifen und für jede Seite einzeln festlegen, unter welcher URL sie später erreichbar sein soll. Auf die Funktion greifen Sie beispielsweise zurück, um sehr lange und umständliche URLs abzukürzen oder sie suchmaschinenfreundlicher zu gestalten.

Dazu hinterlegen Sie im Front Matter der entsprechenden Datei die zusätzliche Einstellung permalink: /kontakt/. Hinter permalink: folgt der Pfad, über den die Seite zukünftig zu erreichen sein soll. Im Beispiel wären so die Kontaktdaten immer unter http://localhost/kontakt zu erreichen, auch wenn der Dateiname weiterhin impressum.md lautet.

Alle Layouts, Includes und die jeweils dazugehörenden Dateien bilden zusammen ein Theme. Als Anregung für den Ausbau des eigenen Themes dient neben fertigen Vorlagen auch das kleine Minima-Theme [5].

Darüber hinaus bietet Jekyll noch viele weitere nützliche Funktionen. So unterstützt das Werkzeug den CSS-Compiler Sass, während Liquid unter anderem auch automatisch Menüs erzeugen kann. Falls Sie Adressen, Messwerte oder andere externe Daten in Ihre Website einbinden möchten, holt Jekyll sie wahlweise aus CSV-, TSV-, JSON- oder YAML-Dateien.

Außerdem lässt sich Jekyll über Plugins um zusätzliche Funktionen erweitern. Sämtliche Funktionen beschreibt ausführlich die Jekyll-Dokumentation [6].

Fazit

Das weitverbreitete und praxiserprobte Jekyll lässt sich schnell aufsetzen. Ebenso schnell bauen Sie neue Inhalte in eine bestehende Webseite ein. Das Schreiben eigener Layouts dagegen erfordert Kenntnisse über HTML und CSS sowie etwas Beschäftigung mit Liquid. Letzteres ist zwar schnell erlernt, komplexere Abfragen benötigen jedoch etwas Erfahrung und wirken schnell unübersichtlich. Aufgrund seiner Arbeitsweise empfiehlt sich Jekyll somit vor allem als WordPress-Ersatz für Blogger. (cla)