Mit Jekyll statische Seiten und Blogs erzeugen

Aus ADMIN 02/2013

Seit Jahren erwartet, ist endlich Version 4 des Samba-Servers erschienen, der nun als vollwertige Alternative zu Microsofts Active Directory dienen kann. In der ... (mehr)

In Schleifen

In diesem Fall soll Jekyll alle vorhandenen Blog-Beiträge (repräsentiert durch »site.posts« ) durchlaufen ( »for« ). Für jeden Beitrag wiederholt Jekyll die Angaben bis zum »{% endfor %}« . Dazwischen gelangt man an die Daten eines Blog-Beitrags, indem man einem seiner Bezeichner aus dem Front Matter ein »post« voranstellt und das Gebilde mit geschweiften Klammern einrahmt. Der Platzhalter »{{ post.beilage }}« liefert beispielsweise den Text rechts neben »beilage« .

Listing 6 macht aus dem Titel eines Beitrags ( »{{ post.titel }}« ) einen Link, der zur Seite mit dem Blog-Beitrag führt – also etwa der Beschreibung der Currywurst. Die URL dorthin liefert »{{ post.url }}« . Neben der Schleife kennt Liquid – und somit auch Jekyll – noch andere Kontrollstrukturen. So prüft

{% if post.beilage %}
        Die heutige Beilage:
{% endif %}

ob der Blog-Beitrag überhaupt eine »beilage« im Front Matter angibt. Nur wenn das der Fall ist, setzt Jekyll den Text »Die heutige Beilage:« in die fertige HTML-Seite ein. Eine gute Übersicht über alle möglichen Befehle und Kontrollstrukturen liefert die Seite Liquid for Designers unter [6] .

Wenn man jetzt das Ganze noch einmal mit »jekyll --server« übersetzen lässt und die Seite im Browser aufruft, kommt man von der Startseite zur Übersicht und von dort zum Currywurst-Artikel. Die Einträge auf der Übersichtsseite sortiert Jekyll automatisch nach Datum, die neuesten stehen dabei ganz oben.

Beobachtungsposten

Sobald man im Verzeichnis »_posts« einen neuen Blog-Beitrag hinzufügt, muss man Jekyll erneut die Website generieren lassen. Diese wiederkehrende Arbeit lässt sich aber auch automatisieren. Dazu erstellt man zunächst im Arbeitsverzeichnis die Datei »_config.yml« . Wie ihr Name schon andeutet, dient sie zur Konfiguration von Jekyll. In jeder Zeile enthält sie dem YAML-Standard folgend eine Einstellung, die aus einem Namen, einem Doppelpunkt und einem Wert besteht. Fügt man ihr nun die Zeile:

auto: true

hinzu, beobachtet Jekyll nach seinem Start das Arbeitsverzeichnis. Sobald sich dort etwas verändert, erzeugt Jekyll automatisch die Website neu.

Weitere nützliche Einstellungen fasst Tabelle 1 "Nützliche Konfigurationseinstellungen" zusammen. Eine besondere Erwähnung verdient dabei »permalink« : Ein Blog-Eintrag liegt normalerweise in einem Unterverzeichnis, das sein Datum widerspiegelt. Den am 02.12.2013 erstellten Beitrag »currywurst« findet man beispielsweise unter »/2013/12/02/currywurst.html« . Über »permalink« kann man dieses Schema verändern. Wählt man beispielsweise:

Tabelle 1

Nützliche Konfigurationseinstellungen

Einstellung	Bedeutung
»`auto:`«	Bei »`true`« überwacht Jekyll das Verzeichnis auf Änderungen.
»`destination:`«	Die fertige Website legt Jekyll in diesem Verzeichnis ab.
»`exclude:`«	Die hierhinter aufgelisteten Verzeichnisse übernimmt Jekyll nicht in die fertige Website.
»`future:`«	Bei »`true`« übernimmt Jekyll auch Posts, die ein Datum aus der Zukunft tragen. Andernfalls bleiben diese außen vor.
»`permalink:`«	Verändert den Speicherort der einzelnen Posts.
»`server:`«	Bei »`true`« startet Jekyll automatich den Server (man spart sich folglich den Parameter »`--server`« ).
»`server_port:`«	Der Port, an dem der Server lauscht.
»`source:`«	Jekyll erwartet die Layouts, Posts, etc. in diesem Verzeichnis.

permalink: /:categories/:title.html

so liegt die Currywurst jetzt unter »/essen/currywurst.html« . »:categories« und »:title« sind dabei Platzhalter, die Jekyll gegen die Kategorie und den Titel ersetzt. Beide muss man im Front Matter der Blog-Beiträge hinter dem Bezeichner »title« beziehungsweise »categories« notieren. Neben »:title« und »:categories« gibt es noch die Platzhalter »:day« für den Tag, »:month« für den Monat und »:year« für das Jahr. »:i_month« und »:i_day« repräsentieren Monat und Tag ohne führende Nullen.