Freier Webspace für Entwickler GitHub Pages in Verbindung mit Jekyll

Ein Projekt auf GitHub zu hosten, gehört heute zum Standard für Open-Source-Entwickler. Doch ein Repository allein genügt nicht, wenn das Projekt auch vorgestellt und verbreitet werden soll. Hier kommt Pages als kostenloser Webspace ins Spiel.

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Windhoff Group

Windhoff Group

Viele GitHub-Projekte werden schlicht über die Readme-Datei vorgestellt und verzichten auf einen eigenen Webauftritt. Und das ist gleich in mehrerlei Hinsicht suboptimal: Die Darstellungsmöglichkeiten sind stark beschränkt, Projekte aus mehreren Repos lassen sich nur sehr umständlich über Verlinkungen beschreiben und Neuigkeiten zu posten, fällt im Grunde komplett raus.

Sicherlich hat nicht jeder Entwickler eines kleineren, nicht kommerziellen Projekts einen eigenen Webspace oder Interesse, eine komplexe Wordpress-Seite zu pflegen. GitHub bietet mit Pages eine sehr schöne Lösung: Es handelt sich ganz schlicht um speziell benannte öffentliche Repos, die später im Browser – mit dem Repo als Web-Root – als Website dargestellt werden.

Die Pages-Webseiten werden wie normale Repos auch gespeist, das Publishing gliedert sich also nahtlos in Ihren regulären Git-Workflow ein. Sie können hier schlicht mit blanken Text- oder HTML-Seiten arbeiten. Komfortabler ist der Einsatz des textbasierten CMS Jekyll, das moderne, professionelle Webseiten ermöglicht. Der gesamte Vorgang ist dank sehr cleverer Umsetzung durch GitHub erstaunlich simpel.

Pages-Seite aufsetzen

Um eine eigene Seite aufzusetzen, erstellen Sie einfach wie gewohnt ein neues Repository. Dieses muss zum einen öffentlich sein und zum anderen nach dem Muster „NUTZERNAME.github.io“ benannt werden. Sie können das Repository anschließend wie gewohnt auf der Kommandozeile mit Git klonen, in der GitHub-Oberfläche arbeiten oder sonst einen Git-Client nutzen.

Legen Sie einfach eine Datei „index.html“ mit Hello-World-Dummy-Content an und schon können Sie Ihre Seite unter „https://NUTZERNAME.github.io“ im Browser aufrufen. Ab diesem Punkt könnten Sie ganz Old School auf einzelne HTML- oder gar Textdateien setzen. Oder eben auf Jekyll – wie zum Beispiel Netflix.

Jekyll einrichten

Jekyll ist ein simpler Seitengenerator, der vor allem auf drei Konzepte setzt: Markdown zum Formatieren von Inhalten, festgelegte Ordnerstruktur und Dateinamen und getrennte, einbettbare Layout-Templates. Im Folgenden sehen Sie zunächst, wie Sie die bisherige „index.html“ mittels Jekyll füllen. Ganz wichtig: Sie müssen Jekyll nicht lokal installieren – es genügt, entsprechend formatierte Seiten auf GitHub zu pushen.

Zunächst sollten Sie, im Grunde unabhängig von Jekyll, eine CSS-Datei mit den gewünschten Optionen anlegen, am besten die typische „css/main.css“. Jekyll erstellt beim Committen einen Ordner „_site“, der nicht in die Versionierung fallen soll. Erstellen Sie daher die Datei „.gitignore“ mit dem Inhalt „_site/“.

Legen Sie nun die Datei „config.yml“ für zwei Metadaten an, nämlich Seitennamen und Art des Markdowns, beispielsweise:

Damit ist die Vorbereitung abgeschlossen und Sie können ein erstes Layout erstellen und zwar in Form der Datei „_layout/default.html“. Sie können diese Seite mit beliebigem HTML-Code aufbauen und beispielsweise einen Navigationsbereich, einen Footer und einen Content-Bereich erstellen – die HTML-Details ersparen wir Ihnen an dieser Stelle.

Wichtig sind hier die so genannten Liquid Tags von Jekyll: Zum einen bietet es sich an, den Namen der Site aus der „config.yml“ zu nutzen, was die Notation „{{ page.name }}“ erledigt. Wichtiger ist aber „{{ content }}“: Wenn Sie später eine Content-Seite für Jekyll erstellen und als Layout eben diese „default.html“-Datei angeben, wird das Tag schlicht durch den Inhalt ersetzt.

Probieren Sie das direkt mit der „index.html“ aus:

Dies wäre nun ein absolutes Minimalbeispiel: Jede Seite, die mit der Deklaration zwischen den drei Strichen („front matter“) beginnt, wird von Jekyll verarbeitet. Hier würde also die Vorlage „default.html“ geladen und darin das Tag „{{ content }}“ mit „Hallo Welt.“ ersetzt.

Das ist im Grunde auch schon der ganze Kniff bei Jekyll, Sie könnten nun beliebige Layouts mit beliebigen Namen für alle möglichen Zwecke erstellen und somit eine statische Webseite bauen. Spannender wird Jekyll aber als Blog.

Jekyll als Blog

Das Bloggen mit Jekyll ist eine Frage von Ordnern und Dateinamen. Zunächst sollten Sie für die einzelnen Posts ein separates Layout „_layouts/post.html“ anlegen. Tipp: Um darin mit dem – ordentlich formatierten – Datum der Posts zu arbeiten, können Sie den Tag „{{ page.date | date_to_string }}“ verwenden – über das Pipe-Zeichen lassen sich Jekyll-interne Filter nutzen. Übrigens: Als Basis kann dieses Post-Layout schlicht das Default-Layout nutzen – Layouts sind quasi stapelbar.

Schon können Sie einen Post für den Blog erstellen: Die Dateien müssen im Ordner „_posts“ residieren und strikt nach dem folgenden Muster benannt sein: „JJJJ-MM-TT-Titel-des-Posts.md“, also beispielsweise „2019-10-15-Hallo-Welt.md“. Erreichbar wäre die Seite dann wie üblich via „http://NUTZERNAME.github.io/2019/10/15/Hallo-Welt“.

Was noch fehlt, ist eine Blog-Startseite, die Posts chronologisch auflistet und verlinkt. Diese können Sie zum Beispiel als „blog/index.html“ erstellen. Was Sie hier benötigen ist eine Schleife, die aus jeder Datei im Ordner „_posts“ einen Eintrag erstellt, am besten in Form einer Liste:

Die For-Schleife erstellt also eine Liste mit Einträgen nach dem Muster: „15 Oct 2019 – Hallo Welt“, verlinkt auf „_posts/2019-10-15-Hallo-Welt“.

Konkreten Beispielcode für die obigen Konzepte können Sie sich bei GitHub anschauen.

Profi-Blog aufbauen

Das Konzept von Jekyll sollte nun weitgehend klar sein: Alle Seiten mit der „---“-Deklaration werden von Jekyll verarbeitet, Liquid Tags in Vorlagen werden durch Metadaten beziehungsweise die Inhalte der sie aufrufenden Content-Seiten ersetzt. Und Blogs lassen sich schlicht durch die Nutzung des Ordners „_posts“ und korrekt benannte Content-Dateien umsetzen.

Das Wichtigste bleibt aber das Einbetten ganz allgemein. Jekylls Ordnerstruktur sieht zum Beispiel auch den Ordner „_includes“ vor, in dem Sie zum Beispiel Kopf- und Fußbereich oder Bausteine für wiederkehrenden Content ablegen können. Zu jedem einzelnen Ordner gibt es auch entsprechende Liquid Tags, um die abgelegten Inhalte andernorts einbetten zu können Im Grunde wird Ihnen die Übersicht der Ordnerstruktur das ganze Spektrum von Jekyll vor Augen führen – letztlich ließen sich zum Beispiel Dinge wie Kommentarfunktionen, Google Analytics einfügen, um ein „echtes“, individuelles Blog-System zu bauen.

Es gibt noch allerhand bei Jekyll zu entdecken, etwa dass Sie das Front Matter auch komplett leer lassen können, wenn Sie keinerlei Variablen auf einer Seite benötigen. Oder Sie legen eigene Variablen darin fest („zielgruppe: profis“). Für professionelle Workflows würde sich auch die Arbeit in Branches anbieten, um im Master nicht für jeden korrigierten Tippfehler einen Commit vorzufinden. Auch eine lokale Installation von Jekyll für die lokale Vorschau könnte diesem Ziel sehr dienlich sein.

Am überzeugendsten ist aber vermutlich ein Blick in den Showcase von Jekyll, der eindrucksvoll zeigt, was sich mit dem schlichten System alles anstellen lässt. Natürlich wächst mit den Ansprüchen auch die Komplexität, dennoch bleibt die Kombination GitHub Pages und Jekyll eine der reizvollsten und schlankesten Möglichkeiten, eine eigene Webpräsenz aufzuziehen.

Übrigens: Natürlich können Sie auch eigene Domains verwenden und per DNS auf Ihre GitHub-Page verweisen lassen. Dieses Feature macht Pages auch für größere Projekte interessant.

(ID:46215759)