Seit nunmehr einem halben Jahr betreibe ich hobbymäßig diesen Blog. Bis dato hatte ich meine Texte bei Medium veröffentlicht, was vor allem den Vorteil hatte, dass ich mich um nichts kümmern musste. Wer mich kennt, weiß, dass ich gut darin bin, aus diesem Vorteil einen Nachteil zu machen – ich kümmere mich gerne. Schon Anfang letzten Jahres sicherte ich mir für meine G Suite die Domains lawetzky.de und dominiklawetzky.de. Im Sommer erwuchs daraus die Idee, einen kleinen Blog aufzubauen, um meine Texte dort zu publizieren und gegebenenfalls Folien von Vorträgen zur Verfügung zu stellen.

Für unkompliziertes Website-Building hat man mittlerweile die Wahl zwischen zahlreichen Baukästen – Squarespace, Jimbdo und Wix sind vermutlich die bekanntesten. Ich wählte Wix, da mir das User Interface am übersichtlichsten erschien. Komplizierte Lösungen mit eigenem Hosting kamen zu diesem Zeitpunkt nicht infrage, da ich noch herausfinden wollte, ob regelmäßiges Bloggen überhaupt etwas für mich ist.

Screenshot: Neues Website-Design

Ein halbes Jahr später bin ich am gleichen Punkt wie mit Medium: die Vorteile von Wix werden zu Nachteilen. Und so kommt es, dass bereits nach einem halben Jahr der erste Refresh meiner Seite „live“ geht. In diesem Artikel eröffne ich einen Blick hinter die Kulissen dieser (neuen) Website, denn das Projekt Blog 2.0 hat sich als aufwendiger als gedacht herausgestellt.

Webhosting

Zunächst stellte sich die Frage, bei wem der Webspace – also der Server, auf dem die Website liegt – gemietet werden soll. Wix macht leider keine genauen Angaben dazu, wo ihre Server stehen. Das ist datenschutzrechtlich bedenklich, solange sich die Website an ein deutsches Publikum richtet. Jetzt, da ich die Wahl hatte, waren mir drei Dinge wichtig:

  • einen Serverstandort in Deutschland
  • eine hohe Zuverlässigkeit (99,9 % Verfügbarkeit und möglichst hohe Geschwindigkeit aus Europa heraus)
  • ein möglichst niedriger Preis (< 10 EUR monatl.)

Diese drei Kriterien schränken die Auswahl stark ein. Schlussendlich entschied ich mich für das Level-4-Webhosting von Hetzner. Auf iPhoneblog.de hieß es schon vor einigen Jahren mit Bezug auf Hetzner: „Schließlich vereint Hetzner die Vorteile eines kleinen Anbieters (flexibel) mit den Vorzügen eines großen Anbieters (Rechtssicherheit, Stabilität) in sich.“

Screenshot: Hetzners konsoleH

Level 4 heißt in diesem Fall unbegrenzt Bandbreite und 50 Gigabyte Serverspeicher, was derzeit mehr als genug (und das fünffache von dem doppelten so teuren Wix-Angebot) ist. Für das Webhosting steht Apache zur Vefügung (mehr zur technischen Umsetzung später).

Die DNA-Einrichtung ging problemlos, gleichwohl das User Interface von Hetzners konsoleH ziemlich altbacken ist. Eine Domain-Übertragung habe ich nicht durchgeführt. Meine Domains sind nach wie vor bei GoDaddy registriert (vorher bei UnitedDomains).

Screenshot: Domain-Registrierung bei GoDaddy

WordPress-Einrichtung

Als Content Management System (CMS) setze ich bei meinem Blog wie etwa 35 Prozent aller Websites auf WordPress. Eine vollumfängliche CMS bietet vor allem mehr Flexibilität als eine Website-Baukasten wie Wix. Mit dem Gewinn an Flexibilität geht jedoch auch ein Mehr an Verwaltungsaufwand und Sicherheitsrisiken einher.

Für WordPress spricht zudem die stabilere und ressourcenschonendere Oberfläche. Der Baukausten von Wix brachte regelmäßig meinen MacBook Pro an sein Limit und Chrome zum Absturz, was die Freude am „Bauen“ ein Stück weit minderte. Die WordPress-Oberfläche hingegen kommt auch mit recht ressourcenarmen Systemen aus.

Screenshot: WordPress-Installation bei Hetzners konsoleH

Die Installation der aktuellen WordPress-Version auf dem Webserver ging mit wenigen Klicks.

