Beginnt mit dem Download des Beispielarchivs. Solltet Ihr in der FH arbeiten entpackt Ihr es bitte unter D:\web\site. Das Archiv enthält die folgende Dateistruktur:

site
├── _config.yml
├── develop.cmd
├── index.html
├── _layouts
│   ├── default.html
│   └── post.html
└── _posts
    └── 2014-09-06-Hallo-Welt.md

Wir wollen zunächst einmal prüfen, was die hier gezeigte Webseite eigentlich beinhaltet. Dazu müssen wir Jekyll im Servermodus starten.

Zuhause müsst Ihr die Dateien natürlich nicht alle nach D:\web packen. Es ist aber wichtig, dass der jekyll Ordner exakt so heisst und das der Ordner der jeweiligen Seite (hier: site) im gleichen Ordner wie der jekyll Ordner ist.
Aufgabe: Der erste Start von Jekyll
  • Ladet das Beispielarchiv herunter und entpackt es nach D:\web\site.
  • Öffnet die Kommandozeile im eben verwendeten Ordner (Doppelklick auf die develop.cmd im Ordner D:\web\site)
  • Startet Jekyll mit der Eingabe jekyll serve --watch
  • Öffnet im Browser die Seite http://localhost:4000
  • Schaut euch den ersten (und einzigen) Beitrag auf der Seite im Browser an.

Am Ende dieses Kurses werdet Ihr die Funktion (und den Inhalt) jeder Datei im Ordner D:\web\site verstehen. Für den Anfang werden wir uns aber darauf beschränken eurer Seite einen weiteren Beitrag hinzuzufügen. Öffnet dazu in einem Editor eurer Wahl die Datei _posts/2014-09-06-Hallo-Welt.md.

Ganz oben in der Datei, gewissermaßen “eingequetscht” zwischen den --- Zeichen befindet sich die sogenannte “Frontmatter” Sektion. Dieser Bereich enthält strukturierte Metadaten über den aktuellen Beitrag, der an anderer Stelle von Jekyll verwendet werden kann. Das Schema dieser YAML Eintrage lautet dabei immer Schlüssel:Wert. Wir nennen diese Daten strukturiert, weil wir über den Namen des Schlüssels eindeutig auf sie zugreifen können. Welche Werte als Schlüssel oder Wert verwendet werden ist prinzipiell eine Frage der Anwendung.

Aufgabe: Kleinere Änderungen am Frontmatter

Schaut was passiert, wenn Ihr die folgenden Änderungen vornehmt:

  • Ändert den Wert des Schlüssels author auf euren Namen.
  • Fügt einen neuen Wert "Erste Seite" mit dem Schlüssel title zum Frontmatter hinzu.
  • Ändert den Wert des Schlüssels layout auf "default"

Die weitere Datei ist in einem sogenannten “Markdown Dialekt” geschrieben, den ihr möglicherweise schon aus Foren oder ähnlichen Seiten kennt. Wenn man vornehmlich Texte schreiben und sich weniger mit der teilweise etwas sperrigen Syntax von HTML herumschlagen möchte ist Markdown eine ganz angenehme Alternative. Ich werde nicht im Detail auf die Formatierung mit Markdown eingehen, stattdessen werden wir uns im Anschluss möglichst schnell mit HTML befassen.

Um neue Einträge in dieser blogähnlichen Seite anzulegen, muss man einfach eine neue Datei im Ordner _posts erstellen. Achtet dabei darauf das Namensschema beizubehalten: Jahr-Monat-Tag-Titel.md.

Aufgabe: Der zweite Beitrag
  • Erstellt einen zweiten Beitrag mit dem heutigen Datum und dem Titel "Von Markdown zu Jekyll". Der Text des Beitrages soll euren Vornamen (fettgedruckt), euren Nachnamen (kursiv) und eine Liste mit euren Hobbys beinhalten. Bei mindestens einem eurer Hobbies soll ein Link verwendet werden, der zu der entsprechenden Seite der Wikipedia führt.