Static Site Generator

Beim Programmieren dieser Webseite kam ich schnell zu der Frage, wie ich das Erstellen der einzelnen Seiten optimieren und automatisieren kann. Ich wollte eine einfache statische Webseite ohne Javasript, PHP oder ähnliches, in der ausschließlich HTML und CSS Verwendung finden. Jede Seite dieser Webpräsenz ist ein eigenes HTML-Dokument, das alle Informationen für den Aufbau der Seite enthält. Neben dem eigentlichen Inhalt sind das auch die Kopfleiste mit dem dem Banner, das Menü, die Fußleiste und die Allgemeinen Layoutinformationen. Nur die CSS-Definitionen sind in zwei separaten Dateien, die von allen Seiten genutzt werden.

Außer dem Inhalt sind jedoch alle Informationen quasi redundant, weil sie auf allen Einzelseiten gleich sind und auch gleich sein sollen. Das hat zur Folge, dass wenn man etwas an dieses Daten ändert man es in allen HTML-Dokumenten der Webseite ändern muss. So muss z.B. eine neue Einzelseite im Menüteil aller anderen Seiten eingetragen werden, damit man auch von diesen dahin navigieren kann. Da dieser Prozess von Hand aufwändig und fehlerträchtig ist musste eine Möglichkeit gefunden werden es zu automatisieren.

Die Idee ist nicht neu wie man an dieser beeindruckend langen Liste von existierenden Static Site Generators sehen kann. Allerdings haben mich diese nicht auf Anhieb angesprochen. Die meisten sind Komanndozeilentools die auf Basis von Scriptspachen wie Python oder Ruby funktionieren was den Installations erhöht. Ein einfaches Programm mit grafischer Benutzeroberfläche habe ich auf Anhieb nicht gefunden, weshalb ich beschloss eines selbst zu schreiben. So konnte ich es genau auf meine Bedürfnisse anpassen und weiß zudem jederzeit en detail was hinter den Kulissen passiert. Das Ergebnis hat sich als derart praktisch herausgestellt, dass ich es hier Vorstellen und das Programm zum Download anbieten möchte.

Funktionsweise des Programms

Im Prinzip macht das Programm nichts anderes als eine Vorlagendatei einzulesen, Texte darin durch den Inhalt anderer Dateien zu ersetzten und die Resultate abzuspeichern. Die Vorlagendatei ist eine Entkernte Webseite in der die Stellen mit HTML-Kommentaren markiert sind, an denen Text eingefügt werden soll. Der Quellcode ist im Bild rechts zu sehen. Das Programm ist so simpel, dass es lediglich drei Parameter hat die man eingeben muss. Das ist zum einen das Quellverzeichnis, in dem sich die HTML-Dokumente für den Inhalt der einzelnen Seiten befinden, und zum anderen die Vorlagendatei (Template) und ein Zielverzeichnis, in dem dem die generierten Dateien gespeichert werden. Die eigentliche Leistung des Programms besteht jedoch darin, aus allen gefundenen Seiten automatisch ein Menü und in die erzeugten Seiten einzufügen.

Das Menü

Ich benutzte für meine Seite ein Drop-Down-Menü das mittels CSS und HTML erzeugt wird. Wie das ganze funktioniert ist in diesem Tutorial sehr gut erklärt. Die Darstellung des Menüs wird im CSS definiert und die Webseite enthält lediglich ein mehrstufige Liste der Menüpunkte mit den damit verknüpften Links. Zum Verständnis empfehle ich, den Quelltext dieser hier anzuschauen, denn der ist natürlich genauso erzeugt worden. Beim Erzeugen des Menüs hält sich das Programm an die Struktur die es im Verzeichnisbaum des Quellordners findet. Im Quellordner selbst sucht es nicht nach HTML-Dateien sondern zunächst einmal nur nach Unterorndern. Für jeden gefundenen Unterordner erzeugt es eine neue Kategorie im Menü die den Namen des Ordners trägt. Eine Ausnahme ist der Ordner mit dem Namen ExcludeFromMenu. Findet das Programm diesen Ordner im Quellverzeichnis legt es für ihn keinen Menüpunkt an und trägt auch die darin eventuell enthaltenen HTML-Dokumente nicht ins Menü ein. Dies kann benutzt werden um Seiten zu generieren, die nicht über das Menü erreichbar sein sollen. Zum Beispiel die Errordocs die bei 404-Fehlern gezeigt werden sollen.

