AA_PO-18374.jpg

© Huebi, Fotolia

Template-basierte Websites mit Webgen erstellen

Leichtbauweise

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.

Listing 1
—
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.

Listing 2
—
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.

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

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

Kommentare
Gut gemeint, aber etwas fehlt wohl
sr (unangemeldet), Sonntag, 22. November 2009 11:03:13
Ein/Ausklappen

Habe mich sehr gefreut! Endlich etwas, was einfach bei meiner Vereinsseite hilft,....bis ich es ausprobiert habe!!!

Bis webgen create ... komme ich noch, danach
gibt es keinen "Rakefile" und "webgen render" sagt "Befehl nicht gefunden".

Die Installation über apt ist scheinbar fehlerhaft unter Lenny,
über die Ruby-Verwaltung "gem" geht's auch nicht, da bei debian scheinbar deaktiviert. Wie man es aktiviert, habe ich nirgendwo gefunden.

Nach viel googlen habe ich jetzt aufgegeben.
Entweder ich habe da grob etwas falsch gemacht oder man bekommt webgen nur ans laufen, wenn man schon Ruby -Experte ist!?

Schade eigentlich.

Gruß
Sven


Bewertung: 218 Punkte bei 46 Stimmen.
Den Beitrag bewerten: Gut / Schlecht

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

EasyBCD/NeoGrub
Wolfgang Conrad, 17.12.2017 11:40, 0 Antworten
Hallo zusammen, benutze unter Windows 7 den EasyBCD bzw. NEOgrub, um LinuxMint aus einer ISO Dat...
Huawei
Pit Hampelmann, 13.12.2017 11:35, 2 Antworten
Welches Smartphone ist für euch momentan das beste? Sehe ja die Huawei gerade ganz weit vorne. Bi...
Fernstudium Informatik
Joe Cole, 12.12.2017 10:36, 2 Antworten
Hallo! habe früher als ich 13 Jahre angefangen mit HTML und später Java zu programmieren. Weit...
Installation Linux mint auf stick
Reiner Schulz, 10.12.2017 17:34, 3 Antworten
Hallo, ich hab ein ISO-image mit Linux Mint auf einem Stick untergebracht Jetzt kann ich auch...
Canon Maxify 2750 oder ähnlicher Drucker
Hannes Richert, 05.12.2017 20:14, 4 Antworten
Hallo, leider hat Canon mich weiterverwiesen, weil sie Linux nicht supporten.. deshalb hier die...