Neue Webseite

veröffentlicht am 5. Februar 2015

Seit einiger Zeit haben wir auf GitHub gemeinsam an einer neuen Webseite gebastelt und diese jetzt "deployed" wie man in der Welt der Web-Hipster sagt.

In erster Linie wollten wir die bisherige, auf Wordpress basierende Seite wegen all ihrer Probleme (PHP, security, updates, account management etc.) durch statisch generierte Seiten ersetzen. Bei einem solchen Neuanfang kann man sich auch gleich an aktuelle Gepflogenheiten der Web- und Softwareentwicklung halten.

Alles beginnt im GitHub Repository des RaumzeitLabors mit rzl-homepage, wo der gesamte Code und Inhalt der Seite liegt.

Abgesehen von den Blogbeiträgen bauen wir mit JavaScript und der Tumblr API eine "endlos" scrollende Seite mit Bildern aus unserem Log und eine kleine Übersicht über unsere Vortragsvideos. Für die Anreise zum RaumZeitLabor haben wir eine interaktive Beschreibung mit OpenStreetMap Karten gebaut.
Unser Eventkalender, der eines der größten Sorgenkinder der Wordpress Installation war, liegt jetzt auf einem CalDAV Server

Wenn jemand jetzt im GitHub einen Commit oder einen Pull-Request erstellt, kümmert sich Travis darum, die Seite zu bauen. Das ganze ähnelt dem Kompilieren von Software, weil aus allen rohen Blogtexten, Bildern, Events und Links ein statisches Konstrukt aus HTML, CSS und JavaScript erstellt werden muss. Im Gegensatz zu Wordpress werden also sämtliche Seiten nicht dynamisch beim Aufruf auf dem Server generiert und ausgeliefert (PHP) sondern sie liegen immer schon "fertig" auf dem Server.

Für den eigentlichen Bauvorgang nutzen wir Grunt, eine Art "Makefile fürs Web". Grunt führt diverse Arbeiten durch, um den JavaScript-Code und das CSS zu prüfen und zu verkleinern, kopiert alle Inhalte an passende Stellen und führt Jekyll aus. Jekyll überführt die einzelnen Texte der Blogposts zusammen mit Layout, Templates und CSS zu einer statischen Webseite mit Blogcharakter zusammen.
Zum Schluss werden noch alle HTML Seiten minimiert, damit die Webseite schnell lädt.

Travis protokolliert alle Builds, so dass ihr genau nachsehen könnt, wie der Prozess abläuft. Wenn die Webseite erfolgreich baut, wird dieser Zustand auf unseren Server kopiert und ist ab dann "live".

Um dem "mobile first" Gedanken zu genügen, nutzen wir das Bootstrap Framework, das sich um die passende Skalierung der Seite für alle Geräte kümmert. So schrumpft z.B. die Menüleiste auf den kleinen Smartphonebildschirmen automatisch zu einem Menübutton zusammen.

Ein GitHub Account ist jetzt also die einzige Hürde, um einen Blogpost zu schreiben.
Mehr über die neue Seite gibt es auch im Wiki. Wer mitentwickeln will, findet bei GitHub auch einen Docker Container zum Sofort-Loslegen.

Send Pull-Requests!