Jekyll Hands On

Najko Jahn und Christian Pietsch
21 Oktober 2016

Agenda

  • Wie kann ich Jekyll installieren?
  • Wie funktioniert Jekyll?
    • Grundlegende Handhabung
    • Ordnerstruktur
    • Einen Beitrag schreiben
  • Wie lässt sich Jekyll anpassen?
    • SCSS
    • Liquid templating
  • Was taugt Jekyll als Publikationsumgebung?

Installation von Jekyll

—> https://jekyllrb.com/docs/installation/

Voraussetzung:

  • Ruby (> v2)
  • RubyGems
  • Linux, Unix, or macOS (Windows wird offiziell nicht unterstützt)

Installation und Updates sind mit der Ruby Paketverwaltung einfach!

~ $ gem install jekyll bundler
~ $ jekyll --version
~ $ gem update jeykll

Eine Instanz aufsetzen

Lokal:

—> https://jekyllrb.com/docs/quickstart/

~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ jekyll serve

Nachnutzung bestehender Instanzen:

—> https://github.com/jekyll/jekyll/wiki/Sites

~ $ git clone https://github.com/AWEEKJ/Kiko-plus.git

Wie funktioniert Jekyll - Grundlegende Handhabung

—> https://jekyllrb.com/docs/usage/

Seiten generieren:

$ jekyll build
# => The current folder will be generated into ./_site

$ jekyll build --destination <destination>
# => The current folder will be generated into <destination>

Lokal betrachten:

$ jekyll serve
# => A development server will run at http://localhost:4000/
# Auto-regeneration: enabled. Use `--no-watch` to disable.

Datei- und Ordnerstruktur

—> https://jekyllrb.com/docs/structure/

.
├── _config.yml # => Konfigurationsdatei
├── _drafts # => Ordner für Entwürfe
|   ├── begin-with-the-crazy-ideas.md
|   └── on-simplicity-in-technology.md
├── _includes # => Partials 
|   ├── footer.html
|   └── header.html
├── _layouts # => Vorlagen
|   ├── default.html
|   └── post.html
├── _posts # => Blogbeiträge
|   ├── 2007-10-29-post-1.md
|   └── 2009-04-26-post-2.md
├── _data # => Datenordner 
|   └── members.yml
├── _site # => Ergebnis der Seitengenerierung
├── _sass # => Verzeichnis für scss-Dateieen
├── assets # => Ort für CSS oder js
└── index.html # => Startseite

Einen Beitrag schreiben

Dateisnamensyntax:

YEAR-MONTH-DAY-title.MARKUP

Blogposts starten mit immer mit einem Metadatenblock (YAML). Als Markup lässt sich Markdown verwenden.

---
layout: post
title: Blogging Like a Librarian
date: 2016-08-15
tags: [test, style]
comments: true
share: true
---

Hier kommt der **Inhalt** hin!

Eine Webseite hinzufügen

—> https://jekyllrb.com/docs/pages/

Webseiten (page) lassen sich beliebig in die Ordnerstruktur einbauen. Sie können entweder als Markdown- oder als HTML-Dateien erstellt werden.

├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
|   └── index.html  # => http://example.com/about/
├── contact/
|   └── index.html  # => http://example.com/contact/
|── other/
|   └── index.md    # => http://example.com/other/
└── index.html      # => http://example.com/

NB: Mit Pandoc lassen sich viele Formate in Markdown konvertieren

—> http://pandoc.org/

~ $ pandoc input.docx -o output.md

Eine statische Datei hinzufügen

—> https://jekyllrb.com/docs/pages/

Statische Dateien können unabhängig von ihrem Typ hinzugefügt werden. Wenn sie keinen Metadatenblock enthalten, werden sie auch nicht kompiliert, sondern nur in das Zielverzeichnis verschoben.

├── _config.yml
├── _includes/
├── _layouts/
├── _posts/
├── _site/
├── about/
|   └── index.html  # => http://example.com/about/
├── contact/
|   └── index.html  # => http://example.com/contact/
|── other/
|   └── index.md    # => http://example.com/other/
|   └── anhang.pdf  # => http://example.com/other/anhang.pdf
|   └── bild.jpg    # => http://example.com/other/bild.jpg
└── index.html      # => http://example.com/

Jekyll anpassen - SCSS

SCSS steht für Sassy CSS und erleichtert das Arbeiten mit CSS-Dateien. Zu den Vorteilen zählen:

  • Variablen
  • Zusammenfügen und Kompression verteilter Dateien

Am Beispiel

Jekyll anpassen - Liquid templates

Jekyll unterstützt als Templating Sprache Liquid.

Liquid unterstützt logische Kontrollstrukturen (Tags) und Manipulationen (Filter).

{% if user.age > 18 %}
   Login here
{% else %}
   Sorry, you are too young
{% endif %}

Jekyll-Variablen werden im Metadatenblock definiert.

Tipp: Templating nicht nur fürs Design nutzen

Da sich Jekyll-Variablen im Metadatenblock frei definieren lassen, können sie kreativ nachgenutzt werden:

  • eingebettete Metadaten (Metatags, RDFa)
  • Erstellung von Feeds

Templating erlaubt auch Webseiten aus Datensätzen zu erstellen.

<ul>
  {% for presentation in site.data.presentations %}
  <li>
    <h2>{{ presentation.title }}</h2>
    <a>
      <h4>{{ presentation.name }}</h4>
    </a>
    <p>
      <b>Abstract:</b> {{ presentation.description }}
    </p>
  </li>
  {% endfor %}
</ul>

Was taugt Jekyll als Publikationsumgebung?

Forschende nutzen Jekyll aufgrund seiner Vorteile zunehmend als wissenschaftliche Publikationsumgebung:

Digital Humanities

Data Science

und auch wir wenden Jekyll an, um Projektergebnisse datengestützt nach außen hin darzustellen: