WordPress ist ein hervorragendes Content Management System (CMS). Mit ihm können wir fast alles erreichen. Da es dynamisch ist, können wir jeden Inhalt mit einem Mausklick ändern. Das ist zwar fantastisch, birgt aber auch einige Gefahren und kann bei hohem Datenverkehr schwierig zu warten sein.

Die Umwandlung deiner WordPress-Website in eine statische Website könnte diese Probleme lösen.

Was sind statische Websites?

Um zu erklären, wie statische Websites funktionieren, müssen wir zunächst verstehen, wie dynamische Websites funktionieren.

Jedes Mal, wenn wir eine Website besuchen, muss der Server PHP-Dateien analysieren, die Datenbank abfragen, um die Daten abzurufen, und am Ende das gerenderte HTML an den Browser zurückgeben.

Statische Websites erledigen die ganze Arbeit davor – bevor wir die Website besuchen, speichern wir jede Seite als statisches HTML. Wenn wir die gewünschte Seite besuchen, wird sie vom Server so angezeigt, wie sie ist.

Die Vorteile von statischen Websites

Geschwindigkeit und Leistung

Statische Websites sind schnell und leistungsfähig. Warum? Weil sie nur aus statischem HTML bestehen. Das bedeutet, dass der Server nur eine Sache tun muss – die Website bereitstellen. Er muss nichts parsen oder auf Daten aus der Datenbank warten.

Außerdem lassen sich statische Websites leichter auf CDNs hosten (obwohl Edge Cache ähnlich funktioniert), die alle Dateien so nah wie möglich bei dir platzieren.

Alles in allem sind statische Websites bei hohem Datenverkehr erstaunlich leistungsfähig.

Sicherheit

Der Kern von WordPress ist sicher – das ist er wirklich. Aber die Plugins und Themes – nicht immer. Außerdem kann jeder versuchen, unser Login und Passwort zu erraten.

Insgesamt vergleiche ich WordPress gerne mit einem Haus mit vielen Türen und Fenstern. Es liegt an uns, die sichersten auszuwählen, aber auch wenn eine Tür nicht sicher genug ist, kann ein Hacker unsere Website hacken.

Wenn du deine Website in eine statische Website umwandelst, werden die meisten Angriffsvektoren beseitigt. Da es sich nur um HTML handelt, kann ein Hacker keine anfälligen Plugins verwenden oder von einem schwachen Passwort profitieren.

Seelenfrieden

Eine typische WordPress-Installation besteht aus vielen beweglichen Teilen – PHP- und Datenbankserver, Themes oder Plugins – und jedes Teil kann kaputt gehen. Mit Static entfernen wir die meisten von ihnen. Unser Server wird überschaubarer, da er nur HTML ausgibt und unsere Inhalte dank CDN weltweit verbreitet werden, was sie DDoS-geschützt macht.

Daher ist die Wahrscheinlichkeit, dass etwas kaputt geht, viel geringer.

Die Nachteile der Umstellung auf statisch

Umgehungsmöglichkeiten

Wir sind es gewohnt, dass Dinge wie die Suche auf der Website, das Hinzufügen von Kommentaren oder das Versenden von Formularen mit WordPress sofort funktionieren. Mit Static ist das nicht mehr so einfach. Weil wir alles in HTML umgewandelt haben, haben wir diese Möglichkeiten verloren.

Wir müssen einige Tools von Drittanbietern verwenden, um diese Funktionen wieder hinzuzufügen.

Erstellungsprozess

Wir sind es gewohnt, dass neue Inhalte auf unserer Website verfügbar sind, sobald wir auf den Veröffentlichungsbutton drücken. Mit dem statischen Ansatz müssen wir unsere Website jedes Mal umwandeln, wenn wir sie aktualisieren wollen. Es kann also ein paar Minuten dauern, bis wir den Knopf drücken und der Inhalt für alle verfügbar ist.

Vorbereitende Schritte

Bevor wir beginnen, müssen wir einige Dinge beachten.

1. Ein Git-Repository erstellen

Wir verwenden in diesem Beispiel GitHub, aber du kannst auch jede andere Git-Lösung (wie GitLab oder BitBucket) verwenden. Erstelle zunächst ein Konto (falls du noch keins hast) und lege ein leeres Repository an.

Danach müssen wir eine Datei in dem Repository erstellen, sonst können wir es nicht mit Kinsta verbinden.

Füge eine Datei zu deinem Repository hinzu. Eine readme.md-Datei im Hauptzweig eines GitHub-Repositorys
Füge eine Datei zu deinem Repository hinzu

