Jekyll (Software)

Logo

Jekyll ist eine in der Programmiersprache Ruby geschriebene Software, die zur Erstellung statischer Webseiten dient. Dabei kombiniert sie vereinfachte Markup-Texte mit Designvorlagen und erzeugt für jede Teilseite ein statisches Abbild als HTML-Datei.

Der Jekyll-Quellcode wird unter der MIT-Lizenz als Open Source bereitgestellt.

Häufig eingesetzt wird Jekyll zur Erstellung von Blogs, aber auch Softwaresysteme wie GitHub oder andere Content-Management-Systeme nutzen Jekyll im Hintergrund zur Erstellung von Webseiten.

Anwendung

Jekyll wandelt HTML-Fragmente, Markdown- oder Textile-Dateien mit Hilfe von Liquid-Vorlagen in vollständige statische HTML-Seiten um, die direkt auf einen Webserver hochgeladen werden können. Auf dem Server werden keine Scripts oder andere Programme ausgeführt, um den Inhalt anzupassen, da bereits alles in der fertigen Form zum Download bereitsteht.

Die eigenen Inhalte werden als Postings oder Unterseiten in einfache Textdateien geschrieben, die in HTML übersetzt und mit Layouts zu einem fertigen Design kombiniert werden.

Plugins können die HTML-Generierung verfeinern, indem sie z. B. Quellcodes durch Syntax-Highlighting ansprechender gestalten oder indem sie Bildverweise zu nutzerfreundlichen Fotogalerien aufwerten können.

Um Datensätze zu verwalten, benutzt Jekyll keine Datenbanken, sondern unterstützt Textformate wie YAML, JSON, CSV oder TSV. Die Datenfelder können über Liquid-Anweisungen durchiteriert und in die Webseiten eingefügt werden.

Es existieren zahlreiche kostenlose Vorlagen (englisch Themes) für Jekyll-basierte Webseiten, und viele davon werden als Open Source angeboten.

Geschichte

Erschaffen wurde Jekyll von Tom Preston-Werner im Jahr 2008 als Version 0.1.0, der die Markupsprachen YAML, Textile und Liquid nutzte, um seine Blogseiten automatisch generieren zu lassen. Bereits kurz nach der ersten Veröffentlichung wurden weitere Feature-Plugins und der Support für die Markupsprache Markdown hinzugefügt. Durch Integration des Webservers WEBrick war eine Live-Darstellung der generierten HTML-Inhalte parallel zur Anpassung möglich.

Version 1.0.0 wurde nach zahlreichen Erweiterungen im Mai 2013 veröffentlicht.

Bereits ein Jahr später wurde Version 2.0 freigegeben, die die Gruppierung von Teilseiten durch „Collections“ ermöglichte und neue Vorlagen und Plugins mitbrachte.

Im Oktober 2015 wurde Version 3.0 bereitgestellt, die neben vielen Detailverbesserungen mit der Erweiterung „Incremental regeneration“ nicht mehr alle Seiten ständig neu generieren lassen musste, sondern nur noch geänderte Quelldateien in HTML übersetzen ließ. Das Editieren und Begutachten der Resultate konnte dadurch stark beschleunigt werden.

Version 4.0 liegt seit August 2019 vor, die weitere Performancegewinne einbringt und auf neuere Feature-Plugins für Markupsprachen und Syntaxhervorhebung aufsetzt.

Funktionsweise

Das Rohmaterial einer Webseite wird in einem Arbeitsverzeichnis abgelegt, das aus einem definierten Set an Konfigurationsdateien und Unterverzeichnissen besteht.

• Die Datei Gemfile definiert die zu nutzenden RubyGems als Plugin-Module (z. B. für Seitenaufteilung, Syntax-Highlighting, RSS-Feeds)
• _config.yaml enthält Einstellungen zu den Plugins und globale Variablen wie etwa den Titel der Webseite.
• Das _posts-Verzeichnis enthält Dateien mit einzelnen Blog-Einträgen, deren Dateinamen dem Format JAHR-MONAT-TAG-TITLE.MARKUP folgen müssen (z. B.: 2022-12-17-wikiupdate.md).
• Das _layouts-Verzeichnis enthält Markupdateien, die von Posts und freien Seiten referenziert werden können. Beim Generieren der Seite wird der Inhalt einer Datei in das referenzierte Layout integriert.
• Im _includes-Verzeichnis werden Dateien verwahrt, die in andere Dateien eingebunden werden können. Ein Beispiel hierfür wäre ein Hauptmenü, das in jeder Seite integriert sein soll.
• Das Ergebnis der Generierung wird im _site-Unterverzeichnis ausgegeben. Dessen Inhalt kann am Ende direkt auf den Webserver übertragen werden.
• Dateien im Arbeitsverzeichnis oder in zusätzlichen Unterverzeichnissen werden bei der Generierung mit gleichem Basisnamen und Pfad in das Ausgabeverzeichnis abgelegt. (z. B.: /info/news.md wird zu /_site/info/news.html)

Front Matter

Dateien mit einem „Front Matter“-Dateikopf werden von Jekyll erkannt und abhängig von der Plugin-Konfiguration speziell behandelt. Dieser Dateikopf ist ein YAML-Dokument (mit je 3 Bindestrichen eingeleitet und beendet) und enthält vordefinierte Einträge wie z. B. das zu nutzende Layout oder den Titel der Seite. Er kann aber auch weitere frei wählbare Felder definieren, die in Liquid-Scripts ausgelesen werden können.

---
layout: page
title: Infozeile
---
<div>Diese Zeile wird in Layout "page" integriert.</div>

Liquid als Vorlagensprache

Innerhalb von Seitentexten können in Liquid kodierte Einschübe enthalten sein, die während der Generierung abgearbeitet werden.

So können Variablen, Objekteigenschaften und Platzhalter als Text in den generierten Inhalt eingebettet werden.

<!-- _layouts/page.html -->
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        {{ content }}
    </body>
</html>

Ebenso unterstützt werden bedingte Verzweigungen und das Durchlaufen von Auflistungen in Schleifen.

Die Schlüsselworte sind gängigen Programmiersprachen ähnlich, wie z. B. if und else oder for item in items.

<!-- Erzeuge eine Liste von Links zu allen generierten Seiten -->
<ul>
{% for p in site.pages %}
{% if p.title != null %}
<li><a href="{{ p.url }}">{{ p.title }}</a></li>
{% endif %}
{% endfor %}
</ul>

Markupsprachen

Inhalte werden in vielen Jekyll-Projekten nicht in HTML verfasst, sondern als Markdown- oder Textile-formatierte Textdateien verfasst. Die Standardplugins von Jekyll erkennen .md- und .textile-Dateien und wandeln deren Inhalte in HTML um, bevor diese in das gewählte Layout integriert werden.

Die Rohdaten lassen sich daher in jedem beliebigen (Text-)Editor einfach überarbeiten und sind auch ohne ausgereifte grafische Werkzeuge leicht lesbar.

Weblinks

• Jekyll-Website
• Liquid template language