Das große Manko: Wix erlaubt nicht den Transfer der Blogposts. Das heißt: Ich musste jeden einzelnen Blogpost händisch von Wix auf WordPress übertragen – klassische Copy-and-Paste-Arbeit …

Sicherheit und Datenschutz

Ich lege bei meiner Website großen Wert darauf, dass die Seite nicht nur einigermaßen DSGVO-konform, sondern, was die Umsetzung von Datenschutz angeht, vorbildlich ist. Jede und jeder, der sich schon mal darin versucht hat, weiß, was das bedeutet: viele Schmerzen.

SSL-Verschlüsselung

Grafik: Unterschied zwischen http:// und https://

Hetzner erlaubt die Installation eines Let’s‑Encyrpt-Zertifikats, alternativ auch Basic-SSL (Symantec/Digicert). Die SSL-Verschlüsselung garantiert, dass keine Daten on the way abgefangen werden können (Ende-zu-Ende-Verschlüsselung). Klassische „Man in the middle“-Angriffe sind damit ausgeschlossen. Die SSL-Verschlüsselung macht sich in Chrome durch ein Schloss bzw. httpS:// vor der URL bemerkbar.

Screenshot: Schloss in Chrome als Signal für SSL-Verschlüsselung

Das klingt etwas übertrieben für einen einfachen Blog, ist jedoch sinnvoll, da auch meine Website auf die ein oder andere Weise personenbezogene Daten erfasst, z. B. beim Kontakt-Formular. In diesem Fall sieht die DSGVO eine Ende-zu-Ende-Verschlüsselung explizit vor.

Two-Factor-Authentification

Eigentlich sollte es dafür keiner Erwähnung bedürfen, aber eine Two-Factor-Authentification (2FA) ist ein Muss, vor allem beim Zugang zu einer Website, die im Internet für jedermann sichtbar ist und damit potentiell großen Schaden anrichten kann.

2FA bedeutet, dass zusätzlich zum statischen Passwort noch ein zweiter Faktor hinzukommt. Bestenfalls handelt es sich bei dem zweiten Faktor nicht um einen Code aus einer E‑Mail oder SMS, sondern um einen zeitlich befristeten Token. Ich kann Authy empfehlen, mit dieser App lassen sich die Tokens plattformübergreifend zwischen verschiedenen Geräten synchronisieren. Dann ist das Drama nicht ganz so groß, fällt das Smartphone in die Badewanne …

Wichtig ist, dass sowohl der Zugang zum Webserver als auch der WordPress-Login mit 2FA geschützt sind. Hetzner ermöglicht 2FA von Haus aus, bei WordPress bedarf es eines Plugins. Ich kann das Plugin Two Factor nur empfehlen (und damit stehe ich auch nicht alleine).

Zur DSGVO-konformen Website gehört auch ein Cookie-Banner bzw. ‑Blocker, der opt-out gestellt ist. Das heißt, ohne aktives Zutun des Nutzers werden nur technisch notwendige Cookies gespeichert.

Screenshot: Cookie-Banner

Technisch notwendig ist auf meiner Website derzeit nur Google Fonts für die Schriftart (konkret: Noto Sans). Ja, es wäre möglich, die Schriftart auch auf dem eigenen Webserver zu speichern; allerdings produzierte das in meinem Fall etliche Schwierigkeiten bei der Darstellung. Wie gesagt: viele Schmerzen.

Ein weiterer Cookie kann bei Einwilligung von Google Analytics (Statistik) gesetzt werden. Das Google-Analytics-Skript wird jedoch bis zur Einwilligung nicht ausgeführt. Um das zu realisieren, griff ich auf ein kostenpflichtiges Plugin namens Borlabs Cookie zurück. Für 39 Euro erhält man ein Cookie-Banner, die Möglichkeit, die Ausführung von Skripten zu blockieren, und einen Content-Blocker für eingebundene Inhalte wie Youtube-Videos und Tweets.

Screenshot: Blockiertes eingebundenes Youtube-Video

Der Content-Blocker sollte ohne Zutun aktiv sein, so dass verhindert wird, dass Youtube oder Twitter über die embedded scripts Cookies setzen oder die IP-Adresse tracken.

Übrigens werden alle erfassten IP-Adressen, bevor sie verarbeitet werden (z. B. durch Google Analytics) pseudonymisiert. Ausgenommen sind allerdings einige eingebundene Inhalte; da kann eine Pseudonymisierung nicht vollständig sichergestellt werden.

Backup

