Mit dem Website-Generator Webgen erstellen Sie selbst umfangreich strukturierte Websites in wenigen Minuten.

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

Vorgelegt

Den mit site info überschriebenen Fußbereich und den linke Seitenrand mit den Platzhaltern für den Titel und Slogan der Website, dem Menü und den Links definiert das Template default.template. Die Vorlage (Ausschnitte in Listing 4) sieht auf den ersten Blick wie eine typische XHTML-Seite aus, bei näherer Betrachtung fallen aber die Einträge in geschweiften Klammern auf: Diese so genannten Webgen-Tags ersetzt der Webbaukasten beim Rendern mit dynamisch generiertem Inhalt – beispielsweise {title:} durch den in der Page-Datei festgelegten Titel der Seite. Zeile 11 in Listing 4 baut eine komplette Menüstruktur ein.

…
  <title>{title:}</title>
  </head>
  <body>
    <div id="sidebar">
      <h1>Website Title</h1>
      <h2>your website slogan</h2>
      <div id="menu">
        {menu: {max_levels: 1, used_nodes: files}}
      </div>
…
    <div id="content">
      <webgen:block name="content" />
…

Eine zweite syntaktische Möglichkeit, dynamisch erzeugte Inhalte im Template einzufügen, zeigt die vorletzte Zeile des Datei-Ausschnitts in Listing 4. Sie fügt den Content-Bereich der Seite an der angegebenen Stelle ein. Die mit geschweiften Klammern umgebenen Webgen-Tags eignen sich sowohl zum Einsatz in Templates als auch in normalen Seiten. So könnten Sie etwa das Tag {date:} dazu nutzen, das Änderungsdatum automatisch in die Fußzeile zu schreiben. Mit den Unix-üblichen Format-Strings formatieren Sie es direkt in der Seite. Günstiger ist es jedoch, der Konfiguration config.yaml ein neues Standardformat für das gesamte Projekt hinzuzufügen. Erweitern Sie die Datei dafür um tag.date.format: '%d.%m.%Y'

Danach gibt Webgen das aktuelle Datum immer im Format 19.10.2009 aus. Auch die Optionen wesentlich komplexerer Tags, wie etwa {breadcrumb_trail:}, lassen sich zur so genannten Breadcrumb-Navigation in der Konfigurationsdatei festlegen. Diese Navigationsart wird im Standard-Template nicht genutzt. Sie können sie hinzufügen oder aber die Gelegenheit nutzen, das Design komplett zu wechseln. Webgen bringt dafür zwölf Layoutvorlagen mit. Welche davon Sie benutzen, legen Sie beim Erzeugen der Webeseite mittels webgen create style_name fest. Alternativ wechseln Sie damit bei einer schon existierenden Website das Layout. Das Kommando webgen help apply zeigt eine Liste aller vorhandenen Style inklusive der Beschreibung. Sie ändern das Layout mit dem Aufruf webgen apply style_name.

Da der Wechsel das default.template überschreibt, sollten Sie vorher ein Backup anlegen. Nach Anwenden des Layouts style_andreas09 sieht die Website dann recht beeindruckend aus. Sie enthält jetzt ein Dreispalten-Layout, einen News-Bereich, die Breadcrumb-Navigation und ein Menü zur Sprachauswahl (Abbildung 3). Außerdem stellt das Menü in der linken Spalte nun die einzelnen Abschnitte einer Seite als Menüpunkte dar.

Abbildung 3: Ein voll ausgestattetes Template enthält neben der Sprachauswahl eine Breadcrumb-Navigation, verschiedene Menüs und Seitenbereiche für dynamische Inhalte.

Diese Maximalvariante eines Templates eignet sich gut, um die dynamischen Inhalte zu erforschen, die bisher noch nicht zur Sprache kamen. Der News-Bereich verdient dabei eine besonderen Beachtung: Da es unpraktisch ist, für jede News das Template zu bearbeiten, legen Sie stattdessen eine neue Datei news.page mit beliebigem Content an. In default.template ersetzen Sie danach wie in Listing 5 zu sehen, den auskommentierten Abschnitt durch eine webgen-Anweisung.

<div id="rightside">
  <!--
  <h1>Latest news</h1>
  <p>
    <strong>09.09.2009</strong><br />
    Something has happened by then.
  -->
  <webgen:block chain="news.html" name="content" />

Es gilt zu beachten, dass im Chain-Eintrag die Ausgabedatei news.html stehen muss, nicht etwa die Quelldatei news.page. Möchten Sie in anderen Bereichen der Website – bei diesem Layout etwa links unterhalb des Menüs – Inhalte anzeigen, die nicht für die komplette Website gleich sind, lässt sich das ebenfalls sehr leicht einrichten. Es genügt, innerhalb der jeweiligen Page-Datei nach dem Standard-Block einen neuen Blockbereich zu definieren, der einen anderen Namen als content bekommt: zum Beispiel help. In der default.template ersetzen Sie dann den statischen Text unterhalb des Page-Menüs mit dem dynamischen Inhalt aus dem neuen Block:

<webgen:block name="help" notfound="ignore" node="first" />

Die Option notfound="ignore" unterdrückt Fehlermeldungen bei Seiten ohne help-Block, node="first" wird beim Verketten mehrerer Templates wichtig. Das fertige out-Verzeichnis laden Sie nach dem Fertigstellen der Webseite auf Ihren Webserver. Wer sich in Ruby auskennt, fügt im Rakefile einen Task hinzu, der den Upload automatisiert. Ein einfaches, aber robustes Beispiel für FTP finden Sie unter [8].

Ausblick

Webgen ist damit noch längst nicht ausgereizt. Vor allem das direkte Einbetten von Ruby-Code in Templates und Pages eröffnet zahlreiche Möglichkeiten, das Erstellen von Websites zu automatisieren. Wer Template-Sprachen wie Haml oder Sass [9] mag, kann auch damit experimentieren und HTML sowie CSS ganz aus den Templates verbannen. Derzeit ist die umfangreiche Webgen-Dokumentation nicht besonders gut organisiert – stöbern lohnt sich aber.