Templates

Alle Layout-Vorlagen gehören im Arbeitsverzeichnis in ein Unterverzeichnis namens »_layouts« . Der Unterstrich zeigt an, dass dieses Verzeichnis später nicht mit im fertigen Auftritt landet. Umgekehrt kopiert Jekyll alle Verzeichnisse ohne Unterstrich komplett und unverändert in das Verzeichnis mit der erzeugten Website. Dieses Verhalten sollte man insbesondere dann im Hinterkopf behalten, wenn man mit einem Editor arbeitet, der automatisch Sicherheitskopien erstellt, wie etwa KWrite oder Gedit.

Jekylls Kopierautomatik ist aber auch nützlich: Die HTML-Datei aus Listing 1 bindet eine CSS-Datei ein, die Jekyll unverändert in den Auftritt übernehmen muss. Also erstellt man kurzerhand im Arbeitsverzeichnis das Unterverzeichnis »css« und verstaut darin das Stylesheet. Listing 2 zeigt eine einfache Fassung, die alle Links rot einfärbt.

Nachdem eine Vorlage existiert, sind die eigentlichen Inhalte an der Reihe. Den Auftakt macht der Text für die Startseite des zukünftigen Internetauftritts. Der liegt üblicherweise in der Datei »index.html« , die man jetzt direkt im Arbeitsverzeichnis anlegt (und somit nicht in einem seiner Unterverzeichnisse). In dieser Datei speichert man nur den eigentlichen Seiteninhalt, im Beispiel vielleicht einen kurzen Begrüßungstext. Damit Jekyll weiß, welches Layout es auf diesen Text anwenden soll, muss man dieses noch am Anfang notieren. Das Ergebnis zeigt Listing 3 .

Die Angabe »layout: default« teilt Jekyll mit, dass es das Layout aus der Datei »default.html« verwenden soll. Die Notation folgt dem YAML-Standard [4] , die Angaben zwischen den Strichen bezeichnet Jekyll als YAML Front Matter. Jede Datei, die solch einen Vorspann besitzt, dreht Jekyll gleich durch die Mangel, alle anderen Dateien landen unverändert im fertigen Internetauftritt.

Abschließend muss noch das Verzeichnis »_site« her. In ihm parkt Jekyll die fertigen Webseiten. Ein minimales Jekyll-Projekt besteht damit aus den Verzeichnissen und Dateien aus Abbildung 1 . Um aus ihnen den fertigen Internetauftritt zu generieren, ruft man im Arbeitsverzeichnis einfach das Kommando »jekyll« auf. Jekyll greift sich jetzt nacheinander alle Dateien ohne Unterstrich.

Abbildung 1: Diese Dateien und Verzeichnisse bilden ein minimales Jekyll-Projekt.

Im Beispiel gab es nur die Datei »index.html« . Gemäß der Angabe in ihrem Front Matter setzt Jekyll ihren Inhalt an die Stelle »{{ content }}« der Layout-Vorlage »default.html« . Das Ergebnis landet unter dem Dateinamen »index.html« im Unterverzeichnis »_site« ( Abbildung 2 ). Dorthin kopiert Jekyll auch das Verzeichnis »css« .

Abbildung 2: Der Inhalt der index.html wandert an die Stelle des Platzhalters {{ content }} in der Datei default.html. Das Ergebnis legt Jekyll in der Datei _site/index.html ab.

Prinzipiell lässt sich jetzt die Datei »index.html« im Verzeichnis »_site« mit einem Browser öffnen. Die Layout-Vorlage bindet die CSS-Datei allerdings über eine absolute Pfadangabe ein und kommt somit nicht zur Anwendung ( Abbildung 3 ). Um derartige Seiten dennoch testen zu können, besitzt Jekyll einen eingebauten Webserver. Man startet ihn im Arbeitsverzeichnis per »jekyll --server« . Jekyll erzeugt jetzt erst noch einmal die Website. Anschließend lauscht sein Webserver an Port 4000, die generierte Seite erreicht man folglich unter »http://localhost:4000« . Alle Anfragen protokolliert er zudem auf der Kommandozeile, sodass man auch hier noch einmal den eigenen Internetauftritt unter die Lupe nehmen kann.

Abbildung 3: Die direkt im Browser geöffnete index.html bindet das Stylesheet nicht ein, die Links sind deshalb nicht nicht rot eingefärbt.

Sie haben Posts

Neben der Startseite soll es im Beispiel natürlich auch ein richtiges Blog geben. Dessen Beiträge sammelt der Unterordner »_posts« . Dort legt man jeden Blog-Beitrag in einer eigenen HTML-Datei ab, deren Dateiname aus dem Datum der Veröffentlichung, einem Titel und der Endung ».html« besteht. Der Blog-Beitrag vom 12.02.2013 mit dem Titel »Currywurst« gehört folglich in eine Datei mit dem Namen »2013-02-12-currywurst.html« . Der Titel kann dabei aus einem Stichwort bestehen und muss nicht mit dem tatsächlichen Titel des Beitrags auf der Webseite übereinstimmen. Ein Beispiel für einen Blog-Beitrag zeigt Listing 4 .