© Lev Kroptov, 123RF
Statische Websites sind schnell ausgeliefert, einfach zu warten und insbesondere für Blogger eine interessante Alternative zu WordPress und Kollegen. Static-Site-Generatoren helfen dabei, solche Sites aufzusetzen. Die Bitparade lässt die fünf derzeit beliebtesten Generatoren mit Blogfunktion aufmarschieren.
Verbreitete Contentmanagement-Systeme wie WordPress [1], Joomla [2] oder Typo3 [3] bauen eine Webseite erst auf Anfrage eines Browsers zusammen. Das kostet Zeit und Rechenleistung. Zudem setzen sie neben einem Webserver auch eine Datenbank und eine PHP-Umgebung voraus. Statische Webseiten liefert ein schlanker Webserver dagegen selbst bei vielen Zugriffen blitzschnell aus. Aber wer möchte die Seiten schon per Hand gestalten, verlinken und pflegen? Das ist viel aufwändiger, besonders für Blogs, die ständig Inhalte ergänzen.
Abhilfe schaffen Static-Site-Generatoren. Unterstützt von einer Designvorlage nehmen sie die Texte der Autoren und bauen aus ihnen eine statische Website, die der Seitenbetreiber nur noch auf den Server kopiert, der sie dann ausliefert. Die Seitenbetreiber benötigen folglich weder ein CMS noch eine Datenbank, was die Server- und Softwarewartung vereinfacht und Betriebskosten senkt.
Static-Site-Generatoren gibt es in rauen Mengen, eine Liste pflegt Staticgen.com [4]. Deren Rangfolge deckt sich mit ähnlichen Listen im Internet. Die Tester wählten daher die zum Redaktionsschluss besonders beliebten und aktiv entwickelten Exemplare mit Blogfunktion aus. Eines vorweg: Beim Vergleich der Kandidaten gab es trotz der Unterschiede erstaunlich viele Déjà-vu-Erlebnisse.
Helfershelfer
Alle fünf Static-Site-Generatoren arbeiten nach dem gleichen Prinzip: Ein Autor legt seinen Blogbeitrag beziehungsweise den Seitentext in einer Textdatei ab. In ihr kennzeichnet er Überschriften, wichtige Begriffe, Links und andere Elemente mit speziellen Textkürzeln. Alle fünf Tools unterstützen dabei mindestens Markdown-Markup [5]. Zusätzlich ergänzt er am Anfang der Textdatei ein paar Informationen, etwa seinen Namen oder ein Veröffentlichungsdatum.
Und was ist mit …?
Unter den beliebtesten Static-Site-Generatoren auf der Seite Staticgen.com [4] befanden sich auch zwei Tools, die nicht den Weg in die Bitparade gefunden haben.
Das immer wieder als Alternative zu Jekyll gehandelte Octopress [11] ist nichts anderes als ein Jekyll-Fork mit einigen Erleichterungen für Programmierer. Sich selbst bezeichnet Octopress als “Toolkit zum Erstellen und Veröffentlichen von Jekyll-Blogs”. Bei Redaktionsschluss bastelten die Entwickler noch emsig am kommenden Octopress 3.0.
Brunch [32] ist in Coffeescript geschrieben und benötigt Node.js. Es richtet sich vor allem an Javascript- oder Coffeescript-Programmierer, die ein Frontend für eine Website schreiben möchten.
Diesen Anfangsbereich bezeichnen die Tools als Front Matter. Ein einfaches Beispiel für den Static-Site-Generator Jekyll [6] zeigt Listing 1. Der darin gezeigte Text erscheint später als Blogbeitrag. Die fertigen Texte wandeln die Static-Site-Generatoren also mit einem geeigneten Hilfstool in HTML-Schnipsel um.
Listing 1
Einfacher Blogbeitrag in Jekyll
01 --- 02 layout: post 03 title: "Hallo Welt!" 04 date: 2015-06-27 17:39:06 05 categories: hallo beispiel 06 ---
Anschließend greift sich der Static-Site-Generator eine Vorlage, meist Template genannt. Sie besteht im einfachsten Fall aus einer HTML-Datei, in der Platzhalter die Positionen für den Beitragstext und die Informationen aus dem Front Matter markieren. Listing 2 zeigt ein einfaches Beispiel für Jekyll, die anderen Tools nutzen eine ähnliche Notation: An der Stelle von »{{ content }}« erscheint später der eigentliche Beitragstext.
Listing 2
Das (karge) Standard-Template aus Jekyll
01 <!DOCTYPE html>
02 <html>
03
04 {% include head.html %}
05
06 <body>
07
08 {% include header.html %}
09
10 <div class="page-content">
11 <div class="wrapper">
12 {{ content }}
13 </div>
14 </div>
15
16 {% include footer.html %}
17
18 </body>
19
20 </html>
Der Seitenbetreiber kann mehrere Templates für unterschiedliche Zwecke hinterlegen. Ein Blogbeitrag lässt sich anders formatieren als die Seite mit dem Impressum. Damit Entwickler Templates besser wiederverwerten können, lassen die sich in kleinere Teile zerstückeln. In Listing 2 bindet Jekyll auf diesem Weg die Metadaten in den Kopf – »{% include head.html %}« – sowie eine Fußzeile ein. Die Static-Site-Generatoren kombinieren die Teile dann selbstständig. Zusammengehörende Templates bezeichnen die meisten Tools als Themes.
Die so genannte Template-Engine, die als externes Tool oder als Bibliothek auftritt, verarbeitet die Templates und delegiert somit die Montage der Webseiten. Von ihr hängt maßgeblich ab, welche Platzhalter der Seitenbetreiber mit welcher Syntax in seinen Templates nutzen kann. Daneben bieten die Template-Engines mehrere Hilfsfunktionen an, wie sie auch in Programmiersprachen zum Einsatz kommen. Diese geben etwa mehrere Textbeiträge in einer Schleife aus – ein nützliches Feature für die Startseite.
Bedienung
Der Arbeitsablauf ist bei allen fünf Tools identisch: Zunächst legt der Seitenbetreiber über ein Kommandozeilen-Werkzeug ein Projektverzeichnis an. Die dabei erzeugten Unterordner nehmen im weiteren Verlauf die entsprechenden Inhalte auf. So landen im Fall von Jekyll die Blogbeiträge im Unterordner »_posts« , während die Templates im Verzeichnis »_layouts« liegen. Bei allen Tools lassen sich die Verzeichnisnamen ändern. Zu den Ordnern gesellt sich in der Regel noch eine Konfigurationsdatei, die neben dem Seitentitel weitere Informationen über die Webseite vorhält. Zusätzliche Dateien, etwa Bilder, kopieren alle Tools in die fertige Webseite.
Hat der Seitenbetreiber einen neuen Beitrag verfasst, ruft er den Static-Site-Generator per Hand auf. Der baut die Website neu und lädt das Ergebnis unter Umständen auf den Webserver hoch. Einige der Tools automatisieren diesen Prozess: Sie überwachen auf Wunsch das Projektverzeichnis und erstellen bei Änderungen selbstständig eine neue Version der Website, die sie dann übertragen. Damit lassen sich die Static-Site-Generatoren sowohl auf dem privaten Rechner als auch auf einem Server einsetzen.
Die fünf Kandidaten bieten jedoch keine Benutzerverwaltung. Jeder, der in das Projektverzeichnis schreiben darf, kann auch eigene Texte veröffentlichen. Zudem bauen die Tools aufgrund ihrer Arbeitsweise keine Zusatzfunktionen in die Webseite ein, etwa die von WordPress angebotene Kommentarfunktion.
Hexo
Der Static-Site-Generator Hexo [7] ist komplett in Javascript geschrieben und steht unter der MIT-Lizenz. Er setzt lediglich Node.js und die Versionsverwaltung Git voraus. Die Installation des Tools erfolgt über den Package Manager »npm« von Node.js. Anwender bedienen Hexo dann über das Kommandozeilen-Programm »hexo« , die von ihm verarbeitete zentrale Konfigurationsdatei setzt auf eine Yaml-Notation [8].
Hexo unterscheidet standardmäßig zwischen drei Seitenarten, den so genannten Layouts. Sie ähneln ihren Pendants aus WordPress: Ein Post entspricht einem Blogbeitrag, während eine Page zeitlose Inhalte aufnimmt wie beispielsweise das Impressum. Schließlich gibt es noch Entwürfe (Drafts), die Hexo erst auf explizite Anweisung der Anwender hin veröffentlicht. Diese dürfen auch eigene Layouts vorgeben.
Für Autoren erzeugt »hexo« auf Wunsch eine Textdatei mit einem passenden Grundgerüst. Die dabei zum Einsatz kommenden Vorlagen (Scaffolds) ergänzen sie bei Bedarf um eigene Exemplare, Anwender müssen lediglich die entsprechenden Textdateien im Ordner »scaffolds« ablegen.
Im Front Matter lassen sich Blogbeiträge in Kategorien einordnen und mit Tags kennzeichnen, bei Pages ist das nicht möglich. Dort dürfen Autoren auch einen Permalink beziehungsweise eine eigene URL vorgeben, über die Leser den Beitrag später erreichen. Andernfalls orientiert sich Hexo wie die übrigen Tools an der Verzeichnisstruktur.
Im Anfangsbereich der Textdatei hantiert der Autor wahlweise in Yaml- oder Json-Notation ([8], [9]). Die eigentlichen Texte entstehen jedoch mit Markdown, wobei Hexo auch das von Github [10] eingeführte Markup versteht. Bilder, Programmcode, Links und ähnliche Elemente kennzeichnet der Verfasser mit speziellen Platzhaltern, die Hexo von Octopress [11] übernommen hat. Bilder und andere Assets sortiert Hexo auf Wunsch in eigene Verzeichnisse.
Das mitgelieferte Theme namens Landscape imitiert einen WordPress-Blog samt Titelbild, Beitragsarchiv, RSS-Feed und Suchfunktion (Abbildung 1) – die führt aber direkt zu Google. Von anderen Nutzern erstellte Themes sammeln die Hexo-Entwickler in einem eigenen Katalog (Abbildung 2, [12]).
Abbildung 1: Die in Hexo mitgelieferte Standardvorlage erzeugt Seiten im WordPress-Stil.
Abbildung 2: Nur die Hexo-Macher bieten in ihrem Theme-Katalog zu jeder Vorlage ein Vorschaubild. Bei der Konkurrenz muss der Nutzer fertige Themes blind auswählen.
Beim Bau der fertigen Website nutzt Hexo wahlweise die Swig-, EJS-, Haml- oder Jade-Template-Engine. Es unterstützt mehrsprachige Websites, lädt Dateien mit Datensätzen, etwa Adressen, und gibt diese im Template aus. Die Rohdaten müssen dazu allerdings im Yaml- oder Json-Format vorliegen.
Die Funktionen von Hexo erweitert der Nutzer mit Plugins, nach Angaben der Entwickler laufen auch viele von Octopress. Beiträge aus Jekyll und Octopress übernimmt Hexo direkt, Daten aus WordPress, Joomla und RSS-Feeds wandeln passende Plugins um.
Ein solches Plugin benötigen auch Seitenbetreiber, die ihre fertige Website automatisch auf den Server hochladen möchten. Den Upload per FTP übernimmt beispielsweise das Plugin »hexo-deployer-ftpsync« [13], das wiederum auf das Tool »ftpsync« zurückgreift. Die Dokumentation von Hexo ist kompakt und übersichtlich, allerdings in weiten Teilen als Referenz aufgebaut.
Hugo
In der angesagten Programmiersprache Go ist Hugo (Abbildung 3, [14]) geschrieben. Es steht unter der Simple Public License 2.0. Die Entwickler stellen fertige Pakete für verschiedene Betriebssysteme und Architekturen in mehreren Archivformaten bereit, darunter sogar ein Debian-Paket für ARM-Rechner.
Abbildung 3: Mit Hugo erzeugen unter anderem die Veranstalter der Go-Konferenz Gophercon ihre Website.
In der Regel laden Interessierte das zum System passende Tar.gz-Archiv herunter, entpacken es, benennen das Programm in »hugo« um und machen es ausführbar. Eine systemweite Installation ist nicht notwendig, zudem gibt es keine weiteren Abhängigkeiten.
Die zentrale Konfigurationsdatei für das Projekt verwendet das Toml-Format. In ihr müssen Anwender mindestens die »Baseurl« und somit den Domainnamen anpassen, den Hugo später auch in den Links einsetzt. Texte schreiben Autoren in Markdown, im Front Matter stehen ihnen hingegen Yaml-, Toml- oder Json-Notation zur Wahl. Dort lässt sich auch ein Permalink zum Beitrag vorgeben, andernfalls bildet Hugo einfach die Verzeichnisstruktur ab. Das erste Unterverzeichnis fasst Hugo dabei standardmäßig als Section auf. Für jede Section erzeugt das Tool automatisch eine Liste mit allen in ihr enthaltenen Inhalten.
Autoren legen im Front Matter fest, um was für einen Typ von Text es sich handelt. So können etwa alle Blogposts vom Typ »post« sein. Sofern der Autor keinen Typ vorgibt, verwendet Hugo die Section des Dokuments. Das Theme bestimmt darüber, wie Hugo später die Texte einer Section auf der fertigen Webseite darstellt. Eine einzelne Seite ist zudem über mehrere URLs erreichbar, Hugo leitet die Besucher automatisch weiter. Diese Aliasse helfen vor allem bei der Migration einer bestehenden Site.
Für jeden Inhaltstyp kann der Seitenbetreiber ein Grundgerüst hinterlegen, das sich Archetype nennt. Auf dessen Grundlage lassen sich Autoren ein leeres Textdokument erzeugen. Als Entwurf gekennzeichnete Texte übernimmt Hugo nicht in die fertige Website. Programmcode formatiert bei Bedarf im Hintergrund das Tool Pygments.
Autoren definieren eigene Taxonomien und klassifizieren so ihre Texte. Für eine Seite mit Oldtimern bietet sich etwa die Taxonomie »Automarke« an. Im Front Matter notiert der Autor anschließend, um welche Automarke es im Text konkret geht. Die allgemein gehaltenen Taxonomien »categories« und »tags« , die ihre Pendants aus WordPress imitieren, gibt Hugo standardmäßig vor.
Daneben gibt es Shortcodes. So heißen spezielle Kürzel, die Autoren innerhalb der Markdown-Dokumente einsetzen. So schaltet zum Beispiel »{{< highlight html >}}« bei allen folgenden Zeilen das Syntax Highlighting ein. Ein Shortcode ist dabei ein kleines HTML-Template, das Hugo noch vor dem eigentlichen Seitenbau über den entsprechenden Text stülpt. Auf Übersichtsseiten mit mehreren Texten kann Hugo auf Wunsch jeweils nur die ersten 70 Zeichen anzeigen. Ein Weiterlesen-Link führt dann zum kompletten Text. Alternativ trennen Autoren diese Zusammenfassung mit einem speziellen Platzhalter ab.
Von Freiwilligen erstellte Themes (Abbildung 4) sammeln die Hugo-Entwickler auf einer eigenen Github-Seite [15]. Bevor Hugo die Website zusammenbauen kann, muss sich der Anwender mindestens eines der Themes von dort in den Ordner »themes« seines Projektverzeichnisses herunterladen – oder ein eigenes schreiben. Die »html/template« -Bibliothek von Go verarbeitet die Templates im Hintergrund, alternativ erstellt der Entwickler sie auch mit Amber [16] und Ace [17].
Abbildung 4: Für diese Beispielseite greift Hugo zum Standard-Theme Hyde.
Hugo generiert bei Bedarf RSS-Feeds und eine XML-Sitemap für Google. In die einzelnen Seiten lässt sich zudem die Kommentarfunktion des Dienstes Disqus einbinden. Datensätze liest Hugo aus Yaml-, Json-, Toml- und CSV-Dateien ein und verwendet sie dann in den Themes weiter. Die Dokumentation ist ausführlich und verständlich, ähnelt aber teilweise einer Referenz.
Jekyll
Der derzeit beliebteste Static-Site-Generator hört auf den Namen Jekyll (Abbildung 5, [6]). Das Tool steht unter der MIT-Lizenz und ist in Ruby geschrieben. Einige Distributionen halten es in ihren Repositories vor, die Installation gelingt aber auch über den Ruby-Paketmanager Gem. Betreiber steuern es über das Kommandozeilentool »jekyll« .
Abbildung 5: Auch Github Pages, also die Webseiten für Github-Nutzer, unterstützt Jekyll [18].
Jekyll unterscheidet – ähnlich wie WordPress – zwischen Blogbeiträgen und einfachen Seiten. Letztere nehmen unter anderem das Impressum auf. Texte lassen sich in Kategorien einsortiere, längere Artikel bricht Jekyll auf mehrere Webseiten um. Übersichtsseiten zeigen auf Wunsch nur Auszüge der Blogbeiträge an.
Die letzten veröffentlicht Jekyll erst dann, wenn das im Front Matter oder wahlweise im Dateinamen angegebene Veröffentlichungsdatum aktuell ist. Auf diese Weise kann ein Veranstalter die Ankündigung für ein Event schon vorab verfassen. Die URL, unter der Besucher die Webseite erreichen, geben Autoren im Front Matter an, das nach einer Yaml-Notation verlangt. Jekyll verarbeitet Texte mit Markdown, entsprechende Erweiterungen dehnen den Support auf zusätzliche Formate aus, etwa auf Textile [19]. Jekyll lässt auch Entwürfe zu, die der Nutzer in einem entsprechenden Unterverzeichnis sammelt.
Die einzelnen Webseiten baut Jekyll mit Hilfe der Liquid-Template-Engine zusammen, wobei das Tool die Designvorlagen als Layouts bezeichnet (Abbildung 6). Die Anweisungen beziehungsweise Platzhalter für die Liquid-Template-Engine setzen Autoren auf Wunsch auch in den Blogbeiträgen ein.
Abbildung 6: Das von Jekyll standardmäßig verwendete Layout ist zwar spartanisch gestaltet, bindet aber immerhin auch Links auf soziale Netzwerke ein.
Die Markdown-Texte überführt Jekyll mit den Tools Redcarpet oder Kramdown in HTML-Code, wahlweise binden Anwender einen eigenen Markdown-Interpreter ein. Quellcode kann Jekyll automatisch einfärben, im Hintergrund übernehmen das die Tools Pygments [20] oder Rouge [21]. Jekyll lädt Datensätze aus Yaml-, Json- oder CSV-Dateien, die es in einem Template zum Beispiel in eine Adressenliste überführt.
Anwender erweitern Jekyll über Plugins um zusätzliche Funktionen. Auf diese Weise lässt sich das Tool in den Editor Vi integrieren oder es übersetzt SASS-Dateien automatisch in Stylesheets. Einige der Plugins listet eine etwas unübersichtliche Seite der Online-Dokumentation [22] auf. Die führt neue Nutzer gut und schnell in die Jekyll-Bedienung ein, zudem finden sich dank des hohen Verbreitungsgrades noch zahlreiche weitere Anleitungen und Tutorials im Netz, wenn auch häufig in englischer Sprache.
Middleman
Wie Konkurrent Jekyll ist auch Middleman (Abbildung 7, [23]) in Ruby geschrieben und unterliegt der MIT-Lizenz. Das Tool richtet sich vor allem an Ruby-Entwickler, ist modular aufgebaut und lässt viele Aufgaben von Erweiterungen erledigen. Um die Installation kümmert sich Rubys Paketmanager Gems. Anwender arbeiten ausschließlich mit dem Kommandozeilentool »middelman« .
Abbildung 7: Neben der Seite Staticgen nutzt auch noch der Mailinglistendienst Mailchimp Middleman.
Im Projektverzeichnis erstellt Middleman neben einer Verzeichnishierarchie und einer Konfigurationsdatei auch ein Gemfile. In ihm listen Anwender alle Plugins und zusätzlichen (Ruby-)Bibliotheken auf, die sie in ihrem Projekt verwenden.
Auf Wunsch erzeugt Middleman eine vorkonfektionierte Konfigurationsdatei »config.ru« . Sie beschreibt, wie ein Webserver die Website mit der Middleware Rack [24] laden muss. Rack-Features lassen sich zudem in einem Middelman-Projekt einsetzen. Auch die Konfigurationsdatei ist ein Ruby-Skript, das Ruby-Neulinge eventuell als etwas wirr empfinden.
Die Erweiterung »i18n« hilft dabei, Templates in verschiedene Sprachen zu übersetzen. Dazu legt der Seitenbetreiber zunächst für jede zu unterstützende Sprache eine Yaml-Datei mit den entsprechenden Übersetzungen an. Im Template ersetzt der Nutzer dann einen Begriff durch einen Platzhalter, den die Erweiterung gegen die passende Übersetzung austauscht. So wird etwa aus »<%= I18n.t(:hello) %>« in der deutschen Fassung ein »Hallo« .
Autoren schreiben ihre Texte in Middleman mit Markdown, Informationen im Front Matter hingegen in Yaml- oder Json-Notation.
Standardmäßig erzeugt Middleman nur einfache, statische Seiten. Wer lieber ein Blog anlegen möchte, sollte zu der Erweiterung »middleman-blog« greifen. Sie erlaubt es unter anderem, die eigenen Beiträge mit Tags zu versehen, in Kategorien einzusortieren und später in den Templates in einer Schleife auszugeben. Auf Wunsch trennt die Blog-Erweiterung bei jedem Beitrag eine Einleitung ab. Nach wie vielen Zeichen das geschieht, bestimmt der Anwender. Alternativ kann er ein Kürzel vorgeben, mit dem der Autor das Ende der Einleitung kennzeichnet. Bei Bedarf erzeugt die Blog-Erweiterung zudem eine Kalenderseite, über die Besucher beispielsweise alle Beiträge aus dem Juni 2015 abrufen.
Kennzeichnet der Autor seinen Beitrag im Front Matter als Draft, erscheint er nur in der Vorschau, nicht aber auf der fertigen Seite. Die Blog-Erweiterung verwaltet Blogbeiträge in mehreren Sprachen, ist dazu allerdings ebenfalls auf die Hilfe der oben erwähnten Erweiterung »i18n« angewiesen. Nicht zuletzt verwaltet die Erweiterung auch mehrere Blogs auf einer Website.
Bei den Templates nutzt Middleman eine teilweise etwas verwirrende Terminologie: Als Layout bezeichnet Middleman eine Template-Datei, in die das Tool die Inhalte einhängt. Ein Layout setzt sich wiederum aus mehreren einzelnen Template-Dateien zusammen, die in diesem Fall Partials heißen und deren Dateinamen zwingend mit einem Unterstrich beginnen.
Welches Layout wann zum Einsatz kommt, bestimmt der Autor entweder im Front Matter oder aber in der Konfigurationsdatei (Abbildung 8). Dabei verpasst er auf Wunsch automatisch allen Inhalten aus einem ganz bestimmten Unterverzeichnis das gleiche Layout. Ein Template kann zudem mehrere Webseiten beziehungsweise HTML-Dateien erzeugen.
Abbildung 8: Die von Middleman ausgespuckten Seiten wirken ohne weiteren Eingriff durch den Benutzer recht karg.
Als Template-Sprache kommt Erb [25] zum Einsatz, die das Padrino-Framework um so genannte Helper-Funktionen ergänzt. Templates dürfen Datensätze aus einer Yaml- oder Json-Datei einlesen und diese Informationen im Template weiterverarbeiten.
Einen Satz zusammengehörender Templates bezeichnet Middleman als Project Template. Die mitgelieferten basieren auf den Frameworks HTML 5 Boilerplates, Mobile Boilerplate und Smacs, produzieren aber nur ein extrem simples Layout. Weitere fertige Project Templates lassen sich nachrüsten, die Middleman-Entwickler führen unter [26] einen entsprechenden Katalog.
Dank des im Hintergrund eingespannten Tools Sprockets [27] löst Middleman auch Javascript- beziehungsweise Coffeescript-Abhängigkeiten auf und fügt auf Wunsch alle Javascript-Dateien zu einer großen zusammen. Daneben komprimiert es Javascript- und CSS-Dateien. Das Tool »middleman-imageoptim« dampft Bilder ein, sein Kollege »middleman-minify-html« knöpft sich entsprechend die HTML-Dateien vor.
Middleman erzeugt intern eine Sitemap, die sich wiederum in Templates auslesen beziehungsweise ausgeben lässt. Erst auf eine explizite Anweisung hin erstellt Middleman “Pretty URLs”, macht also zum Beispiel aus »http://example.com/about-us.html« die URL »http://example.com/about-us« .
Die vom eingebauten Webserver ausgelieferte Website (Abbildung 9) lädt Middleman automatisch im Browser neu, sobald sich am Projekt etwas verändert. Diese Live-Reload genannte Funktion müssen Anwender allerdings erst explizit in der Konfigurationsdatei anknipsen. Die fertige Seite transferiert das separat installierbare Tool »middleman-deploy« per Rsync, FTP, SFTP oder Git auf den Webserver. Die übersichtliche Dokumentation führt leicht verständlich in die Arbeit mit Middleman ein, verweist aber an vielen Stellen auf die Dokumentation der verwendeten Tools.
Abbildung 9: Der in Middleman eingebaute Webserver stellt unter einer speziellen URL auch Metadaten und eine Sitemap bereit.
Pelican
Das in Python geschriebene Pelican (Abbildung 10, [28]) untersteht der GNU Affero General Public License in der Version 3. Das Tool halten einige Distributionen in ihren Repositories vor, andernfalls gelingt die Installation über den Python-Paketmanager Pip. Der Quellcode liegt auf Github [29].
Abbildung 10: Die von Pelican standardmäßig genutzte Designvorlage baut auch einige Zusatzfunktionen ein.
Pelican erzeugt im Wesentlichen Blogs und besitzt zahlreiche Abhängigkeiten zu anderen Tools, darunter die Docutils, Pytz und Unidecode. Anwender steuern das Tool mit mehreren Kommandozeilen-Programmen, das Projektverzeichnis generiert etwa »pelican-quickstart« . Das erstellt auf Wunsch auch gleich ein Makefile, ein Fabfile sowie ein Skript, über das die Nutzer schnell und bequem einen lokalen Webserver starten.
Autoren zeichnen ihre Texte direkt in HTML, mit Markdown, Ascii Doc oder Restructured Text aus. Pelican unterscheidet zwischen Blogbeiträgen (Articles) und normalen Seiten (Pages), etwa dem Impressum. Die Notation im Front Matter hängt vom gewählten Markup ab. Im Front Matter lassen sich auch die URL beziehungsweise der Permalink zur entsprechenden Seite vorgeben. Blogbeiträge darf der Autor in eine Kategorie einordnen und mit mehreren Stichwörtern (Tags) versehen. Texte kann er als Entwurf kennzeichnen, die Pelican nicht in die fertige Website einbindet.
Pelican unterstützt ebenfalls mehrsprachige Seiten. Die fertige Webseite erscheint dabei zunächst in der eingestellten Standardsprache. Über eine neben einem Beitrag eingeblendete Liste wechseln Besucher im nächsten Schritt zu einer anderen Sprache.
Als Template-Engine kommt Jinja [30] zum Zug. Ein Theme-Entwickler muss eine ganz bestimmte Verzeichnisstruktur einhalten und ebenfalls ganz bestimmte HTML-Dateien bereitstellen. Die von Pelican automatisch erzeugte Liste mit allen Blogbeiträgen aus einer Kategorie formatiert etwa die Datei »category.html« . Das Standard-Theme erstellt eine Blogroll und Links für soziale Netzwerke, die der Betreiber in der Konfigurationsdatei des Projekts vorgeben beziehungsweise verändern kann.
Tabelle 1
Static-Site-Generatoren
|
Name |
Hexo |
Hugo |
Jekyll |
Middleman |
Pelican |
|---|---|---|---|---|---|
|
Homepage |
|||||
|
Version |
3.1.1 |
0.14 |
2.5.3 |
3.3.13 |
3.6.0 |
|
Lizenz |
MIT License |
Sim PL 2.0 |
MIT License |
MIT License |
GNU AGPLv3 |
|
Geschrieben in |
Javascript, Node.js |
Go |
Ruby |
Ruby |
Python |
|
Markup |
Markdown |
Markdown |
Markdown (über Plugins weitere wie Textile) |
Markdown |
Markdown, Ascii-Doc, Restructured Text |
|
Unterstützung für Blogs |
ja |
ja |
ja |
über Plugin |
ja |
|
Mehrsprachige Website |
ja |
nein |
nein |
ja (über Plugins) |
ja |
|
Permalink lässt sich anpassen |
ja |
ja |
ja |
ja |
ja |
|
Template-Engine |
Swig, EJS, Haml, Jade |
Go html/template |
Liquid |
Erb, Padrino |
Jinja |
|
Einbinden von Datensätzen |
ja (Yaml, Json) |
ja (Yaml, Json, Toml, CSV) |
ja (Yaml, Json, CSV) |
ja (Yml-, Yaml- oder Json) |
nein |
|
Überwachung Projektverzeichnis |
ja |
ja |
ja |
ja |
ja |
|
Eingebauter Webserver |
ja |
ja |
ja |
ja |
ja |
|
Webserver lauscht an Port |
4000 |
1313 |
4000 |
4567 |
8000 |
|
Automatischer Upload |
über Plugins |
nein |
nein |
eigenes Tool |
ja |
|
Plugin-Schnittstelle |
ja |
nein |
ja |
ja |
ja |
Pelican importiert ansonsten Texte aus WordPress, Dotclear [31], RSS-Feeds sowie aus weiteren Diensten. Das Tool erzeugt Atom- und RSS-Newsfeeds und lässt sich über Plugins erweitern. Die fertige Website lädt Pelican automatisch per FTP und SSH auf einen Server oder schiebt sie in die Dropbox, Amazons S3, die Rackspace-Cloud oder auf Github. Die umfangreiche Dokumentation führt mit einer Quickstart-Sektion nicht nur verständlich in die Bedienung ein, sondern dient auch als ausführliche Referenz.
Fazit
Alle fünf Static-Site-Generatoren funktionieren nach dem gleichen Prinzip und bringen fast identische Funktionen mit. Mitunter wirkt es, als hätten die Entwickler dreist voneinander geklaut. Die Dokumentation ist bei allen Tools leicht verständlich und ausreichend.
Die Wahl eines Generators hängt somit von eigenen Vorlieben ab. Seitenbetreiber können sich etwa an der Programmiersprache orientieren: Ruby-Kenner greifen zu Jekyll, Python-Fans zu Pelican. Mitunter macht auch der gemietete Webspace Sprachvorgaben. Daneben lohnt sich im Vorfeld ein Blick auf die verfügbaren Plugins, die teilweise arbeitserleichternde Funktionen nachrüsten.
Infos
- WordPress: https://de.wordpress.com
- Joomla: http://www.joomla.de
- Typo3: https://typo3.org
- Staticgen: https://www.staticgen.com
- Markdown-Markup: https://de.wikipedia.org/wiki/Markdown
- Jekyll: http://jekyllrb.com
- Hexo-Theme-Katalog: https://hexo.io/themes/
- Yaml: http://yaml.org
- Json-Notation: https://de.wikipedia.org/wiki/JSON
- Github: https://github.com
- Octopress: http://octopress.org
- Hexo-Themes: https://hexo.io/themes/
- »hexo-deployer-ftpsync« : https://github.com/hexojs/hexo-deployer-ftpsync
- Hugo: http://gohugo.io
- Hugo-Themes: https://github.com/spf13/hugoThemes
- Amber Template Engine: https://github.com/eknkc/amber
- Ace: http://ace.yoss.si
- Github Pages: https://pages.github.com
- Textile: http://txstyle.org
- Pygments: http://pygments.org
- Rouge: https://github.com/jneen/rouge
- Jekyll-Plugins: http://jekyllrb.com/docs/plugins/
- Middleman: https://middlemanapp.com
- Rack: https://middlemanapp.com/advanced/rack_middleware/
- Erb: https://de.wikipedia.org/wiki/ERuby#erb
- Middleman Templates: https://directory.middlemanapp.com/#/templates/all
- Sprockets: https://github.com/middleman/middleman-sprockets
- Pelican: http://blog.getpelican.com
- Quellcode von Pelican: https://github.com/getpelican/pelican
- Jinja: http://jinja.pocoo.org
- Dotclear: http://dotclear.org
- Brunch: http://brunch.io
