Nach nunmehr vier Jahren, ist es an der Zeit gewesen, dem Blog ein neues und frisches Design zu verpassen. Gleichzeitig habe ich die in die Jahre gekommene Blog Software Serendipity durch den statischen Webseiten Generator Pelican ersetzt.

Pelican

Pelican ist ein in Python geschriebener statischer Webseiten Generator. Im Gegensatz zu Wordpress, Serendipity und Konsorten benötigt er keine Datenbank und keine serverseitige Programmiersprache, um einzelne Seiten darstellen zu können. Während einzelne Artikel auf dem heimischen Rechner in reStructuredText, Markdown oder AsciiDoc geschrieben werden können, werden auf der Serverseite ausschließlich statische HTML-Dateien hochgeladen. Das heißt, der Server benötigt kein PHP, kein Python, keine MySQL-Datenbank, kein gar nichts!

Einige werden sich sicherlich die Frage stellen: "Ein Blog ist doch dynamisch und enthält viele automatisch generierte Inhalte, wie Tag- und Kategorieseiten, Atom- und RSS-Feeds, und vieles mehr. Statische Webseiten können so etwas doch nicht bieten, oder?" Doch, können sie!

Pelican generiert alle einzelnen Webseiten, auch Atom- und RSS-Feeds, stellt unterschiedliche Themes bereits, die mit Hilfe der Template-Sprache Jinja2 individuell angepasst werden können und kann mit Hilfe von unterschiedlichen Plugins erweitert werden. Interessante Plugins, von denen das ein oder andere auch hier im Blog eingesetzt wird, sind unter anderem:

Kurzum, alles was das Herz beziehungsweise ein eigener Blog begehrt. ;)

Für einen Einstieg in Pelican kann ich neben der hervorragenden Dokumentation, auch den schönen Blogeintrag von Eric Carmichael empfehlen.

Migration von Serendipity zu Pelican

Mit pelican-import steht zwar ein Tools zur Verfügung, das den Import von verschiedenen Blogsystemen, wie bspw. Wordpress, Dotclear oder tumblr, aber auch von Atom/RSS-Feeds ermöglicht, allerdings nicht Serendipity. Ja, selbstverständlich bietet Serendipity Feeds an, jedoch werden diese nur angeteasert und enthalten nicht den kompletten Inhalt.

Also musste eine eigene Lösung her.

Um wenigstens Teile der Artikel inklusive der Header-Information zu besitzen, habe ich zuerst mittels pelican-import den RSS-Feed importiert und direkt nach Markdown konvertiert. Sämtliche Artikel inklusive aller verwendeten Bilder konnte ich schön mittels wget crawlen: wget -r --no-parent http://50226.de/. Das Komplizierte war nun die Verbindung von den angeteaserten Artikel im Markdown-Format und den einzelnen HTML-Dateien. Hier habe ich mir mit einigen sed-Scripten aushelfen können, den von denen ich die zwei Wichtigsten vorstellen möchte:

Auslesen der Artikelinhalte der HTML-Seiten und Umbennenung in entsprechende md-Dateien:

for i in `ls *.html`; do tr '\n' ' ' < $i | grep --color -o "<div class=\"entry\">.*po_container" | sed 's/\(<div class=\"entry\">\|<div class=\"po_container\)//g' > $i.tmp && html2text $i.tmp > `basename $i .html`.md && rm $i.tmp; done

Ersetzung von absoluten Links durch Verlinkung auf entsprechende md-Dateien:

for i in `ls *.md`; do sed -E 's#http://50226.de/(.*).html#|filename|\1.md#g' $i > $i.tmp;mv $i.tmp $i; done

Obwohl ich die meisten Dinge automatisieren konnte, musste ich vereinzelt den ein oder anderen Artikel doch noch manuell anpassen. Hier ging es vor allem um verloren gegangene Leerzeilen, die Markdown bspw. bei einem neuen Paragraphen voraussetzt. Weiterhin habe ich neben den üblichen Rechtsschreibfehlern, die man doch noch im Nachhinein findet, einzelne tags entfernt, die in meinen Augen nicht mehr relevant waren.

Design

Hier zum Vergleich erst einmal das alte Layout, das eine Spur dunkler, aber auch in meinen Augen, schwerer zu lesen war. 50226.de im alten Layout Und das neue: 50226.de im neues Layout

Das neue Layout verwendet keine einzige Grafik. Ja, richtig gelesen, auch die Icons in der oberen Leiste sind keine Grafiken im eigentlichen Sinne. Sie basieren auf der Schriftart Font Awesome. Der Rest ist, wie üblich, HTML5 und CSS3. Eine weitere entscheidende Änderung gegenüber dem alten Layout ist, dass ich nicht mehr auf Standardschriftarten der Browser setze. Während ich mich beim Fließtext für PT Sans entschieden habe, verwende ich bei den Überschriften League Gothic.

Obwohl ich mich persönlich nicht als Designer bezeichnen würde, muss ich zugeben, dass mir dieses Mal ein recht ansehnliches Layout gelungen ist. Klarer, übersichtlicher und einfach lesbarer. ;)

blogroll
tags