--- title: "Erste Schritte mit Jekyll und GitHub Pages" author: "Alex" date: 2020-07-13 lang: de source: https://voneff.de/erste-schritte-mit-jekyll-und-github-pages/ --- # Erste Schritte mit Jekyll und GitHub Pages 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](https://voneff.de/de/meine-erste-wordpress-website/) um 2009 herum habe ich auch etwa drei, vier Websites mit [Indexhibit](https://www.indexhibit.org/) 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](https://www.staticgen.com/) sind wohl *Hugo*, *Gatsby* und *Next.js* – meine Wahl fiel aber auf [*Jekyll*](https://jekyllrb.com/), da ich hier das Hosting über [GitHub Pages](https://pages.github.com/) 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](https://pages.github.com/) 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](https://github.com/pages-themes/minimal) 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 h[ier in der Repository des Themes.](https://github.com/pages-themes/minimal) 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](https://www.gandi.net/en), die Aufschaltung über den Eintrag von drei A-Records war schnell erledigt. GitHub hält auch hierfür [ausführliche Infos](https://docs.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site) 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](https://pages.github.com/versions/). White-listed ist allerdings das SEO-Plugin [jekyll-seo-tag](https://rubygems.org/gems/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](https://developers.facebook.com/tools/debug/) als auch eines der zahlreichen Open-Graph-Checker-Tools wie [opengraph.xyz](https://www.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](https://realfavicongenerator.net/) erstellt. Gelandet bin ich dort über [diesen Thread in der GitHub-Community](https://github.community/t/favicon-with-github-pages/10242). 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](https://pages.github.com/versions/). 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](https://de.wordpress.org/plugins/email-address-encoder/) für WordPress. Es gibt zwar natürlich entsprechende Lösungen wie etwa [diesen Filter hier](https://alexwlchan.net/2019/06/a-jekyll-filter-for-obfuscating-email-addresses/) oder das Plugin [jekyll-email-protect](https://github.com/vwochnik/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](https://twitter.com/pablostanley) auf [Open Doodles](https://opendoodles.com/). Wie auch das Original steht die Illustration auf dieser Seite in der [Public Domain](https://creativecommons.org/publicdomain/zero/1.0/). Eine Rückverlinkung oder Namensnennung bei Weiternutzung ist begrüßenswert, aber nicht erforderlich.