5202

ein Blog über technische Fragen zu Blogger

Tutorial: Eine statische HTML-Seite auf Github-Pages hosten #3

von

Heute im 3. Teil des Tutorials statische HTML-Seiten auf Github-Pages beschäftigen wir uns mit dem sehr mächtigen Werkzeug von Github zum erzeugen von Seiten, dem Layout-Generator Jekyll.

Was ist Jekyll?

Jekyll ist ein Layout-Generator, mit dem ihr statische HTML-Seiten erstellen könnt. Jekyll ist keine CMS, sondern nur ein Werkzeug, mit dem ihr ein Layout definiert - das Script baut anschließend daraus Seiten. Diese fertigen Seiten werden dann vom Server ausgeliefert.

Jekyll läuft auf Github automatisch im Hintergrund. Ihr müsst nichts weiter tun, als euer Layout in einer bestimmten Form zu schreiben und hochzuladen. Jekyll macht den Rest - baut die fertige Seite, speichert sie in einem Ordner und liefert sie aus.

Ordner-Struktur

Die minimalste Struktur eines solchen Jekyll Ordners schaut folgendermaßen aus:

├── _config.yml
├── _layouts
   ├── default.html
├── _site
└── index.html

Das meint, dass ihr eine _config.yml Datei braucht, einen Layout-Ordner, in dem eure Layout-Dokumente abgelegt sind, einen _site Ordner, in dem später eure fertige Seite gespeichert werden und eine index.html Datei zum Start der Seite.

Schauen wir uns die Ordner näher an.

_config.yml

Ihr braucht für Jekyll eine Konfigurationsdatei, mit der ihr sehr weit reichende Möglichkeiten habt, um das Aussehen und die Funktionen des Generators zu bestimmen.

Jekyll besitzt eine sehr gute Dokumentation zu dieser Datei. Wichtig ist erst mal, dass sie vorhanden ist.

Ihr könnt für den Anfang in diese Konfigurationsdatei folgenden Wert schreiben:

name: EuerProjekt

[Statt EuerProjekt könnt ihr natürlich einen beliebigen Namen nehmen :D]Speichern - Fertig!

_layouts

Layouts ist das zentrale Element von Jekyll. In dem _layouts Ordner könnt ihr eine beliebige Zahl an Layout-Vorlagen als HTML-Detei speichern.

Jekyll benützt für seine Vorlagen eine leider wenig verbreitete aber sehr mächtige Sprache, nämlich Liquid.

Eine Liquid-Vorlage schaut Beispielsweise so aus:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>{{ page.title }}</title>
        <meta name="viewport" content="width=device-width">
       <!-- Custom CSS -->
        <link rel="stylesheet" href="/css/main.css">
    </head>
    <body>
       <div class="site">
          <div class="header">
            <h1 class="title"><a href="/">{{ site.name }}</a></h1>
          </div>
         {{ content }}
   </body>
</html>

Letztlich ist das ein HTML-Dokument mit verschiedene vorgegebene Variablen - ähnlich wie bei Blogger. Die wichtigsten Variablen sind sehr gut dokumentiert.

Hier in diesen einfachen Beispiel benütze ich drei Variablen, nämlich page.title, site.name und content.

Der Inhalt dieser Variablen werden in YAML geschrieben, d.i. eine extrem simple markup language, d.h. Auszeichnungssprache. Die Variable site.name habt ihr etwa in eurer _config.yml Datei hinterlegt, page.title schreibt ihr in den Kopf eurer index.html Datei … und so weiter.

Ihr könnt übrigens beliebig viele Layouts definieren.

_site

Der Ordner _site enthält die fertig generierten Seiten. Er muss vorhanden sein, ansonsten müsst ihr euch um nichts weiter kümmern. Falls ihr statische HTML-Seiten auf eigenem Webspace benützen wollt, könnt ihr den Inhalt dieses Ordners in das Home Verzeichnis von eurem Server legen und er wird ausgeliefert.

index.html

Eine Index-Seite, die mit einem Liquid-Layout erstellt wird, hat folgende Struktur:

---
layout: default
title: Meine_Startseite
---

<div id="home">
  <h1>Hello World</h1>
</div>

Jede Seite braucht einen YAML-Header mit jeweils drei - - - zum Start und zum Ende. In diesen Header müsst ihr das Layout, das ihr für diese Seite verwendet und einen Titel angeben. Der Inhalt der Seite ist die Variable content des Liquid-Layouts.

Das klingt alles klingt komplizierter als es ist … um das a bisserl weniger abstrakt zu halten, habe ich eine Beispiel-Datei gebaut:

Beispiel

Ich habe als Beispiel ein Jekyll kompatibles Liquid-Layout vorbereitet. Ihr könnt es in euren Desktop klonen, bearbeiten und in eure Arbeitskopie euerBenutzerName.github.io legen. Beachtet, dass der Ordner _site noch leer ist.

Kommentiert und Synchronisiert die Änderung nun in der Github App und ladet es auf eure Repository hoch. Im Github-Dashboard findet ihr nun im Ordner _site eure fertige generierte Seiten, die nach ungefähr 10min ausgeliefert werden.

Fertig :D!

Weiterführende Gedanke

Jekyll läuft nicht nur auf dem Github-Server, sondern auch lokal auf eurem Rechner. Es ist ziemlich umständlich, jede Änderung von eurer Seite zuerst auf Github laden zu müssen, um sie zu testen.

Ihr könnt eine statische HTML-Seite sehr viel simpler & schneller entwickeln, wenn ihr sie lokal bauen und testen könnt. Als letzten Teil vom Tutorial statische HTML-Seiten auf Github-Pages bauen wir also mit Ruby einen Jekyll-Server lokal auf dem eigenen Rechner und lassen darüber unsere Seiten generieren und ausliefern.