Leichtbauweise

Wer Websites mit strukturierten Inhalten und einem Template-basierten Layout erzeugen will, greift oft automatisch zu Content-Management-Systemen und investiert viel Zeit, um deren spezifische Logik und Architektur zu verstehen. Für Eilige sind deshalb statische Website-Generatoren oft die bessere Wahl: Sie erzeugen aus Vorlagen für Style und Inhalt die komplette Seite inklusive Menüstrukturen. Statisches HTML hat zudem den Vorteil, dass es keinen Webserver braucht, und eignet sich damit auch für Offline-Präsentationen.

Naturgemäß setzt eine statisch generierte Webseite der Skalierbarkeit und Flexibilität Grenzen. Zwar gibt es auf Javascript basierende Lösungen wie JS-Kit [2] oder Disqus [3], die Nutzerkommentare auch in statischen Seiten ermöglichen. Komplexere Sites mit nutzergenerierten Inhalten oder Mehrbenutzersysteme mit Rechteverwaltung lassen sich aber besser mit dynamischen Systemen realisieren.

Erste Schritte

Da Webgen in Ruby[4] geschrieben wurde, benötigt das Programm die entsprechende Umgebung auf dem Rechner. Sie steht in den Repositories aller großen Distributionen zur Installation bereit. Webgen selbst installieren Sie am besten über Ruby Gems, das Sie ebenfalls im Repository Ihrer Distribution finden. Der Aufruf gem install webgen als Nutzer mit privilegierten Rechten richtet den Webseitengenerator auf Ihrem Rechner ein.

Mit der Eingabe von webgen create meine_site erstellen Sie die Struktur einer neuen Website in dem Verzeichnis, in dem Sie den Befehl abschicken. Außer der Datei config.yaml und dem zunächst rätselhaften Rakefile erscheint ein neues Verzeichnis namens src. Der Aufruf webgen render erzeugt aus dem Skelett im Verzeichnis out eine fertige Webseite. Darin befindet sich im Anschluss unter anderem eine index.html, die Sie mit dem Browser öffnen (Abbildung 1).

Abbildung 1: Die von Webgen erzeugte "leere" Site eignet sich als guter Ausgangspunkt für die Arbeit mit Templates und Seiten.

Vergleichen Sie die Ausgabe mit dem Inhalt von src/index.page (Listing 1) erkennen Sie den strukturellen Aufbau. Als erster erscheint der Titel, gefolgt vom Menü und einigen Links. Der Fußbereich schließt nach dem eigentlichen Inhalt die Seite ab. Tatsächlich sind sowohl diese ganze Struktur als auch die zusätzlichen Inhalte im default.template definiert – dazu später mehr.

—
title: Empty Index Page
in_menu: true
routed_title: New webgen Website
—
## Welcome to *webgen*!
This is just a place holder for the start page for your new website!
…
For more information about webgen have a look at the [documentation]!
[documentation]: http://webgen.rubyforge.org/documentation/index.html

Trenner (---) unterteilen die Index-Seite in sogenannte Blocks. Der erste Block enthält Metainformationen, der nächste den Content. Das genügt schon, um die erste eigene Webseite zu erzeugen, beispielsweise das Impressum: Sie legen eine Datei impressum.page an und füllen sie mit dem Inhalt aus Listing 2, wobei Sie die Struktur der index.page verwenden.

—
title: Impressum
in_menu: true
—
### Impressum
Eginhard Müller
Bülow-Allee 3
4343 Lüdenscheid
Telefon: 834334343
E-Mail: <info@mysite.de>

Anschließend rufen Sie webgen render auf und sehen nach dem Reload im Browser das Ergebnis (Abbildung 2). Um die Zeilenumbrüche in der Adresse zu erzeugen, fügen Sie dem Ende jeder Zeile mindestens zwei Leerzeichen hinzu. Andernfalls interpretiert Webgen den Abschnitt als Fließtext.

Abbildung 2: Mit etwas Text und zwei Zeilen Metainformationen ist das Impressum schon fertig.

Um Webgen nicht nach jeder Änderung manuell starten zu müssen, verwenden Sie das genannte Rakefile: Es handelt sich dabei um das Ruby-Äquivalent zu GNU-Makefiles. Das vorhandene Rakefile enthält bereits einen Task zum automatisierten Rendern. Sie starten ihn mit der Eingabe von rake auto_webgen & im Terminal. Um auch den Browser in regelmäßigen Abständen neu zu laden, behelfen Sie sich mit dem Firefox-Plugin ReloadEvery. Alternativ verwenden Sie Opera, der die automatischen Reloads auch ohne Plugin beherrscht.

Ausgezeichnet

Die von Webgen verwendete Markup-Sprache in .page-Dateien heißt Markdown [5] und erleichtert das Erstellen von Web-Content erheblich. Die #-Tags vor "Impressum" (Listing 2) symbolisieren beispielsweise die Überschriften (HTML-Tags <h1> bis <h6>), im Fall von drei #-Zeichen also <h3>. Spitze Klammern um eine E-Mail-Adresse erzeugen einen mailto:-Link und schützen die URL durch willkürlich gemischtes Hexadezimal- und Dezimal-Encoding vor Spambots.

Darüber hinaus erlaubt es Markdown, im Text eingebettete Links wie Literaturlisten zu verwalten. Das von eckigen Klammern umschlossene Wort "documentation" (Listing 1) wird in einen Link umgewandelt, der automatisch auf die URL verweist, die am Ende des Absatzes steht. Soll die URL selbst im Text stehen, verwenden Sie spitze Klammern wie im E-Mail-Beispiel. Für die referenzartige Link-Angabe existieren weitere Syntax-Varianten, die das System flexibler gestalten. Zusammen mit allen anderen Elementen der Markup-Sprache sind sie in der Referenz dokumentiert [5].

Da Markdown nur einen Teil der HTML-Spezifikation implementiert, benötigen Sie manchmal auch pures HTML, wobei Sie beide Varianten in einem Dokument beliebig mischen können. Lediglich Block-Elemente wie <table>, <div> oder <p> gilt es mit einer Leerzeile vom restlichen Inhalt abzusetzen.

Neben Markup erlaubt Webgen auch den Einsatz anderer Systeme wie Textile [6]. Dazu ergänzen Sie die Datei config.yaml um den in Listing 3 angegebenen Eintrag. Installieren Sie, falls nötig, die Ruby-Gem RedCloth.

Ohne weitere Optionen wählt Webgen eine alphabetische Reihenfolge der Menü-Einträge. Um sie festzulegen, fügen Sie im Kopf der Seite nach in_menu: true die Zeile sort_info: 100 ein. Das bewirkt, dass vor dem Impressum noch maximal 100 Einträge stehen dürfen. Alle weiteren Seiten, inklusive der vorhandenen index.page, sollten dann jeweils eine niedrigere Nummer erhalten.

default_processing_pipeline:
  Page: erb,tags,textile,blocks,fragments