Neuerstellung der solarbetriebenen Website

Tue, 13 Jun 2023 00:00:00 +0000

Ein Screenshot der Markdown-Datei von dieser Seite.

In den letzten Monaten haben wir daran gearbeitet, die solarbetriebene Website von einem statischen Website-Generator (Pelican) auf einen anderen (Hugo) umzustellen. Viele Leser werden die Änderungen nicht sofort bemerken, da wir keine größeren Anpassungen am Design vorgenommen haben. Dennoch hat uns die neue Plattform ermöglicht, auf Grundlage des Feedbacks, das wir im Laufe der Jahre erhalten haben, einige Probleme anzugehen.

Die neue Solar-Website wurde von Marie Otsuka und Roel Roscam Abbing entworfen, den gleichen Personen, die auch hinter dem ersten Solar-Design standen. Marie Verdeil unterstützte den gesamten Prozess und koordinierte die Migration der Website.

Umstellung auf eine neue Plattform

Die ursprüngliche Solar-Website, die 2018 veröffentlicht wurde, lief auf einem statischen Website-Generator namens Pelican. Obwohl dies eine gute Wahl für relativ kleine Websites ist, ist die solarbetriebene Version von Low-tech Magazine im Laufe der Zeit erheblich gewachsen. Anfangs enthielt die Website nur eine Auswahl englischsprachiger Artikel. Im Laufe der Zeit wurde sie jedoch erweitert, um nicht nur mehr englischsprachige Artikel, sondern auch Übersetzungen in fünf weiteren Sprachen einzubeziehen. Das Veröffentlichen von Artikeln und das Einpflegen von Änderungen auf einer so großen Website wurde zunehmend zu einem umständlichen Prozess. Zum Beispiel dauerte es mehr als eine Stunde, um die Website bei Änderungen neu zu generieren, selbst wenn wir nur einen Kommentar hinzugefügt hatten.

Hugo ist ein statischer Website-Generator, der in einer schnelleren Programmiersprache geschrieben ist. In Pelican kamen viele der Funktionen, die wir für die Website benötigten (wie die Unterstützung von mehreren Sprachvarianten und Bildkompression) aus Plugins unterschiedlicher Qualität. Dabei sind wir im Laufe der Zeit an Grenzen gestoßen. Bei Hugo sind diese Anforderungen bereits als Grundfunktionen abgedeckt. Durch den Wechsel zu Hugo konnten wir die Generierungszeit auf dem Server von über einer Stunde auf etwa zwölf Minuten reduzieren. Auf einem modernen Laptop liegt der Unterschied zwischen mehreren Minuten und mehreren Sekunden.¹

Abgesehen von schnelleren Website-Builds ermöglicht Hugo eine bessere Organisation der Inhalte und ist flexibler bei der Erzeugung von Übersichtseiten. Dies ermöglichte uns zum Beispiel, Seiten zu erstellen, auf denen die verschiedenen Mitwirkenden und Übersetzer*innen des Magazins hervorgehoben werden. Die Migration aller Inhalte von Pelican nach Hugo war jedoch ziemlich zeitaufwändig. Dies lag an subtilen Unterschieden im Format der Metadaten sowie an unserer Implementierung, die eigene Shortcodes erfordert, um Bilder, Bildunterschriften und Links anzeigen zu können. Wir haben die Mehrheit der Artikel von einer Plattform auf die andere mit einem eigenen Skript konvertiert, aber es dauerte weitere zwei Monate, um Fehler bei der automatischen Migration zu erkennen und manuell zu beheben.

Designänderungen

Batterieanzeige

Der Relaunch ermöglichte es uns, zwei Designprobleme anzugehen, die in den letzten Jahren regelmäßig im Feedback aufgetaucht sind. Das erste betrifft die Batterieanzeige, die den Ladezustand unseres autarken Webservers durchscheinen lässt. Einige Leute fanden, dass sie den Lesevorgang störte, besonders wenn sie sich auf halber Höhe befand. Die Batterieanzeige bleibt ein grundlegender Bestandteil unseres Designs und macht die materielle Infrastruktur sichtbar, die die Website trägt. Allerdings befindet sie sich nun oben im Dokument und bewegt sich nicht mehr mit, während man in einem Artikel nach unten scrollt. So wird die Lesbarkeit des Textes nicht mehr beeinträchtigt.

Bilder

