Eine Nanoc Website from Scratch (Teil 1)

Alle meine Webseiten in den letzten Jahren habe ich mit Nanoc gebaut, einem statischen Webseitenkompiler. Da ich gerne mit der inzwischen gesammelten Erfahrung die Seite des "Nachtnerd-Podcasts":http://nachtnerd.podmission.de noch mal neu machen würde, mach ich das hier einfach mal öffentlich.

Statischer Webseiten-Compiler bedeutet, das ich hier mit Nanoc ein Programm auf dem Rechner habe, das eine Handvoll Dateien entgegennimmt, und sie zu einer Handvoll HTML-Seiten verarbeitet, die danach nur noch auf einen Webserver geladen werden müssen, und damit online zur Verfügung stehen. Im Gegensatz zu den verbreiteten dynamischen Content-Management-Systemen gibt es hier keine Datenbank, aus der der Webserver erst beim Aufruf die Seite generiert , sondern der Webserver hat keine andere Aufgabe mehr zu erfüllen als die fertige Seite auszuliefern. Ideal auch für kleine PCs im Einsatz als Webserver.

In dieser ersten Folge richten wir uns zubächst mal unsere Arbeitsumgebung ein.

h3. Die Arbeitsumgebung

Zunächst einmal möchte ich Nanoc auf meinem Laptop laufen lassen, später soll das aus Komfortgründen auf dem Webserver selbst passieren. Aber dazu dann zu gegebener Zeit mehr. Nach der "Installation von Nanoc":http://nanoc.ws/install/ selbst, geht es zuerst darum uns ein entsprechendes Verzeichnis anzulegen und dort das mindeste an Grundgerüst einer Website zu erzeugen. Nanoc übernimmt diese beiden Aufgaben selbst in einem Schritt.

bc. [:/home/andy/projects/nachtnerd] $ nanoc create_site blog create nanoc.yaml create Rules create content/index.html create content/stylesheet.css create layouts/default.html Created a blank nanoc site at 'blog'. Enjoy!

Das Verzeichnis /home/andy/projects/nachtnerd hatte ich dabei vorher noch per Hand angelegt. Es enthält bereits einige Grafiken, die ich später gern verwenden würde, also eine kleine Materialsammlung, darunter lasse ich mir von Nanoc mittels @nanoc create_site blog@ die eigentliche Website unter dem Namen blog anlegen. Dabei enstehen ein paar Dateien:

nanoc.yaml: enthält die Konfiguration der Website. hier finden der Name der Site und ähnliche globalen Einstelungen ihren Platz

Rules: ist die zentrale Steuerdatei für die einzelnen Elemente der Website. Hier wird festgelegt, welche Dateien erzeugt werden, und wo sie später in der fertigen Website ihren Platz finden.

content/index.html ist eine Beispielseite

content/stylesheet.css ist das dazu passende Stylesheet

layouts/default.html: ist das sehr einfache Layout, das benutzt wird.

Wenn wir nun in das @blog@ Verzeichnis wechseln finden wir dort noch zwei weitere Unterverzeichnisse, @lib@ und @output@

bc. content layouts lib output nanoc.yaml Rules [:/home/andy/projects/nachtnerd/blog] $

Ersteres enthält eine Datei in der wir selbstgeschriebenen Ruby-Code anmelden können, wenn wir für unser Projekt solchen erstellt haben (wir werden das noch tun). Im @output@ Verzeichnis landen später alle Dateien, die nanoc erzeugt. Den Inhalt dieses Verzeichnisses kopieren wir also später auf einen Werbserver, wenn wir ihn eröffentlichen wollen. Schauen wir doch mal, was dort erscheint, wenn wir nanoc mit einem beherzten @nanoc@ (kurz für @nanoc compile@) starten.

bc.. [:/home/ … /projects/nachtnerd/blog] $ nanoc Loading site data… done Compiling site… create [0.00s] output/stylesheet.css create [0.00s] output/index.html

Site compiled in 0.07s.

p. Aus den 3 Dateien sind offensichtlich 2 geworden. die @index.html@ die traditionell von Webservern angezeigt wird, wenn man es nicht anders konfiguriert, und das Stylesheet, welches diese Webseite benutzt. Nanoc hat also den Inhalt aus dem @content@ Verzeichniss mit dem Layout aus @layout@ kombiniert.

Das Ergebnis lassen wir uns mal anzeigen. dazu verfügt nanoc über einen kleinen eingebauten Webserver, der sich mit @nanoc view@ aufrufen lässt. Gestoppt wird er ganz normal über Strg-C. Sobald der Webserver ein paar Sekunden später läuft. können wir uns die Seite ansehen, indem wir "http://localhost:3000":http//localhost:3000 in die Adresszeile unseres Browsers eingeben. Wir sehen dann folgendes.

!nanoc-basic.png(Die nanoc Musterseite)!

Für diesen ersten Teil bleibt uns nur noch "den bisherigen Stand auf Github zu veröffentlichen":https://github.com/andydrop/nachtnerd/tree/87caa28a1101f46a20f239c0b6d85967dc5a22c3

Als Eintrag in das @.gitignore@ also die Liste der Dateien die wir nicht veröffentlichen wollen, bieten sich drei Elemente an:

Das Verzeichnis @output@, da wir seinen Inhalt jederzeit durch einen Start von nanoc neu erzeugen lassen können

Das Verzeichnis @tmp@ das beim Compile-Vorgang erzeugt wird, hier merkt sich nanoc, den Zustand aller Dateien, damit es, wenn sich nur eine Datei geändert hat nicht unbedingt alles neu compiliert, sondern eventuell nur diese eine Datei. Wird dieses Verzeichnis also gelöscht, passiert nichts schlimmeres, als das nanoc eben die gesamte Site neu kompiliert.

Die Datei crash.log. Wenn irgendetwas schief geht schreibt nanoc hier detaillierte Hinweise zur Fehlerursache. Danach kann die Datei weg, weil sie sowieso überschrieben würde.

Unsere @.gitignore@ sieht also so aus

bc. crash.log output/* tmp/*

Der Stand zum Ende dieses Teil findet sich "hier":https://github.com/andydrop/nachtnerd/tree/87caa28a1101f46a20f239c0b6d85967