Code ist Poesie

Erste Schritte mit Jekyll und GitHub Pages

Static Site Generators erfreuen sich wachsender Beliebtheit – hier ein Einstieg aus WordPress-Perspektive

Hin und wieder habe ich Projekte vor mir liegen, für die WordPress mir dann doch eine Nummer zu groß bzw. zu komplex ist. Außerdem finde ich spannend, mich auch mal außerhalb des WordPress-Kosmos’ umzuschauen. Meine Erfahrung mit anderen Systemen ist allerdings bislang ziemlich begrenzt: Etwa zeitgleich mit meinen ersten vorsichtigen WordPress-Erfahrungen um 2009 herum habe ich auch etwa drei, vier Websites mit Indexhibit gebaut – um mich dann anschließend auf WordPress zu konzentrieren.

Im aktuellen Fall galt es, eine denkbar simple, temporäre Landing Page für ein wissenschaftliches Kooperationsprojekt zu erstellen, während die eigentliche Website erst später entwickelt werden sollte. Diese Landing Page brauchte keine der Funktionen, die eine WordPress-Website so mit sich bringt – etwa eine User-Verwaltung, dynamischen Content, verschiedene Post-Types, eine Kommentar-Funktion, Formulare…

Der Begriff der Static Site Generators ist mir seit einiger Zeit immer wieder begegnet, und da war es jetzt einfach mal an der Zeit, hier etwas auszuprobieren. Die bekanntesten Namen sind wohl Hugo, Gatsby und Next.js – meine Wahl fiel aber auf Jekyll, da ich hier das Hosting über GitHub Pages nutzen konnte und der Einstieg über die grafische Oberfläche von GitHub sehr vereinfacht wird. Ich erhoffe mir hier zwei Fliegen mit einer Klappe, denn auch meine Erfahrungen mit Git sind recht spärlich. Also, rein ins Vergnügen!

Setup

Das erste Einrichten wird bei GitHub in einer kurzer Step-by-Step-Anleitung beschrieben, der es kaum etwas hinzuzufügen gibt. Die Anleitung ist interaktiv, ich habe den Pfad Project Site > Choose a theme gewählt. Aus der – an dieser Stelle sehr überschaubaren Theme-Auswahl – habe ich das Minimal Theme gewählt.

Der Weg zur Anpassung des Themes erinnert ein wenig an die von WordPress wohl Child Themes: Eine style.scss im Unterordner /assets/css/ erstellen und die Styles des „Parent Theme“ per @import einbinden und anschließen anpassen. Ähnlich funktioniert auch die Anpassung des Default-Templates. Weitere Hinweise zum Setup und zur Anpassung des Themes gibt es hier in der Repository des Themes.

Dankenswerterweise erlaubt es GitHub ohne Kosten, eine externe Domain aufzuschalten, und stellt dieser dann auch noch ein SSL-Zertifikat über Let’s Encrypt aus. In meinem Fall lag die Domain bei Gandi.net, die Aufschaltung über den Eintrag von drei A-Records war schnell erledigt. GitHub hält auch hierfür ausführliche Infos bereit.

Innerhalb weniger Minuten war meine kleine Website jedenfalls über die Github-Subdomain [nutzername].github.io/[projektname]/ erreichbar, wenig später dann über meine eigene externe Domain.

Startseite und Unterseiten einrichten

Out of the box zeigt die oben genannte Domain den Inhalt der README.md Datei, mit der auf GitHub üblicherweise Infos zu der jeweiligen Repository bereitgestellt werden. Eine eigene Startseite lässt sich einrichten, indem man sich eine Datei mit den Namen index.md oder index.html in das Hauptverzeichnis des Projektes legt.

Unterseiten lassen sich dann erstellen, indem man entsprechend weitere Dateien in das Hauptverzeichnis legt, in meinem Fall etwa impressum.md und datenschutz.md, und diese dann nach Belieben im Markdown-Syntax befüllt.

Open Graph und Meta Tags

Insgesamt war es bis hierhin ein walk in the park. Was bei meinem Projekt nicht so gut funktioniert hat, war der Mechanismus, wie GitHub Pages die Open-Graph-Angaben generiert. Über das Settings-Menü in meinem Repository konnte ich zwar ein Social Preview image hochladen, aber das wurde von Facebook so nicht akzeptiert. Auch waren Website-Name und Seitentitel irgendwie nicht richtig verarbeitet: Das Theme packt im Default-Template den Namen der Repository in h1-Tags, und Jekyll generiert dann aus der ersten h2-Überschrift den og:title. Oder so ähnlich.

Wie ich später noch feststellte, ist die Zahl der Jekyll-Plugins, die ich auf GitHub-Pages nutzen kann, sehr begrenzt – hier eine Übersicht. White-listed ist allerdings das SEO-Plugin jekyll-seo-tag. Spannend, wie hier die „Installation“ funktioniert – nämlich einfach über diese Ergänzung in der Datei _config.yml:

plugins: 
- jekyll-seo-tag

