Technik hinter dem neuen Blog

Whaerend der alte Blog noch auf eine Datenbank zurueck gegriffen hat, ist der neue Blog komplett statisch. Alle Blogeintraege werden in Form von Textdateien geschrieben und anschliessend zu html konvertiert.

Als Generator benutzen wir jekyll, was auch bei github zum Einsatz kommt. Es laesst sich einfach erweitern und mit verschiedenen Markupsprachen kombinieren. Die einzelnen Eintraege bekommen einen Markupunabhaengigen Header verpasst in dem Daten gespeichert werden, wie zum Beispiel Keywords, das Erscheinungsdatum, der Autor und was man noch so moechte.

Da mir html schreiben auf dauer zu nervig war, habe ich mich umgeschaut, welche anderen Sorten von Markup es denn gibt und bin auf Textile, Markdown, Haml und noch ein paar andere gestossen. Da ich Textile schon durch redmine kannte und die syntax mir einfacher als die von Markdown vorkam, habe ich mich fuer Textile entschieden. Haml wollte ich fuer die Layouts benutzen, allerdings waere es einiges an Aufwand gewesen Jekyll dies beizubringen. Also sind zumindest die Layouts in einfachem HTML geschrieben.

Da ich ab und zu auch mal Syntax-Highlighting benoetige, stand natuerlich noch die Frage im Raum, mit welcher Engine sich dieses Problem loesen laesst. Jekyll hat dafuer bereits eine Schnittstelle eingebaut, welches auf die Pythonlib Pygments zugreift. Es erschien mir allerdings etwas abwegig beim kompillieren zwei verschiedene Scriptsprachen laufen zu lassen. Da die einzig andere Loesung unter Ruby coderay heisst, habe ich dieses eingebaut und mit Textile verkuppelt.

Da wir das Design ein bischen aufpeppen wollten und damit auch etwas CSS3 einzustreuen, stand natuerlich die Frage im Raum: “Wollen wir die ganzen besonderheiten selber bauen?” Natuerlich nicht! Deswegen habe ich zuerst Sass und spaeter noch Compass hinzugenommen.

Sass ist eine Sprache, mit der sich leicht CSS schreiben laesst. Es bietet Unterstuetzung fuer Variablen, Funktionen und Mixins. Mit letzterem lassen sich Attributsbloecke bilden und dann mit einer Zeile an der jeweiligen Stelle importieren.

Compass bietet dazu weitere Funktionen, um zum Beispiel Farben zu bearbeiten, Farbverlaeufe zu erstellen oder das komplette Layout zurueck zusetzen.

Wenn man sein Design dann fertig hat, kann man Sass dann anweisen die CSS-Datei
so zu formatieren, dass einiges an Speicher gespart werden kann.

Da der Blog nun allerdings komplett statisch ist, haben wir ein Javascript von Disqus mit eingebaut, welches eine Diskusionsplatform bereitstellt. Ob sich das allerdings lohnt, muss sich erst noch zeigen.

Den Blog insgesamt werde ich vielleicht bald auf github hochladen, aber mal schauen. Auf jeden Fall werde ich noch ein paar weitere Eintraege machen, in denen ich weitere Teile vorstellen werde.

viel Spass