Jekyll – Website-Generator für statische HTML-Seiten

Static Website Generator

Jekyll – Website-Generator für statische HTML-Seiten

Jekyll ist ein Static Website Generator, der statische Webseiten baut. Jekyll eignet sich wunderbar für den Betrieb eines Blog und für kleine Websites.

Hinweis: Das Phlow Magazin bietet ausführliche Jekyll Anleitungen, Code-Schnipsel und Themes.

Die Stärken: Da es sich um statische Webseiten handelt, entstehen keine Sicherheitslücken, man muss kein System samt Plugins pflegen, da alles auf dem eigenen Rechner zusammengebaut wird, um anschließend alles nur noch hochzuladen. Eine Einführung in die Welt von Jekyll.

Zunehmende Hackerangriffe auf WordPress-Seiten nerven. Kontinuierliche Updates für kleine Websites mit WordPress stehlen Zeit. Darum suche ich derzeit nach einer geeigneten Lösung, um für Kunden über einen Generator statische Webseiten zu generieren und leicht zu pflegen. Ein vielversprechender Kandidat ist Jeykll. Eine Einführung samt Rechercheergebnisse.

Website generators like Jekyll work by combining template files with content and rendering them to static html pages. They provide the best balance between content creation and editing flexibility, serving an incredibly fast and reliable website.

Vorwort

Derzeit suche ich ein Programm bzw. eine Arbeitsumgebung mit welcher ich statische HTML-Webseiten erstellen kann, während ich totale Kontrolle über sämtliche Elemente des Codes habe. Das Terminal-Programm Jekyll macht dabei nach ersten Recherchen eine vielversprechende Figur.

Jeykyll arbeitet als Kommandozeilenprogramm und generiert Webseiten anhand von Textdokumenten und Templates. Jekyll ist deswegen für mich so interessant, da am Ende reine statische HTML-Seiten herauskommen, die nicht gehackt werden können und so eine Website zusammengebaut wird, die man auf der einen Seite kontinuierlich mit Inhalten und Funktionen ausbauen kann, aber auf der Server-Seite nicht pflegen muss. HTML-Seiten kann man nicht hacken. Außerdem gibt es nichts was schneller beim Besucher landet, als eine fertige – dank Jekyll gerenderte – HTML-Seite. Zusammengefasst lauten die Vorteile eines solchen Systems:

  • Schnelle Performance der Website
  • Sicherheit der Webpräsenz da reines HTML
  • Einfache Entwicklung und Pflege
  • Versionskontrolle durch kontinuierliche Backups
  • Unkomplizierter Umzug von Websites
  • Tool- und Formatunabhängigkeit
  • Texte entstehen im Editor der Wahl

Ein neues Jekyll-Projekt erstellen

Hat man Jekyll auf seinem Computer installiert, reicht der einfache Befehl jekyll new neue-website um eine neue Jekyll-Website in einem Ordner namens neue-website zu erstellen.

jekyll serve

Mit dem schnuckeligen Befehl jekyll serve befiehlt man Jekyll einen Server zu starten und gleichzeitig den Ordner zu überwachen, in welchem man gerade arbeitet und Dokumente ändert. Entdeckt das Programm Änderungen, baut es die Website neu. Über den Browser ruft man das Projekt dann über localhost:4000 auf.

Warum man von WordPress zu Jekyll wechseln sollte

…erklärt der Artikel »Migrating from WordPress to Jekyll – Part 1: Why I gave up on WordPress«. Das beste Werkzeug um alte WordPress-Beiträge in das Jekyll-Format zu konvertieren ist Exit WP. Die Beiträge konvertiert das Werkzeuge anhand der wordpress.xml-Datei, die man über das WordPress-Backend unter Werkzeuge exportiert.

Jekyll-Themes mit Liquid entwickeln

Wer mit Jekyll ein eigenes Blog nutzt und dieses designen will, kommt um die Template-Sprache Liquid nicht herum. Ich musste ein wenig suchen, um Beispiele zu finden Liquid zu nutzen. Denn auf Jekyllrb.com finden sich nicht wirklich hilfreiche Links in der Dokumentation. Dabei gibt es unter liquidmarkup.org eine Zusammenfassung und für Designer gibt es zahlreiche Liquid-Beispiele auf Github. Wer bereits mit WordPress eigene Theme entworfen und entwickelt hat, wird sich sehr schnell dank der Beispiele zurechtfinden.

Das Octopress-Framework für Jekyll

First, I want to stress that Octopress is a blogging framework for hackers. You should be comfortable running shell commands and familiar with the basics of Git. If that sounds daunting, Octopress probably isn’t for you.

So viel Zeit hatte ich noch nicht, aber wer wirklich schnell durchstarten will, um mit Jekyll ein eigenes Blog zu pflegen, dem will sich das Octopress-Framework ans Herz legen.

Deutsche Jekyll-Websites

struct-cc-jekyll-blog

Struct.cc von Martin Donath
Struct.cc basiert auf dem Octopress-Framework (s.o.). Im Fall von Martin Donath eignet sich ein statischer Webseiten-Generator in Kombination mit dem Kommentar-Service Disqus.com besonders, weil das Blog nicht kontinuierlich aktualisiert wird. Martin Donath schreibt nur Beiträge zu technischen Probleme, zu denen er keine Lösung im Web gefunden hat. Dank Jekyll entfällt das lästige Aktualisieren eines Blog-Systems, wie z.B. WordPress.

Plugins um mehr aus Jekyll rauszukitzenl

Kompression
Compressing HTML, JavaScript files when rendering
Einfach YouTube & Co. einbinden
OEmbed Liquid Tag for Jekyll
Inhaltsverzeichnis für einzelne Seiten
Liquid filter to generate Table of Content
RSS Feed Generator
Ergänzt das Jekyll-getriebene Blog um einen RSS-Feed
Man kann aber auch anstelle eines Plugins einfach eine Datei, z.B. atom.xml anlegen und den folgenden Code eingeben. Jekyll generiert anhand dieses Templates dann automatisch den Feed.
Suchfunktion
Jekyll + indextank = Static websites with powerful full-text search
Archivseiten erstellen lassen
Plugin, um Archivseiten zu erstellen
Sitemap.xml Generator
Plugin für die Suchmaschinenoptimierung
Ähnlich wie beim RSS-Feed benötigt auch eine Sitemap kein eigenes Plugin. Einfach eine Datei wie z.B. sitemap.xml anlegen und diesen Code reinkopieren. Den Rest übernimmt Jekyll.

Themes, um mit Jekyll durchzustarten

hpstr-theme

Unter jekyllthemes.org findet man eine kleine Sammlung an Jekyll Themes. Empfehlenswert und edel sind die folgenden:

Anleitungen

Gute englischsprachige dreiteilige Serie