Im Anschluss habe ich dann ebenfalls die folgenden Tags vergeben:

title: [Mein gewünschter Titel]       
tagline: [kurzer Untertitel]     
description: [eine etwas ausführlichere Beschreibung]      
url: https://meine-custom-domain.de            
lang: de_DE           
defaults:            
  - scope:          
  path: ""         
  values:       
    image: /assets/img/my_og_image.png 

In dem von Jekyll generierten Code wurden mit diesen Angaben dann alle Meta Tags richtig befüllt, weder der Facebook Debugger als auch eines der zahlreichen Open-Graph-Checker-Tools wie opengraph.xyz hatten daran etwas zu meckern.

Favicon & Co

Auch eine einfache statische Seite kommt nicht ohne Favicon aus. Favicons für den Browser Tab – und diverse andere Formate – habe ich mit dem kostenlosen Favicon Generator erstellt. Gelandet bin ich dort über diesen Thread in der GitHub-Community. Die Einbindung ist ziemlich selbsterklärend. Eine Einschränkung: Der Favicon Generator empfiehlt, alle Dateien in den root der Website zu laden – insgesamt sind das allerdings zehn Dateien, die für meinen Geschmack dann doch besser in einem Unterverzeichnis aufgehoben wären.

Was fehlt?

Wie erwähnt ist die Zahl der Jekyll-Plugins, die auf GitHub Pages eingesetzt werden dürfen, sehr beschränkt. Was mir fehlt, wäre ein Plugin, mit dem ich E-Mail-Adressen vor Crawlern schützen kann – so wie etwa der Email Address Encoder für WordPress. Es gibt zwar natürlich entsprechende Lösungen wie etwa diesen Filter hier oder das Plugin jekyll-email-protect, aber dafür muss ich meine kleine Website einfach selbst hosten. Das wird dann der nächste Schritt.


Hast du Erfahrungen mit Jekyll und speziell mit GitHub Pages gemacht? Welche Projekte hast du schon damit umgesetzt? Bevorzugst du einen anderen Static Site Generator? Ich freue mich auf deinen Kommentar!


Das Titelbild oben beruht auf einer Illustration von Pablo Stanley auf Open Doodles. Wie auch das Original steht die Illustration auf dieser Seite in der Public Domain. Eine Rückverlinkung oder Namensnennung bei Weiternutzung ist begrüßenswert, aber nicht erforderlich.

6 Kommentare zu “Erste Schritte mit Jekyll und GitHub Pages

  1. Sehr interessanter Artikel, ich selber habe gerade erst jekyll gefunden und werde mich da mehr reinlesen.
    Alex, sag mal, wie ist der Stand bei dir und jekyll? Ein Jahr ist bald rum, was ist dein Fazit? Vor und Nachteile? Ich habe schon mehrere Artikel dazu gelesen. Jekyll ist zwar kein CMS wie WordPress, aber da gibt es wohl auch eine kleine Lösung, damit es „hübscher“ wirkt (https://github.com/jekyll/jekyll-admin) benutzt du das? Vor dem programmieren habe ich keine Angst, da ich hier Erfahrung habe, das Problem wird eher das Theme sein. Da habe ich weniger Designs gefunden als bei WordPress.
    Ich wäre dir für eine Antwort seeeehr dankbar.

    • Hallo Namensvetter! 😉
      Es freut mich, dass mein Artikel interessant für dich ist.

      Ich muss gestehen, dass ich bislang keine weiteren Erfahrungen mit Jekyll gesammelt habe. Die kleine Website, die ich gebaut hatte, war nach ein paar Wochen wieder offline, da es eh nur eine Zwischenlösung sein sollte.
      Das von der verlinkte Admin-Plugin hatte ich nicht im Einsatz.

      Dennoch fand ich die Erfahrung eigentlich ziemlich gut, und würde auch wieder auf Jekyll zurückgreifen, wenn es für das Projekt passt.

      Viele Grüße!

  2. Sehr schöne Zusammenfassung. Ich bin auch ein großer Jekyll/Github Pages Fan. Der Tipp mit dem SEO Plugin ist gut, bisher habe ich immer in den Layout-HTMLs rumgepfuscht… 😀

    • Hallo Brian, freut mich sehr, dass der Artikel dir gefällt und dass du sogar was mitnehmen konntest! Ja, es ist echt eine tolle und günstige Möglichhkeit, ganz schnell mit einer Website online zu gehen.

  3. Guten Tag!
    Wunderbare Blogbeiträge. Sie bieten Informationen für jeden einzelnen Menschen. Danke, dass Sie diese Tipps mit uns teilen. Ich hoffe, bald mehr informative Beiträge von Ihnen zu lesen.

    Herzliche Grüße,
    Simon Brocher Köln

  4. Hallo,
    Danke für Ihren sehr interessanten und kreativen Beitrag! Dieser hat uns von Graffitiartist sehr gefallen.

    Viele Grüße,
    Graffitiartist

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert