Jekyll – der prak­ti­sche Generator für statische Websites

Im November 2008 ver­öf­fent­lich­te Tom Preston-Werner, einer der vier Gründer der Ent­wick­ler-Plattform GitHub, den Website-Generator Jekyll unter der freien MIT-Lizenz. In Ruby ge­schrie­ben greift dieser auf ein Template-Ver­zeich­nis zurück, das eine Reihe struk­tu­rier­ter und sta­ti­scher Text­da­tei­en (Markdowns) ver­schie­de­ner Formate enthält. Diese bestimmen ei­ner­seits das Layout, an­de­rer­seits den Inhalt des Web­pro­jekts und lassen sich zu diesem Zweck in­di­vi­du­ell anpassen. Dabei stellt der Generator keinen WYSIWYG-Editor, sondern erfordert das klas­si­sche Code-Schreiben. Hierfür wird der Content-Editor Prose empfohlen, der die Markdown-Edi­tie­rung ver­ein­facht und für Jekyll optimiert wurde.

Bevor Ver­än­de­run­gen an dem Code in die Live-Version der ent­wi­ckel­ten Web­an­wen­dung ein­flie­ßen, lassen sie sich dank des Jekyll-eigenen Ent­wick­lungs­ser­vers be­gut­ach­ten. Für die Um­wand­lung der Dateien in eine statische Website, die sich mit jedem gängigen Webserver aus­lie­fern lässt, sorgt dann die im­ple­men­tier­te Rendering-Engine Liquid. Diese generiert den HTML-Code au­to­ma­tisch im Hin­ter­grund, wenn Än­de­run­gen an den Text­da­tei­en vor­ge­nom­men werden.

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

Jekyll für Blogs und andere statische Web­pro­jek­te zu nutzen, stellt aus ver­schie­de­nen Gründen eine über­le­gens­wer­te Al­ter­na­ti­ve zu Content-Ma­nage­ment-Systemen, Baukästen und Co. dar. Der we­sent­li­che Vorteil dieser Lösung ist die Sim­pli­zi­tät, die sowohl die Arbeit mit dem Website-Generator als auch die er­stell­ten Projekte aus­zeich­net. Dank der Mög­lich­keit, auf eine Datenbank zu ver­zich­ten, spart man sich bei­spiels­wei­se die Ein­rich­tung und Kon­fi­gu­ra­ti­on einer solchen komplett. Außerdem entfallen die ansonsten not­wen­di­gen Da­ten­bank­zu­grif­fe, was sich positiv auf die Ladezeit der Website auswirkt. Zur guten Per­for­mance und einfachen Pro­jekt­ent­wick­lung und -pflege trägt auch der mi­ni­ma­lis­ti­sche Code bei, der auf die wichtigen Funk­tio­nen und Features reduziert ist und sämtliche Jekyll-Themes aus­zeich­net. Im Gegensatz zu klas­si­schen CMS generiert Jekyll aus­lie­fer­ba­res Markup direkt nach einer Änderung und nicht erst dann, wenn ein Nutzer die Seite aufruft.

Ferner überzeugt Jekyll in puncto Sta­bi­li­tät und Si­cher­heit: Da der Webserver lediglich Text­da­tei­en aus­lie­fern muss, ist das Feh­ler­po­ten­zi­al bei Jekyll-Präsenzen we­sent­lich geringer als bei Websites, die erst durch das Zu­sam­men­spiel mehrerer ver­schie­de­ner Kom­po­nen­ten funk­tio­nie­ren. Und weil keine re­gel­mä­ßi­gen Ak­tua­li­sie­run­gen notwendig sind, sorgt das stabile Code­ge­rüst zudem lang­fris­tig für eine hohe Ver­füg­bar­keit der Website. Die Si­cher­heit re­sul­tiert derweil daraus, dass Jekyll – ohne CMS, Datenbank und Skripte mit dy­na­mi­schen Elementen (PHP, Ja­va­Script etc.) – schlicht­weg kaum An­griffs­flä­che bietet.

Während die stark ein­ge­schränk­te Codebasis für erfahrene Ent­wick­ler keinerlei Hindernis darstellt, werden sich Neulinge mit dem Website-Generator al­ler­dings schwertun. In der Stan­dard­aus­füh­rung verfügt Jekyll über keine grafische Ober­flä­che, weshalb In­stal­la­ti­on und Ein­rich­tung über die Kom­man­do­zei­le erfolgen müssen. Auch in Sachen Theme-Auswahl ist Jekyll vielen CMS oder anderen Website-Ent­wick­lungs­tools, für die oft hunderte oder gar tausende Design- und Layout-Vorlagen exis­tie­ren, deutlich un­ter­le­gen. Gleiches gilt für den Support, der aufgrund der kleinen Community und der geringen Ver­brei­tung eher spärlich ausfällt.

Die folgende Tabelle fasst ab­schlie­ßend die wich­tigs­ten 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 Mail­adres­se, Ihren Be­nut­zer­na­men sowie das Passwort für Ihr künftiges Konto ein.

Im Anschluss wählen Sie den ge­wünsch­ten Plan (Abon­ne­ment) aus – die kos­ten­freie Variante für eine un­be­grenz­te Anzahl öf­fent­li­cher Ver­zeich­nis­se oder die kos­ten­pflich­ti­ge für eine un­be­grenz­te Anzahl privater Ver­zeich­nis­se. Ab­schlie­ßend können Sie optional Angaben zu ihren Pro­gram­mier­kennt­nis­sen und In­ter­es­sen machen. Sie erhalten von GitHub danach eine Be­stä­ti­gungs­mail und ak­ti­vie­ren Ihr Konto durch einen Klick auf den darin ent­hal­te­nen Link.

Mit dem er­stell­ten Konto können Sie sich nun bei GitHub einloggen. Das Benutzer-Dashboard gewährt Ihnen einen Überblick über die einzelnen Ver­zeich­nis­se – liefert zu Beginn aber natürlich keinerlei In­for­ma­tio­nen. Um dies zu ändern, kreieren Sie zunächst ein neues Re­po­si­to­ry. Klicken Sie zu diesem Zweck in der oberen Be­nut­zer­leis­te auf das Plus-Zeichen und wählen den Menüpunkt „New re­po­si­to­ry“ aus.

Bisher handelt es sich bei dem Ver­zeich­nis um ein ge­wöhn­li­ches GitHub-Pro­jekt­ver­zeich­nis. Um es nun in Ihr Web-Re­po­si­to­ry um­zu­wan­deln, hab Sie ver­schie­de­ne Wege:

• Sie können komplett von Null anfangen und Ihre Website ohne Vorlage mit Jekyll bauen. In­for­ma­tio­nen hierzu finden Sie in der of­fi­zi­el­len Do­ku­men­ta­ti­on.
• Wenn Sie ein fertiges Jekyll-Theme verwenden, er­leich­tern 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 au­to­ma­tisch eine Kon­fi­gu­ra­ti­ons­da­tei (config.yml) sowie eine Index-Seite (index.md) erzeugt. Stan­dard­mä­ßig handelt es sich bei letzterer um das Vor­schau­bei­spiel für das gewählte Jekyll-Theme, weshalb diese auch bereits im Markdown-Format vorliegt. Sowohl diese Start­sei­te, als auch die Kon­fi­gu­ra­ti­ons­da­tei können Sie be­ar­bei­ten, indem Sie die ent­spre­chen­de Datei auswählen und an­schlie­ßend in der Me­nü­leis­te auf das Stift-Symbol klicken.

Hat die Ein­rich­tung wie in den vor­he­ri­gen Schritten be­schrie­ben funk­tio­niert, können Sie mit der Ge­stal­tung Ihrer Website bzw. Ihres Blog beginnen. Alle Dateien, die Sie zu diesem Zweck benötigen, wie bei­spiels­wei­se CSS-Sheets oder Ja­va­Script-Codes, legen Sie über die Schalt­flä­che „Create new file“ an. Auf diese Weise erzeugen Sie außerdem auch weitere Un­ter­sei­ten für Ihr Web­pro­jekt. Über „Upload files“ ist es zudem möglich, Dateien direkt hoch­zu­la­den. Hierfür können Sie entweder den Spei­cher­ort angeben oder die ge­wünsch­te 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 in­stal­liert, klicken Sie einfach im er­stell­ten Re­po­si­to­ry auf den Button „Set up in Desktop“, woraufhin Sie au­to­ma­tisch zur Down­load­sei­te gelangen.

Nachdem Sie den Client her­un­ter­ge­la­den und in­stal­liert haben, können Sie diesen unter anderem dazu nutzen, eine lokale Kopie Ihrer Web­prä­senz an­zu­fer­ti­gen. Dazu melden Sie sich einfach mit Ihrem GitHub-Login an und wählen im Startmenü den Eintrag „Clone a re­po­si­to­ry“. Sie haben nun die Mög­lich­keit, das Re­po­si­to­ry anzugeben, dass „geklont“ werden soll. Den Spei­cher­ort legen Sie unter „Local path“ fest.

In Ihrem Re­po­si­to­ry können Sie auf ver­schie­de­ne Branches zugreifen. Hierbei handelt es sich um einzelne Ab­zwei­gun­gen im Projekt, die es Ent­wick­lern erlauben, simultan am Code zu arbeiten oder sich auf bestimmte Ent­wick­lungs­be­rei­che gesondert zu kon­zen­trie­ren. Mit IONOS Deploy Now werden die einzelnen Branches des geklonten Re­po­si­to­ries dar­ge­stellt. Sobald Sie einen neuen Branch erstellen, wird dieser au­to­ma­tisch mittels Deploy Now dar­ge­stellt. So können Sie jederzeit Ihr gesamtes Web­pro­jekt sowie den Fort­schritt innerhalb der einzelnen Ent­wick­lungs­zwei­ge im Auge behalten.