Eine Nanoc Website from Scratch (Teil 1)

Unter meta, tech | von Andy Drop | Kommentare
Nanoc Workshop Bild: Nanoc Workshop - Bestimmte Rechte vorbehalten: Andy Drop (cc-by 3.0)

Alle meine Webseiten in den letzten Jahren habe ich mit nanoc.ws '>Nanoc gebaut, einem statischen Webseitenkompiler. Da ich gerne mit der inzwischen gesammelten Erfahrung die Seite des Nachtnerd-Podcasts 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.

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 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.

[:/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

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.

[:/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.

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 in die Adresszeile unseres Browsers eingeben. Wir sehen dann folgendes.

Für diesen ersten Teil bleibt uns nur noch den bisherigen Stand auf Github zu veröffentlichen

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

crash.log
output/*
tmp/*

Der Stand zum Ende dieses Teil findet sich hier