Die zweite und größte Designverbesserung betrifft die Bilder. Die Bildkompression mit Dithering funktioniert für viele Bilder gut und macht Schwarz-Weiß-Bilder sogar interessanter. Allerdings werden manche Bilder dadurch schwer zu erkennen. Dies gilt insbesondere für Grafiken, die unleserlich werden können, wenn sie nicht schon mit Dithering im Hinterkopf entworfen wurden. Bei einigen anderen Bildern gehen Informationen durch den Dithering-Prozess verloren – beispielsweise wenn Farben verwendet werden, um etwas auszudrücken.

Das neue Design ermöglicht es Besucher*innen, die Dithering-Kompression für einzelne Bilder auszuschalten und das Originalfoto oder die Originalillustration anzuzeigen. Die Originalbilder, die wir zeigen, sind konventionell komprimiert und etwas größer als die Bilder mit Dithering. Das Anzeigen der Originalbilder erhöht also die Belastung unseres Servers. Es bleibt abzuwarten, wie sich dies auf den Energieverbrauch und die Verfügbarkeit der Solar-Website auswirken wird.

Außerdem gehen die Bilder nicht mehr über die gesamten Bildschirmbreite, was sinnvoller ist, wenn die Website auf einem großen PC-Monitor betrachtet wird.

Quellcode

Wie beim ursprünglichen Pelican-Theme geben wir das Hugo-Theme als Open-Source-Software frei. Das ursprüngliche Solar-Web-Theme und die Plugins bleiben verfügbar, werden aber nicht mehr aktualisiert und gepflegt.

Low-tech Magazine auf 1 Website betreiben

Diese umfangreiche Neugestaltung ist der vorletzte Schritt hin zum Betrieb von Low-tech Magazine auf nur einer einzigen (solarbetriebenen) Website. Seit dem Start der solarbetriebenen Website im Jahr 2018 ist die alte (englischsprachige) Website online und auf dem neuesten Stand geblieben. Dies ist aus mehreren Gründen problematisch.

Erstens widerspricht es unserem Ziel, den ökologischen Fußabdruck der Publikation zu verringern, wenn wir zwei ähnliche Websites betreiben. Zumal die ursprüngliche Website – eine dynamische Website, die auf der Blogging-Plattform TypePad gehostet wird – nicht gerade leichtgewichtig ist. Eine zweite Website, die mit Netzstrom betrieben wird, passt außerdem nicht zu der Idee, offline zu gehen, wenn das Wetter schlecht ist. Die alte Website bleibt unabhängig vom Wetter online. Zweitens erfordert die Aktualisierung von zwei Websites viel zusätzliche Arbeit, die besser dem Schreiben und Recherchieren gewidmet wäre. Das Layout für jeden Artikel muss zweimal auf verschiedenen Plattformen erstellt werden. Kommentare und Änderungen an den Artikeln müssen ebenfalls auf beiden Plattformen aktualisiert werden.

Die höhere Qualität der Bilder war einer der Hauptgründe, um die alte Website weiter zu pflegen. Jetzt, da die Originalbilder auf der solarbetriebenen Website angezeigt werden können, aktualisieren wir die alte Website nicht mehr. Ab sofort erscheinen neue Inhalte (einschließlich Kommentare zu älteren Artikeln) nur noch auf der solarbetriebenen Website. Die TypePad Website bleibt noch bis zum Sommer online. Dann planen wir, den Teil des Archivs, der bisher noch nicht in statische Webseiten konvertiert wurde, ebenfalls zu verschieben. Es handelt sich größtenteils um Artikel und Seiten aus den Anfangstagen.

Für die meisten Sprachen wurde der Wechsel zur solarbetriebenen Website bereits abgeschlossen und die betreffenden Bereiche wurden geschlossen. Die einzige Ausnahme bildet die ursprüngliche niederländischsprachige Website, die nicht mehr aktualisiert wird, aber online bleibt (ebenfalls gehostet auf TypePad), um den Zugriff auf ältere Artikel zu ermöglichen. Aufgrund der großen Anzahl von Originalartikeln auf dieser Website wird sie als letzte der ursprünglichen Websites verschwinden – wenn überhaupt. Sie hat immer noch das ursprüngliche Design von 2007.

Benutzerfreundlichkeit