Die gesamte Website wird alle zwei Stunden in einem verschlüsselten Backup in einer Google Drive gespeichert. Jeweils die letzten zehn Backups bleiben erhalten. Auf diese Weise ist die Seite auch bei einem Totalversagen von Seiten Hetzners nicht verloren und kann relativ unkompliziert wieder online gehen.

Zudem führt Hetzner selbst regelmäßig Backups ihrer Server durch. Auf diese internen Backups sollte man sich allerdings nicht verlassen.

Page Speed

Sind wir ehrlich: Bislang war mein Blog nicht der schnellste. Im Gegenteil: Die Page Speed war teilweise eine Katastrophe. Das wirkt sich nicht nur negativ auf die User Experience (UX), sondern auch die Search Engine Optimization (SEO) aus.

Grafik: Zusammenhang zwischen tolerierter Page Speed und Motivation, die Seite aufzurufen

Die meisten geben – abhängig von ihrer Motivation, die Seite zu besuchen – auf, wenn eine Seite zu lange lädt. Umgekehrt: Die von einem Nutzer tolerierte Page Speed steigt mit dessen Motivation, die Seite aufzurufen.

Wie schnell die eigene Seite lädt, lässt sich über verschiedene Tests herausfinden. Empfehlenswert ist Googles Open-Source-Test (web.dev).

Screenshot: Score bei Googles web.dev

Um dort einen möglichst hohen, also guten Score zu erreichen, habe ich folgende Optimierung an der Website vorgenommen:

  • Die Website läuft über das Content Delivery Network (CDN) Cloudflare. Zu erklären, was genau ein CDN ist, würde hier zu weit führen – kurz: Es sorgt dafür, dass häufig aufgerufene Inhalte gecacht (vorgespeichert) werden, um die Latenz und damit die Page Speed zu reduzieren.
  • Über ein Script habe ich konfiguriert, dass Bilder erst heruntergeladen werden, wenn sie sichtbar werden sollen. Bei längeren Artikeln laden die Bilder also beim Scrollen Stück für Stück nach. Außerdem laden die einzelnen Seiten nicht „von oben nach unten“; zuerst lädt der „wichtige Inhalt“ (Text), dann die „Deko“ (Bilder). Dadurch ist die Seite auch bei extrem langsamer Internetverbindung (= deutsches Mobilfunknetz außerhalb von Großstädten) einigermaßen nutzbar.
  • Alle Bilder sind im JPG-Format und optimal komprimiert hochgeladen. Zur Kompression einzelner Bilder nutze ich Compressor.io.

Blogging

Mein Blogging-Workflow ist nun viel angenehmer als mit Wix. Beim Wix-Editor stieß ich immer wieder auf vermeintlich banale Probleme: Überschriften waren zu klein; das Einbetten von externen Inhalten nur stark eingeschränkt möglich (Tweets ja, Youtube-Videos waren ein Glücksspiel); Bilder wurden teilweise „verschluckt“ und mussten mehrfach hochgeladen werden …

Gutenberg, der Standard-Editor von WordPress, macht da viel richtig. Das Einbetten von externen Inhalten ist leichter dennje. Darüber hinaus kann ich mit dem Academic Bloggers Toolkit Literaturverzeichnisse anlegen und mit Easy Table of Contents Inhaltsverzeichnisse – mir nichts, dir nichts – generieren (siehe oben).

Screenshot: Gutenberg-Editor

Gutenberg ist zwar noch nicht gutenberg (sic!) genug, um meine Texte damit zu schreiben, aber das Text-Layouting macht wieder Spaß. Ich schreibe meine Blogposts weiter in Evernote. Mittels IFTTT-Automatismus wird aus einer Evernote-Notiz mit dem Tag #blogpost ein Entwurf im Gutenberg-Editor. Zukünftig spare ich mir folglich lästige Kopierarbeit.

Endlich kann ich auch kleinere Tippfehler über das Smartphone korrigieren. Das habe ich genau ein und ein letztes Mal mit Wix probiert, wodurch mir der gesamte Artikel zerschossen wurde. Eine große Erleichterung für jemanden wie mich, der viel unterwegs erledigt.

Fazit

Nichts bleibt beim Alten! Ich freue mich auf das „Tüfteln“ und vor allem darauf, hier – in neuem übersichtlicheren Gewand – meine Texte zu veröffentlichen. Ich habe mir vorgenommen, meine Texte zukünftig interaktiver zu gestalten und die technischen Möglichkeiten nach und nach auszuprobieren.