Ausgangslage#
Eigentlich fing alles mit der neuen Datenschutzverordnung an.
Für Cookies braucht es ab sofort das Einverständnis der User - Okay - kein Problem. Für WordPress (das ich bisher benutzt habe) gibt es tausend Plugins dafür. Aber halt! Die meisten kosten etwas.
Hm… Dann eben keine Cookies. Brauche ich eh nicht. Ich will Content liefern und eine Visitenkarte im Web haben. Da will ich meine Leser nicht mit dem typischen “ich bin einverstanden, dass meine Daten überall benutzt werden” nerven.
Aber Fehlanzeige: es ist praktisch unmöglich, mit WordPress eine Seite ohne Cookies zu betreiben.
Da mein Webhosting-Paket bei meinem Domain-Provider eh gerade ausgelaufen war, habe ich entschlossen einen alternativen Weg zu suchen.
Anforderungen#
Folgende Punkte waren mir bei der neuen Lösung wichtig:
- keine zusätzlichen Kosten für den Betrieb
- Content ändern und erstellen von überall, mit jedem Gerät
- Schnelle Ladezeiten
- keine Cookies
- Open-Source Werkzeuge und Templates
Entscheidungsfindung#
Da ich grundsätzlich begeistert von Technologie bin, habe ich natürlich zunächst einige Optionen durchgespielt und getestet. Dieser Entscheidungspfad fasst den recht langwierigen Prozess kurz zusammen.
Eine Alternative muss her| X0{Will ich mich
selbst um meinen
Webserver
kümmern?} X0 --> |Ja - ich will das| B1[Cloud Infrastrukturanbieter
AWS, Kamatera & Co.] B1 --> B2(((" "))) X0 --> |Nein - das soll jemand anderes machen| X1{Will ich Flexibilität
und niedrige Kosten
oder Convenience?} X1 --> |Convenience| D1[Website Builder
Squarespace, Webflow & Co.] D1 --> D2(((" "))) X1 --> |Flexibilität und keine Kosten| C1[Hosting-Service
netlify, gitlab Pages & Co.] C1 --> C2{Static Website Builder
Etwas Bewährtes
oder lieber etwas
schlankes Neues?} C2 --> |was Bewährtes| E1[Jekyll] E1 --> |ist schon etwas in die Jahre gekommen
braucht gcc/make und Ruby| E2(((" "))) C2 --> |was Neues| C3[HUGO] C3 --> C4{Welches Template?} C4 --> F1[Hugo Blox] C4 --> |sieht am besten aus|C5[BlowFish]
Für das Diagramm habe ich übrigens Mermaid benutzt, das ich oft für technische Dokumentationen verwende.
Am Ende bin ich also bei folgenden Tools gelandet:
- GitLab für die Verwaltung des Content. Hervorragend für die Zusammenarbeit und eine breite Tool-Unterstützung.
- Hugo als Static Website Builder. Ist sehr schlank und hat sehr wenige Abhängigkeiten (eigentlich nur Go).
- Hugo BlowFish-Template von Nuno Coração (Danke!) - bietet viel Unterstützung für das Management von Blogs und ein gutes Layout.
- Netlify als Hosting-Service. Netlify bietet eine gute Integration mit GitLab und Hugo.
Design#
Da Visualisierung eins meiner Steckenpferde ist, habe ich mir für das Design und die Bildsprache der Webseite etwas mehr Mühe gegeben. Die Illustrationen sollten lebendig und modern wirken.
Ich habe dafür ein eigenes Charakter-Konzept entwickelt, mit dem ich Emotionen, Aktion und Interaktion darstellen kann. Durch die Nutzung von echten Texturen (teilweise aus unserem Kleiderschrank) wirken die Vektor-Zeichnungen weicher und lebendiger.
Bei der Farbgebung habe ich eine Comic-Pallette benutzt, die vielseitige Kontraste erlaubt. Auch die Typographie lehnt sich an bekannte Comic-Klischees an.
Es war mir sehr wichtig, dass man auf den ersten Blick sieht, dass diese Bilder nicht mit einem KI-Tool erzeugt wurden.
Die Umsetzung der Illustrationen findet vollständig in Adobe Illustrator statt.
Ergebnis#
Ich bin (fast) zufrieden mit dem Ergebnis. Sicher werde ich immer wieder hier und da etwas schrauben. Aber das Fundament sollte für einige Zeit halten.
Schau doch mal rein: https://vonlangerhand.net
Fazit#
Was auf jeden Fall jetzt schon Spass macht, ist meine neue Arbeitsweise:
Ich nutze VSCode auf meinem PC und Working Copy auf meinem iPhone, um den Content zu bearbeiten. Sobald ich die Änderungen “pushe” kümmert sich Netlify darum, dass sie auf meiner Domain veröffentlicht werden. Theoretisch kann ich auch Änderungen von jedem Browser aus vornehmen.
Und das Ganze kostet mich exakt CHF 0.00 (abgesehen vom Domain-Namen).
Falls Du ein ähnliches Projekt vorhast, können wir uns gerne mal austauschen.
