69 lines
3.2 KiB
Markdown
69 lines
3.2 KiB
Markdown
|
+++
|
||
|
|
title = "Technik hinter dem neuen Blog"
|
||
|
|
date = "2011-05-18T12:25:00+00:00"
|
||
|
|
author = "Gibheer"
|
||
|
|
draft = false
|
||
|
|
+++
|
||
|
|
|
||
|
|
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](https://github.com/mojombo/jekyll),
|
||
|
|
was auch bei [github](http://github.com) 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](http://redcloth.org/textile),
|
||
|
|
[Markdown](http://daringfireball.net/projects/markdown/syntax),
|
||
|
|
[Haml](http://haml-lang.com/) und noch ein paar andere gestossen. Da ich
|
||
|
|
Textile schon durch [redmine](http://redmine.org) 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](https://github.com/rubychan/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](http://sass-lang.com/) und spaeter noch
|
||
|
|
[Compass](http://compass-style.org/) hinzugenommen.
|
||
|
|
|
||
|
|
Sass ist eine Sprache, mit der sich leicht CSS schreiben laesst. Es
|
||
|
|
bietet Unterstuetzung fuer Variablen, Funktionen und
|
||
|
|
[Mixins](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#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](http://github.com) hochladen, aber mal schauen. Auf jeden Fall
|
||
|
|
werde ich noch ein paar weitere Eintraege machen, in denen ich weitere
|
||
|
|
Teile vorstellen werde.
|
||
|
|
|
||
|
|
viel Spass
|