Bloggen mit Jekyll und Github Pages

Ein persönliches Blog gehört heute zum guten Ton eines IT Professional. WordPress ist als freie Software eines der meist genutzten Content Management Systeme um Inhalte Online zu verwalten und der quasi Standard für Blogprojekte. WordPress bietet eine nicht enden wollende Anzahl an Themes, Plugins und Social Media Integrationen, und das meist für lau. Das riesige WordPressuniversum ist zeitgleich eines der größten Mankos der Software, Sicherheitslücken, fehlerhafte und starre Themes und schlecht laufende Plugins lassen das leichtgewichtig scheinende Blog komplexer und fehleranfällig anmuten. Anders als statische Webseiten wird für den WordPressbetrieb zwingend eine SQL Datenbank benötigt, was sich auf Ladezeiten auswirkt. Als Alternative zum PHP basierten CMS Blog sind statische Webseiten ideal. Klassisches HTML bietet nur wenig Potential für Sicherheitslücken und auch in Sachen Ladezeiten hängen statische Seiten ein CMS Blog problemlos ab. Eine komfortable Lösung derartige Seiten zu erstellen, ohne sich dabei jedes mal um das Design und die Verlinkung der Seiten untereinander zu kümmern bietet Jekyll. Jekyll ist ein Generator für statische Websites, speziell Blogs, welche in Kombination mit GitHub Pages kostenlos veröffentlicht werden können. Diese Webseite basiert auf genau dieser Technik. Der hier vorliegende Artikel beschreibt die Schritte zum eigenen GitHub Pages Jekyll Blog.

Jekyll

Jekyll ist ein Art Website Generator welcher auf Basis einer definierten Dateistruktur statische HTML Seiten erzeugt. Beim Generieren eines Jekyll Projektes werden sämtliche Inhalte der Seite gerendert und als statische Dateien abgelegt.

Der Jekyll Output ist frei von dynamischen Inhalten. Ein Webserver kann die von Jekyll erzeugten Dateien so ausliefern, wie sie vorliegen (ohne includes oder Datenbanken zu bemühen). Statische Webseiten auf Jekyll-Basis sind daher designbedingt sicherer, schneller und wartungsfrei.

GitHub Pages

GitHub Pages sind öffentliche Web-Seiten für GitHub Nutzer (Organisationen und Repositories), die kostenfrei unter der Domain username.github.io/repository oder mit einem benutzerdefinierten Domain-Namen gehostet werden. Neben der Unterstützung normaler HTML-Inhalte können GitHub Seiten Jekyll-basierend betrieben und gepflegt werden.

Die ersten Schritte

Die Installation ist vergleichsweise einfach, allerdings bedarf es ein Paar kleiner Vorbereitungen um die Grundvoraussetzungen zu erfüllen.

Jekyll setzt auf der dynamischen und freien Programmiersprache Ruby auf, daher wird zunächst eine funktionsfähige Ruby-Umgebung benötigt. Aktuelle Mac OS Versionen bringen eine Ruby Installation mit, es schadet aber nicht eine aktuelle Version mit vollem Funktionsumfang zu installieren. Aktuelle Pakete finden sich https://www.ruby-lang.org/de/downloads. Die Installation entspricht den gängigen Strukturen und Bedarf keiner besonderen Kniffe.

Basierend auf Ruby wird das Paket Management RubyGems benötigt. Auch RubyGems lässt sich intuitiv installieren. Als erstes benötigen wir die Installationsdateien, die finden sich hier. Das heruntergeladene Verzeichnis entpacken und mit dem folgenden Befehl im Terminal installieren. Für die Installation werden root Rechte benötigt, evtl. also mit sudo ausführen.

ruby setup.rb

Sobald Ruby und RubyGems bereitstehen, kann Jekyll mit dem einfachen command installiert werden:

gem install jekyll

Erstellen einer Jekyll-Seite

Eine neue Jekyll-Seite erstellt man mit dem Kommando

jekyll new meineseite