2. Dieses Repository mit dem Hosting statischer Websites verbinden

Gehe zu MyKinsta, wähle statische Websites in der Seitenleiste und wähle Website hinzufügen.

Wähle das Repository aus, das du erstellt hast, und vergiss nicht, „Automatische Bereitstellung bei Übergabe“ zu wählen

Die Benutzeroberfläche von Kinsta zeigt, wie eine neue statische Website aus einem GitHub-Repository und seinem Hauptzweig erstellt wird.
Kinsta Static Site Hosting einrichten

Konvertiere deine WordPress-Website in eine statische Website

Wir können unsere WordPress-Website mit verschiedenen Methoden in eine statische Website umwandeln. In diesem Artikel gehen wir zwei davon durch:

  1. Mit einem WP-Plugin und Git
  2. WP-CLI, CI/CD und Git verwenden

Ein Plugin und Git verwenden

Voraussetzungen:

Schritte

  1. Öffne deine Website im Browser und installiere das Simply Static-Plugin.
  2. Gehe zu Simply Static > Einstellungen > Bereitstellung, um die Bereitstellungsmethode auf das lokale Verzeichnis zu setzen und den lokalen Ordner festzulegen – du kannst dem Tipp folgen, den dir der Platzhalter gibt, zum Beispiel /www/kinstaapi_533/public/public_static. Vergiss nicht, dass das Plugin diesen Ordner nicht für dich erstellt – das musst du manuell tun.
  1. Klicke auf die Schaltfläche Statische Dateien generieren .

Nach ein paar Minuten befinden sich alle statischen Dateien in dem im vorherigen Schritt angegebenen Ordner.

Push deinen Code in ein Git-Repository

  1. Erstelle ein Repository in GitHub.
  2. Öffne ein Terminal oder eine Powershell, gehe zu dem Ordner mit den statischen Dateien und führe aus:
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

Diese Befehle verbinden das Repository und pushen alle statischen Dateien zu GitHub. Das Pushen der Änderungen löst eine automatische Bereitstellung aus, da wir das Repository bereits mit dem Static Site Hosting von Kinsta verbunden haben.

Wenn du das nächste Mal etwas in deinem WordPress änderst, erstelle die gesamte Website neu und führe sie aus:

git add .
git commit -m "static content"
git push --force -u origin main

Die Pro-Version von Simply Static bietet ein GitHub-Addon, das den Build-Prozess automatisiert. Allerdings ist es ein kostenpflichtiges Plugin, und in manchen Fällen kann es ausreichen, den Prozess manuell durchzuführen.

WP-CLI, CI/CD und Git verwenden

Diese Methode verwendet dasselbe WP-Plugin wie die oben beschriebene, allerdings in der (kostenpflichtigen) Premium-Version, und nutzt eine CI/CD-Pipeline von Buddy CI, um deinen Code in ein GitHub-Repository zu übertragen.

Diese Methode ist komplizierter einzurichten, erfordert aber weniger manuelle Arbeit bei jeder Bereitstellung. Außerdem ist sie besser erweiterbar, da du die Kontrolle über jeden Schritt hast. Du kannst der Pipeline weitere Aktionen hinzufügen, wenn du möchtest.

Anforderungen:

  • Simply Static Pro (nur die Pro-Version hat die WP-CLI-Integration).
  • Deine Website muss öffentlich zugänglich sein (sie kann also nicht auf einem Localhost liegen), und der Server benötigt SSH-Zugang und eine installierte WP-CLI. Kinsta WordPress Hosting ist die perfekte Lösung.
  • Die Codebasis deiner Website wird in einem GitHub-Repository gehostet
  • Ein CI/CD-Tool, um alles zu orchestrieren. In diesem Beispiel verwenden wir Buddy, weil es so benutzerfreundlich und einfach ist. Du kannst aber auch jedes andere Tool verwenden, z. B. GitHub Actions oder GitLab CI/CD.

Schritte:

  1. Öffne deine WP-Website in deinem Browser und installiere das Plugin Simply Static Pro.
  2. Gehe zu Simply Static > Einstellungen > Bereitstellung, um die Bereitstellungsmethode auf das lokale Verzeichnis einzustellen und den richtigen Pfad festzulegen – du kannst dem Tipp folgen, den dir der Platzhalter gibt, zum Beispiel /www/kinstaapi_533/public/public_static.
  3. Denke daran, dass das Plugin diesen Ordner nicht für dich erstellt – das musst du manuell tun.
  4. Gehe zu deinem GitHub-Repository und erstelle ein Access-Token mit Schreibrechten, um auf deine Repositories zuzugreifen. Wir werden es bald brauchen.
  5. Melde dich in deinem Konto bei Buddy an, füge ein neues Projekt hinzu und verbinde es mit deinem Repository.