Im nächsten Schritt schaut das Programm in die gefundenen Ordner und sucht nach Dateien mit der Endung .htm oder .html. Für jede Datei legt es im Menü einen Unterpunkt an. Als Text für den Unterpunkt wird der Name der Datei gewählt und als Ziel des Menüpunkt-Links wird ebenfalls eine Htm-Datei mit dem selben Namen eingetragen. Zudem wird der Inhalt der Datei in einen Puffer gelesen und zusammen mit dem Namen zwischengespeichert. Sobald alle Dateien eingelesen wurden, ist das Menü fertig generiert und wird zur Kontrolle in einem Textfeld angezeigt. Nun beginnt das Programm die Ausgabedateien zu erzeugen. Es läd die Templatedatei und geht geht alle gepufferten Dateien der Reihe nach durch und führt folgenden drei Textersetzungen durch:

 wird ersetzt durch dem Namen der Quelldatei ohne die Dateiendung
 wird ersetzt durch das generierte Menü
 wird ersetzt durch den zuvor gelesenen Inhalt der Quelldatei
 wird ersetzt durch Text der in Form eines HTML-Kommentars in der Quelldatei definiert werden kann
 kann ebenfalls durch eine Kommentarzeile bestimmt werden

Anschließend wird der so erzeugte Text als neue HTM-Datei im Zielverzeichnis unter dem Namen der Quelldatei gespeichert.

Sortieren mit Präfixen

Wie bereits erwähnt, hält sich das Programm bei der Struktur des Menüs an die Verzeichnisstruktur des Quellordners. Dadurch hat man aber keine Möglichkeit die einzelnen Menüpunkte und Kategorien zu sortieren sondern sie werden automatisch in alphabetischer Reihenfolge angeordnet. Um dem Abhilfe zu schaffen wurden Nummerische Präfixe eingeführt, die vom Programm erkannt und bei der Namensvergabe für die Menüpunkte und Ausgabedatein automatisch entfernt werden. Fängt ein Datei- oder Ordnername mit einer Ziffernfolge und einem Unterstrich an, wird dieser Teil des Namens weggeschnitten. So lassen sich die Datein im Verzeichnis wie gewünscht sortieren auch wenn ihre Namen nicht die passende alphabetische Reihenfolge haben. Ein weiteres Präfix ist das Doppelkreuz (#). Findet das Programm in einem Ordner - der ja eine Kategorie im Menü erzeugt - eine HTM-Datei die mit einem Doppelkreuz beginnt, so wird für diese kein Untermenüpunkt erzeugt, sondern der Kategoriepunkt selbst linkt zu dieser Datei. So gibt es zum Bespiel auf digital-nw.de in den Menükategorien "Home" und "Kontakt" keine Unterpunkte sondern sie linken direkt auf die Datein "index.htm" und "Kontakt.htm".

Da die Einstellungen für ein Projekt meist gleich sind, bietet das Programm die Möglichkeit sie zu speichern. Das Programm ist in Qt und zum bearbeiten wird die Qt-Entwicklungsumgebung benötigt. Da es sich um ein Programm handelt, welches der kundige Anwender vermutlich an seine Bedürfnisse anpassen will sellte ich hier den Quellcode und das die Qt-Projektdateien zur Verfügung. Für mich selbst ist das Programm eine große Hilfe. Ich schreibe etwas im Texteditor, speichere, klicke auf Dateien Erstellen und schon kann ich im Browser F5 drücken und die Änderungen sehen.

Downloads

StaticSiteGenerator.zip Lauffähiges Windows-Programm (18 MB)
StaticSiteGenerator_Source.zip Quellcode und Qt-Projekt (16 kB)