Dabei steht “meineseite” für den Namen des Verzeichnisses in welchem die Jekyll-Seite erstellt wird. Diese Seite enthält bereits Templates und einen Beispiel-Artikel. Im Standard Verzeichnis der neuen Jekyll Seite werden die folgenden Daten und Ordner angelegt:

  • _config.yml        Die vollständige Konfiguration der Seite wird über die Konfigurationsdatei (detailierte Erläuterungen finden sich http://jekyllrb.com/docs/configuration/)
  • _layouts            Layout Ordner
  • _sass            Syntactically Awesome Style Sheets Ordner (eine Weiterentwicklung von CSS)
  • css                Style Sheet Ordner
  • index.html        die eigentliche Homepage
  • _includes        In diesem Verzeichnis werden Fragmente platziert, die an mehreren Stellen inkludiert werden sollen.
  • _posts            Hier werden die eigentlichen Posts platziert.
  • about.md        das klassische Impressum
  • feed.xml            xml sitemap

Generieren der Jekyll-Seite

Eine Website generiert man mit dem Befehl

jekyll build

Die fertige Website befindet sich dann im Verzeichnis _site. Außerdem kann die Seite lokal unter localhost:4000 mittels folgendem Befehl im Browser betrachtet werden:

jekyll serve

Einen neuen Post mit Jekyll legt man durch das Erstellen einer Datei im Verzeichnis _posts an. Der Dateiname muss aus Datum und Titel des Posts bestehen:

YEAR-MONTH-DAY-title.md

Der aktuelle Post hat z.B. den folgenden Dateinamen: 2015-02-12-Bloggen-mit-Jekyll-und-github.md

Mit der Endung .md wird auf die Markdown Sprache verwiesen, die im Gegensatz zu html sehr viel leichter im Schreibfluss verwendet werden kann. Standard HTML ist ebenfalls möglich, für mich ist Markdown klar zu bevorzugt. Der verwendete Dateinamen wird später, sofern nichts anderes vereinbart wird, zur Adresse des Posts.

Die Post Datei beginnt mit einem YAML Front Matter Block der die Einstellungen für den neuen Post festlegt. Für diesen Artikel sieht der YAML Block wie folgt aus:

---   
layout: post   
title: Bloggen mit Jekyll und GitHub Pages   
permalink: bloggen-mit-jekyll-und-github-pages.html  
author: Deniz Teoman   
tags: [jekyll, howto]   
---   
  • layout: legt fest welches Layout benutzt werden soll um den Post anzuzeigen.
  • title: bezeichnet den Titel des Blogposts der angezeigt wird.
  • author: der Name des Authors.
  • categories: Liste von Kategorien denen der Post zugeordnet wird. Listenelemente müssen durch Kommata getrennt werden und in eckigen Klammern stehen.
  • tags: Liste von Tags denen der Post zugeordnet wird. Blogposts können auf diese weise nach Themen sortiert werden.

Jekyll auf GitHub deployen

Um eine erstellte Webseite mit GitHub Pages bereitzustellen, wird wie bei GitHub üblich ein http://github.com/new benötigt. GitPages müssen in eine bestimmte Branch namens gh-pages gepusht werden. Mit einer Jekyll Seite geht das denkbar einfach. Hierzu wird das Jekyll Verzeichnis zu GitHub gepusht.

git checkout --orphan gh-pages 
git add . 
git status 
git commit -m 'Kommentar zum Change' 
git rebase master 
git push origin gh-pages

GitHub Pages mit eigener Domain

Um die neu angelegte Seite nicht nur unter der

username.github.io/repository

sondern mittels einer eigenen Domain wird ein CNAME DNS Eintrag benötigt. Der CNAME muss auf die eigene GitHub Page verweisen. Bei GitHub GitHub, muss im Branch gh-pages der gewünschte Domainname hinterlegt werden. Anschließend muss eine date mit dem Namen CNAME (in Großbuchstaben), im root Verzeichnis der Branch angelegt werden. In diese Datei wir die Adresse des Blogs geschrieben z.B. blog.example.com (nicht https://blog.example.com). In der Datei _config.yml  unseres Jekyll Blogs muss im letzten Schritt noch die YAML angepasst werden:

baseurl: "" 
url: http://blog.example.com

Jekyll Themes und Artikel