Wir erstellen eine Pipeline in Buddy, die Folgendes tut:

  1. Führt den Befehl Simply Static WP-CLI über SSH auf deinem Server aus.
  2. Zippt alles.
  3. Läd es in das Buddy-Dateisystem herunter.
  4. Entpackt alles.
  5. Pusht alles in dein Git-Repository.

Ein Überblick über den Arbeitsablauf des vorgeschlagenen Buddys
Ein Überblick über den Arbeitsablauf des vorgeschlagenen Buddys
  1. Zuerst müssen wir eine Aktion namens SSH-Befehl hinzufügen.
  2. In der Registerkarte CMDs ausführen, laufen lassen:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Dieses Skript wandelt unsere Website in eine statische Datei um und komprimiert sie.

  1. In der Registerkarte Ziel gibst du alle deine Anmeldedaten ein (du findest sie bei MyKinsta) und stellst das Arbeitsverzeichnis auf öffentlich.

Buddys UI zeigt die Einrichtung der Registerkarte Target
Buddy Target einrichten
  1. Als nächstes fügst du eine Local Shell-Aktion hinzu. Führe sie darin aus:
rm -rf *

Dieser Befehl stellt sicher, dass es keine Dateien gibt, die wir nicht brauchen.

  1. Um die Zip-Datei vom Server herunterzuladen, fügst du eine neue Aktion hinzu (du kannst das tun, indem du auf das + in der Liste der Aktionen drückst) und wählst SFTP Download aus der Liste. Neben den Anmeldedaten müssen wir auch den Pfad zur Zip-Datei angeben und die Option Überschreiben aktivieren.

Buddy's UI zeigt die Einrichtung der Download-Aktion
Buddy’s Download-Aktion ist eingerichtet
  1. Füge eine weitere Local Shell-Aktion hinzu, um alle Dateien zu entpacken und entferne die Zip-Datei (wir brauchen sie nicht mehr). Ausführen:
unzip -o static.zip
rm static.zip
  1. Gehe auf die Registerkarte Ubuntu und wähle Pakete & Tools installieren entpacken. Führe dazu Folgendes aus:
apt-get update && apt-get install -y unzip
  1. Für den letzten Schritt musst du die Git Push-Aktion verwenden. Du musst den GitHub Access Token, den du im ersten Schritt konfiguriert hast, und sein Passwort verwenden. Vergiss nicht, die Optionen Force Push und Push revision to the specific branch zu aktivieren.

Buddy's UI zeigt die Einrichtung der Push-Aktion
Buddy’s Push-Aktion einrichten

Wenn du deine Website neu bereitstellen willst, drückst du in Buddy auf die Schaltfläche Ausführen, und der Zauber beginnt. Wenn du diesen Prozess automatisieren möchtest, gibt es ein Plugin für WordPress, das du verwenden kannst.

Buddy UI auf der Registerkarte
Ein Überblick über den vorgeschlagenen Arbeitsablauf von Buddy

In der Dokumentation von Buddy kannst du nachlesen, wie du deinen Arbeitsablauf weiter automatisieren kannst.

Andere Möglichkeiten, WP in statisch umzuwandeln

Static Site Generators

Mit vielen Static Site Generators kannst du jedes CMS mit einer API anbinden (WordPress hat eine eingebaute REST-API und GraphQL ist über ein Plugin verfügbar). Du kannst Astro, Eleventy oder ein anderes verwenden.

Dieser Ansatz bietet dir zwar viel mehr Flexibilität, erfordert aber auch mehr Arbeit als die oben genannten Lösungen.

Zusammenfassung

Ist die Umwandlung einer WordPress-Website in eine statische Website eine gute Idee? Das kommt darauf an. Es gibt viele Faktoren, die du berücksichtigen musst, bevor du das tust. Auf jeden Fall ist es eine gute Idee, darüber nachzudenken. Wie bereits erwähnt, haben statische Websites eine Menge Vorteile, und sie nicht zu nutzen, kann eine große Verschwendung sein.

Maciek Palmowski

Maciek ist Webentwickler und arbeitet bei Kinsta als Development Advocate Analyst. Nach Feierabend verbringt er die meiste Zeit damit, zu programmieren, nach interessanten Neuigkeiten für seine Newsletter zu suchen oder Kaffee zu trinken.