Unternehmer und Geek

Redesign von WordPress zu Jekyll nach Wintersmith

Written by

Raphael

in

Vor ca. 3 Monaten habe ich mein WordPress Blog durch Jekyll abgelöst und habe das Blog auf Github verschoben. Funktioniert eigentlich wunderbar, ausser dass mir Ruby nicht sehr sympathisch ist, bzw. ich keine Zeit und Lust habe mich mit Ruby zu beschäftigen, daher die Suche nach einem anderen Static Site Generator (SSG). Es gibt anscheinend solche in PHP, aber scheint irgendwie nicht zu passen und Java gibt es sicher auch, aber nein Danke und so landete ich bei Wintersmith (node.js basierend).

Hosting & Publishing Architektur

Github Pages basieren auf logischerweise auf Git. Es hat mich gestört, dass ich ständig das Gitrepository haben musste und auf Github zu edtieren ist zwar möglich aber nicht wirklich eine Freude. Manuell die Seite jedes mal zu builden schien mir auch zu kompliziert, daher die Idee des Dropbox Hostings. Der Workflow dazu sieht wie folgt aus:

  1. Neue Seite im Admin Interface erstellen. Das erstellt im verknüpften Dropbox Konto einen neuen Ordner.
  2. Wintersmith Seite in Dropbox anlegen.
  3. Seite wird auf meinen Server synchronisiert und dort als Wintersmith Projekt auf Webserver gebaut.
  4. Die aktuelle Dropbox API erlaubt lediglich ein Polling, daher wird im regelmässigen Zyklus nach Änderungen gepollt, alternativ kann ich auch übers Admin Interface manuell publizieren

Als Webserver habe ich nginx. Ich habe mich seit einigen Monaten von Apache verabschiedet. Mir scheint nginx logischer und einfacher zu konfigurieren und hinzu kommt, dass er anscheinend schneller und weniger ressourcenhungrig zu sein scheint (das ist eine nicht fundierte Aussage). Es fehlt daher lediglich noch eine Regel, um subdomains automatisch auf einen Ordner zu mappen, also blog.rapsli.ch -> /vaw/www/public/blog und schon ist meine eigene Cloud ready. Die Konfiguration für nginx dafür sieht wie folgt aus (hier gefunden).

server {  
    listen  80; 
    server_name   ~^(.*).nginxdomain.com$; 
    #if directory doesn't exist
    if (!-d /home/domains/nginxdomain.com/public/$1) {
        rewrite . http://www.nginxdomain.com/ redirect;
    }

    # Sets the correct root
    root /home/domains/nginxdomain.com/public/$1;
}

Vorteile von Node.js

Wie gesagt habe ich vorher mit Jekyll gearbeitet und ich muss sagen, der Build Prozess ist schleppend langsam. Mein Blog mit knapp 600 Einträgen hat doch eine gewisse Zeit gebraucht. Mit Node und Wintersmith geht das alles merklich schneller, doch das ist eigentlich nur der kleinere Teil der Erfolgsstory.
Die asynchrone Natur von Node.js und die damit verbundenen Vorteile kommen in diesem Szenario richtig gut zur Geltung:

  • Polling der Dropbox API übers Netzt -> sehr langsam
  • Builden via Wintersmith -> auch nicht super schnell

Im Normalfall, z.B. mit PHP, könnte das alles nur seriell abgearbeitet werden. Dank der Asynchronität von Node.js kann das jetzt alles parallel bearbeitet werden, was sich besonders im Zusammenspiel mit der Dropbox API positiv zeigt -> die meiste Zeit muss ja eh gewartet werden.

Der Design Prozess

Ich bin immer noch kein Designer, aber die aktuellen Tools (besonders die Grid Layouts) machen vieles einfacher. Des Weiteren ist man beim Design für einen Static Site Generator viel flexibler und schneller, da keine Datenbank und komplexe Logik dahinter steckt. Natürlich muss dadurch auch der eine oder andere Kompromiss eingegangen werden, doch dazu bin ich gerne bereit:

  1. Reines HTML Dokument anlegen
  2. Template in Hierarchie aufteilen
  3. Statischen Text durch Template Tags ersetzen

Bei Schritt 1 ist lediglich HTML, CSS und Javascript vorhanden -> ultra performant und zackig.
Zuerst habe ich mit dem Gedanken gespielt, irgend ein HTML Template zu nehmen, doch die Neugier mal wieder etwas komplett selber zu machen hat dann doch gesiegt. Da ich kein grosser Held mit Photoshop bin, wird es gezwungener Massen ein Design ohne viel Schnick Schnack und ohne aufwändige Grafiken, aber das auch auch irgendwie seinen Reiz.
Das Grundgerüst steht aber es hat noch viele Lücken. Noch länger mit der Migration warten? Nein, wollte ich dann doch nicht. So habe ich jetzt das Redesign schon mal publiziert und werde dann über die Zeit die noch offenen Lücken stopfen.

Responsive ist Pflicht

Auch hier wieder: Grid Systems (Twitter Bootstrap) seid dank, ist das eigentlich nicht allzu aufwändig. Im Detail hat es noch Potential nach oben, aber kommt Zeit kommt Rat. So wird auch hier sicher noch der eine oder andere Fehler behoben.

Migrations Beigemüse

Die URL Struktur habe ich bei der Gelegenheit auch gleich mal angepasst. Diese war bisher: rapsli.ch/[titel] und ist jetzt neu blog.rapsli.ch/posts/[jahr]/[titel]. Damit nicht alle Links komplett kaputt gehen habe ich 600 rewrite rules gemacht, welche in der nginx Config liegen. Einzig die Migration der Kommentare habe ich leider noch verhauen, dabei wäre es so einfach gewesen, hätte ich nur 1 Minute länger gelesen, aber das kommt davon, wenn man morgens um 1 Uhr noch so etwas machen will.

Offene Punkte

Noch gibt es einige Dinge, welche ich zu erledigen habe:

  • Die Sache mit den Kategorien
  • Die Google Suche einbinden
  • Die Kommentarmigration noch retten (falls möglich) (Keine Lust dazu… tschüss Kommentare)
  • Design noch verfeinern
  • Den restlichen Inhalt noch einfügen
  • Sitemap erstellen

Tools, welche ich verwende

In meinem Workflow setze ich die folgenden Tools ein:

  • Dropbox
  • Writebox App, um von überall her Inhalt zu ändern
  • nginx als Webserver
  • Wintersmith als rendering Engine
  • Node.js als darunterliegende Technologie

Alles in Allem: Sehr zufrieden und die darunter liegende Infrastruktur ist super! Falls du interesse hast, ein Alpha Tester zu sein, darfst du dich gerne mal bei mir melden.

More posts