Das neue Solar-Design bringt den Lesern von Low-tech Magazine nur Vorteile. Allerdings fällt die Bilanz auf der Herausgeberseite weniger erfreulich aus. Eine verbesserte Benutzerfreundlichkeit für die Besucher*innen geht teilweise zu Lasten der Benutzerfreundlichkeit für den Autor. Die von Hugo verwendeten Shortcodes sind deutlich umständlicher als die Syntax, die von Pelican verwendet wird, und das erhöht den Zeitaufwand für das Layouten eines Artikels. Dies macht zum Teil den Zeitgewinn zunichte, der durch das Wegfallen der Aktualisierung der zweiten Website entsteht.

Statische Websites sind viel energieeffizienter als dynamische Websites. Dennoch haben statische Website-Generatoren noch einen langen Weg vor sich, was die Benutzerfreundlichkeit betrifft, bevor sie mainstreamtauglich werden und mit Tools wie WordPress konkurrieren können. In den fünf Jahren zwischen unserer ersten Veröffentlichung und dieser Version ist überraschenderweise keine robuste und benutzerfreundliche Anwendung für statische Website-Generatoren erschienen, die unseren aktuellen Workflow ersetzen könnte. Es gibt zwar mehrere Projekte, aber diese sind alle von proprietären Cloud-Services abhängig. Es gibt bei statischen Website-Generatoren immer noch viel Raum für Fortschritte bei der Entwicklung benutzerfreundlicher grafischer Benutzeroberflächen.

In den kommenden Monaten werden wir versuchen, noch Dinge auf der Herausgeberseite zu verbessern, und wie immer freuen wir uns über Euer Feedback und Eure Vorschläge. Bitte teilt uns auch Fehler oder Inkonsistenzen mit, die uns bei der Migration entgangen sind. Vielen Dank an alle, die dieses Projekt im Laufe der Jahre unterstützt haben.

Um den Unterschied zu verstehen, haben wir sowohl die Hugo- als auch die Pelican-Seitengeneratoren in einem Experiment getestet. Der Pelican-Build basiert auf dem Solar-Theme und den Plugins. Der Hugo-Build basiert auf dem Solar_v2-Theme sowie Skripten zur Dithering- und Dateigrößenberechnung, wie sie im Build-Skript definiert sind. Beide Websites enthalten 447 Artikel in verschiedenen Sprachen und mehr als 1500 Bilder. Die Ergebnisse des Experiments sind in der folgenden Tabelle sichtbar. Die ersten beiden Zeilen zeigen, wie lange es dauert, die Website initial zu generieren. Beim ersten Ausführen müssen alle Ressourcen generiert und Bilder komprimiert werden, was länger dauert als spätere Ausführungen, bei denen die Ressourcen zwischengespeichert sind. Die letzten beiden Zeilen zeigen die Generierungszeiten, wenn die Ressourcen bereits zwischengespeichert sind. Die angezeigten Zeiten sind der Durchschnittswert von drei Durchläufen auf dem Solar-Server (ein A20-Prozessor mit zwei 1-GHz-Kernen und 1 GB RAM) und einem modernen Laptop (ein Intel i7-8650U-Prozessor mit vier Kernen mit 1,9 GHz und 32 GB RAM). Das Generieren der Hugo-Site auf dem Solar-Server ohne zwischengespeicherte Ressourcen ist nicht möglich, da der Prozess entweder den Speicher übersteigt oder das Timeout-Limit von Hugo überschreitet. In diesem Fall muss der Befehl mehrmals hintereinander ausgeführt werden. Obwohl es so aussieht, als ob Hugo auf dem Laptop langsamer ist als Pelican, lässt sich das wahrscheinlich damit erklären, dass die Hugo-Site sowohl eine Dithering-Logik als auch eine andere Kompressionslogik für die Bilder verwendet. Bei Pelican werden Bilder nur gedithert und Originale nicht erneut komprimiert.

	Hugo	Pelican
Solar Server (erster Durchlauf)	-	100 Minuten, 47 Sekunden
Moderner Laptop (erster Durchlauf)	13 Minuten, 31 Sekunden	12 Minuten, 53 Sekunden
Solar Server (zwischengespeichert)	11 Minuten, 57 Sekunden	68 Minuten, 47 Sekunden
Moderner Laptop (zwischengespeichert)	46 Sekunden	04 Minuten, 57 Sekunden

↩︎

LOW←TECH MAGAZINE Deutsch