Wie ich diese statische Website erstellt habe

Eine Aufgabe vor der Veröffentlichung des neuen Simply Static Pro bestand darin, meine eigene Website vollständig statisch zu machen. Das hilft sehr dabei, zu überprüfen, ob alles ordnungsgemäß funktioniert, und den Prozess weiter zu verbessern.

Erste Planung

Mit dem Warum beginnen

Neben der Tatsache, dass ich an Simply Static und die Zukunft des statischen Hostings glaube, wollte ich alle Vorteile nutzen, die eine statische Website bieten kann: bessere Performance, da keine Datenbankabfragen mehr erforderlich sind, mehr Sicherheit für meine Website, da keine direkte Verbindung zwischen meinem System und der öffentlichen statischen Website mehr besteht, und geringere Kosten für den Betrieb eines größeren WordPress-Projekts mit einer Reihe von Premium-Plugins für Dinge wie Suche und SMTP-Mailversand.

Der Ausgangspunkt

Meine Website ist ein WordPress Multisite und mit wöchentlichen Blogbeiträgen, Dokumentation und Seiten war offensichtlich, dass ich einige Bilder habe. Die Gesamtgröße pro Subsite lag bei etwa 250 MB. Ich habe meine Website auf einem Droplet bei Digital Ocean gehostet (Hallo SpinupWP) und Cloudflare für meine DNS-Verwaltung verwendet. Eine der Anforderungen an die statische Konvertierung war, die Anzahl der benötigten Tools nicht drastisch zu erhöhen, sondern stattdessen die Anzahl der beteiligten Plugins und Dienste zu reduzieren.

Cloudflare Pages

Ich hatte einige Anforderungen an meinen neuen Anbieter für statisches Hosting:

• kostenlos
• eine Art Caching
• eine GitHub-Integration mit Build-to-Deploy
• SSL

Während man die meisten dieser Dinge mit zusätzlichen Diensten (wie Cloudfront mit AWS) umsetzen oder das SSL-Zertifikat direkt vom Domainanbieter beziehen kann, möchte ich die Dinge so einfach wie möglich halten.

Nachdem ich einige verschiedene Dienste wie Netlify, GitHub Pages und Vercel sowie Cloud-Anbieter wie AWS oder Google Cloud Storage geprüft und bewertet hatte, beschloss ich, Cloudflare Pages auszuprobieren.

Eine Sache, die dir auffallen wird, ist, dass all diese Anbieter für statisches Hosting gewisse Einschränkungen in ihrem kostenlosen Tarif haben. Sieh dir die Bedingungen daher genau an, um das richtige Tool für die jeweilige Aufgabe zu finden. Manchmal steht es nur in einem kleinen Hinweis in den Geschäftsbedingungen, etwa der Ausschluss kommerzieller Nutzung bei Vercel (uff).

Die Einschränkungen von Cloudflare Pages sind:

• 500 Builds pro Monat
• 20.000 Dateien
• maximale Dateigröße von 25 MB

Das sind die wichtigen Punkte, solange du nicht 10 Domains pro Projekt benötigst (was mir etwas seltsam erscheint). Ein Problem für mich (und die meisten mit WordPress betriebenen Websites) wird die maximale Dateigröße von 25 MB sein. Wenn du deine Bilder nicht optimierst, wirst du selbst bei einer kleinen Portfolio-Website an diese Grenze stoßen.

Bildoptimierung und CDN

TinyPNG

Um das zu beheben, begann ich, meine Bilder zu optimieren. Dafür verwendete ich die TinyPNG API. Es gibt auch ein WordPress Plugin, mit dem du alle deine Bilder in einem Durchlauf gesammelt optimieren kannst.

Ich habe 23 $ für die vollständige Optimierung aller Bilder auf allen Subsites meines Netzwerks bezahlt, was mir angemessen erschien.

CDN

Ich hatte meine Bilder optimiert, aber die Gesamtgröße der Dateien (einschließlich aller Bilddateien) lag pro Website immer noch bei etwa 50 MB (wie du anhand der verbleibenden Dateigröße im obigen Screenshot sehen kannst).

Der nächste Schritt bestand darin, eine gute CDN-Lösung zu finden, über die ich meine Mediendateien ausliefern konnte. Ich entschied mich dafür, einen Space von Digital Ocean zu verwenden, da ich diesen Anbieter bereits zum Hosten meiner WordPress-Website nutzte. Für die Synchronisierung meiner Mediendateien verwendete ich das Plugin WP Offload Media vom großartigen Team von Delicious Brains (das übrigens inzwischen das neue Entwicklerteam hinter Advanced Custom Fields ist).

Die Konfiguration war hier ziemlich einfach:

Wie Sie sehen können, war hier nicht allzu viel Konfiguration erforderlich. Ich habe alle Dateien in den Digital Ocean Space kopiert und sie von meinem Server entfernt. Ich habe mich entschieden, die Jahr-/Monatsstruktur aus der Mediathek beizubehalten, aber die Objektversionierung zu deaktivieren. Das würde ich Ihnen empfehlen, da die Versionierung beim Umwandeln in eine statische Website zu Problemen mit Ihren Pfaden führen kann.

Der schwierige Teil war, eine Subdomain zum Digital Ocean Space hinzuzufügen. Zunächst schien es erforderlich zu sein, die gesamte Domain zu Digital Ocean umzuziehen, um DNS hier verwalten und die Subdomain dem Space zuordnen zu können – das stimmt nicht, ist aber wirklich schlecht dokumentiert.

Da ich Cloudflare für meine DNS- und Domainverwaltung verwende, zeige ich Ihnen den schnellen Weg, um das einzurichten:

1. Ein Origin-Zertifikat generieren
2. Den Space einrichten
3. Die Subdomain auf den Space verweisen

Origin-Zertifikat generieren

Gehen Sie in Ihren Cloudflare-Einstellungen zu Ihrer Domain und dann zu SSL -> Origin Server

Klicken Sie auf „Create certificate“. Die nächsten Einstellungen können Sie überspringen und erneut auf „create“ klicken. Sie sollten die folgenden Informationen sehen:

Den Space einrichten

Lassen Sie den Tab geöffnet oder kopieren Sie diese Informationen an einen Ort, an dem Sie sie wiederfinden. Gehen wir zu Digital Ocean und erstellen einen Space.

Wählen Sie das nächstgelegene Rechenzentrum aus, wählen Sie „Use a custom subdomain“ und erlauben Sie die Dateiauflistung. Als Letztes müssen Sie einen Namen vergeben. Ihnen wird außerdem der kleine Link „Add a new subdomain certificate“ auffallen. Wenn Sie darauf klicken, öffnet sich ein kleines modales Fenster zum Einrichten Ihres SSL-Zertifikats:

Wählen Sie „Bring your own certificate“ und fügen Sie die Informationen von Cloudflare ein. Speichern Sie anschließend und schließen Sie den Einrichtungsprozess für Ihren Space ab. Sie erhalten eine URL zu Ihrem Space wie etwa: awesomemedia.fra1.cdn.digitaloceanspaces.com (abhängig vom gewählten Rechenzentrum). Kopieren Sie diese.

Die Subdomain auf den Space verweisen

Nun wechseln wir zurück zu Cloudflare. Gehen Sie zu DNS, klicken Sie auf „Add record“ und wählen Sie CNAME. Geben Sie den Namen Ihrer Subdomain ein und fügen Sie die URL Ihres Space als Wert ein:

Das war’s. Sie können nun zu den WP Offload Media-Einstellungen in Ihrem WordPress-Administrationsbereich zurückkehren und mit der Übertragung Ihrer Dateien beginnen.

Probleme nach der Migration meiner Bilder zu einem CDN

Bei den meisten Themes und Plugins sollte es damit erledigt sein, bei mir war das jedoch nicht der Fall. Es stellte sich heraus, dass yootheme.com ein eigenes Caching-System für Bilder implementiert hat, das sich nicht vollständig deaktivieren lässt. Das ist ein Problem, da WP Offload Media diese Bilder nicht ersetzen kann. Ich habe hier eine gute Fehlerbehebung dafür gefunden. Vielleicht ist sie in zukünftigen Updates nicht mehr erforderlich, aber vorerst hat sie gut funktioniert.

Die statische Website generieren

Ich wechselte zurück zum WordPress-Backend. Simply Static und Simply Static Pro waren hier bereits installiert. Nun beginnen wir mit genau der Konfiguration, die ich verwendet habe, damit dies in meinem Multisite-Netzwerk funktioniert.

Allgemein

Ich habe „Use relative URLs“ verwendet, weil Sie beim Einrichten einer neuen statischen Website von Cloudflare Pages einen zufälligen Domainnamen erhalten. Als Bereitstellungsmethode habe ich „GitHub“ ausgewählt, da dies erforderlich ist, um Ihre statische Website auf Cloudflare Pages zu hosten.

Einschließen/Ausschließen

Ich habe die URL zu meiner Sitemap eingefügt, die vom RankMath-Plugin generiert wird. Der Link zum Pfad der Konfiguration wird automatisch festgelegt, sobald du die Formular-, Kommentar- oder Suchintegration von Simply Static Pro verwendest.

Hier habe ich außerdem zwei zusätzliche URLs ausgeschlossen:

media.simplystatic.com – das ist die Domain meines CDN, von dem alle meine Bilder geladen werden, und patrickposner.de, da dies die URL meiner anderen Subsite innerhalb meines Netzwerks ist.

GitHub

Ich habe die Daten für mein Konto eingetragen und das Repository nach der Domain benannt, die ich dafür verwenden werde. In meinem Fall habe ich das für beide Subsites getan und simplystatic.com sowie patrickposner.de als Repository-Namen verwendet.

Die nächsten Einstellungen habe ich übersprungen, da ich auf meiner Website keine Kommentare verwende und die URL meiner statischen Website noch nicht hatte (die für die Such- und CORS-Einstellungen erforderlich ist).

Generieren

Anschließend wechselte ich im Simply Static-Plugin zum Tab „Generieren“ und startete den Generierungsprozess meiner statischen Website:

Da ich die GitHub-Integration verwendet hatte, führte das zu einem gefüllten GitHub-Repository:

Cloudflare Pages

Anschließend wechselte ich zu meinem Cloudflare-Konto und wählte im Menü „Pages“ aus, um ein neues Projekt zu erstellen.

Ich wählte mein erstelltes GitHub-Repository aus und klickte auf „Begin setup“.

Den nächsten Konfigurationsschritt habe ich übersprungen, da es für mich keinen Grund gab, weitere Build-Schritte zu verwenden.

Nach ein paar Sekunden erhielt ich das Ergebnis:

Benutzerdefinierte Domain

Der letzte Schritt bestand darin, unter „Custom Domains“ die richtige Domain hinzuzufügen. Ich verwendete meine simplystatic.com-Domain und fügte sie hinzu. Da ich mein DNS in Cloudflare verwalte, wurde der erforderliche CNAME-Eintrag automatisch für mich erstellt. Bei anderen Anbietern kopierst du einfach die Domain und fügst selbst einen CNAME-Eintrag hinzu.

URLs in WordPress Multisite ändern

Der letzte Schritt bestand darin, die URLs für meine Multisite zu ändern. Ich entschied mich, für alle Subsites dem Muster admin.domain.com zu folgen. Nachdem ich die URLs in den Tabellen wp_sitemeta, wp_blogs und beiden wp_options geändert hatte, verwendete ich das Plugin Better Search and Replace, um alle verbleibenden URLs zu finden und in die neue Struktur umzuschreiben. Da Simply Static diese URLs bei jedem Export konvertiert, musst du dir darüber anschließend keine Gedanken mehr machen.

Zum Schluss fügte ich über htaccess ein Passwort hinzu, um meine gesamte WordPress-Website vor externem Zugriff zu schützen.

Nun hatte ich eine laufende, auf Cloudflare Pages gehostete statische Website und eine sichere Möglichkeit, auf meine alte WordPress-Installation zuzugreifen und meine Inhalte zu verwalten. Allerdings fehlten noch ein paar Dinge: Suche und Formulare.

Simply Static-Konfiguration abschließen

Suche

Wie bereits erwähnt, benötigst du die URL der statischen Website, um die Such- und CORS-Einstellungen in Simply Static zu verwenden. Nun hatte ich eine und konnte die Einrichtung abschließen.

Ich habe den Shortcode [ ssp-search ] zu meiner Support-Seite hinzugefügt, da dies derzeit die einzige Suchleiste auf meiner gesamten Website ist. Zuvor habe ich hier das großartige SearchWP-Plugin verwendet, aber obwohl es großartig ist, gehörte es zu meiner Aufräumaktion, auf die mit Simply Static implementierte (statische) Lösung umzusteigen.

Jedes Mal, wenn eine neue statische Generierung gestartet wird, wird ein neuer Suchindex auf Basis der statischen Website erstellt. Zuvor bin ich zum Tab „CORS“ gewechselt:

Du wirst feststellen, dass das Hinzufügen der statischen URL im Such-Tab (und das Speichern der Einstellungen) automatisch auch die CORS-Einstellung aktualisiert (und umgekehrt).

Formulare

Als Letztes musste ich die Formularunterstützung hinzufügen. Auf meiner Website verwende ich Gravity Forms, das direkt von Simply Static unterstützt wird, aber ich hatte ein Problem: Ich verwende Helpscout als Support-System.

Zuvor habe ich das offizielle Helpscout-Add-on von Gravity Forms verwendet, das nicht für die Nutzung in einer statischen Umgebung unterstützt wird. Deshalb habe ich mich entschieden, ein Konto bei Zapier zu erstellen.

Da Simply Static beim Absenden eines Formulars auf einer statischen Website auch externe Webhooks unterstützt, war die Einrichtung ziemlich einfach. Ich möchte erwähnen, dass du für die Nutzung der Webhook-Funktion in Zapier mindestens den Starter-Tarif benötigst, der mit etwa 17 $ pro Monat nicht gerade günstig ist.

Wenn du eine günstigere Alternative zum Versenden von E-Mails mit einem Webhook suchst und die Helpscout-Integration nicht benötigst, würde ich IFTTT als Alternative sehr empfehlen. Webhooks werden im kostenlosen Tarif unterstützt, sodass du deine WordPress-Website vollständig statisch betreiben kannst, ohne Geld für externe Abonnementdienste auszugeben.

Hier ist meine Konfiguration in Simply Static für das Simply Static Launch-Formular:

Du musst hier die name-Attribute deines Formulars hinzufügen. Die Benennung ist in Gravity Forms nicht ganz unkompliziert, und es scheint, dass sich hier keine benutzerdefinierten name-Attribute festlegen lassen. Abgesehen davon funktioniert es einwandfrei.

Um die richtigen name-Attribute zu finden, habe ich die Seite aufgerufen, in der das Formular eingebettet ist, die Browserkonsole geöffnet und die Elemente untersucht:

Nun hatte ich alle Informationen bereit, um eine neue statische Generierung zu starten. Statt einen vollständigen Export durchzuführen (was keine gute Idee ist, da Cloudflare Pages auf 500 Builds pro Monat begrenzt ist und jede Datei aufgrund der Einschränkungen der aktuellen GitHub API einen separaten Commit darstellt), habe ich einen Build erstellt, einige Seiten hinzugefügt (zum Beispiel die Support-Seite, auf der ich den Such-Shortcode hinzugefügt hatte) und diesen verwendet:

Da ich in den Einstellungen die Erstellung des Suchindex aktiviert hatte, dauerte es eine Weile. Nach Abschluss hatte ich jedoch eine aktualisierte Support-Seite, eine JSON-Datei für meinen Suchindex und die Konfigurationsdatei für meine Formulare.

Zapier

Ich möchte hier keine vollständige Einführung in Zapier geben, da ich das später ausführlich in einem Blogbeitrag behandeln werde. Ich möchte dir aber zeigen, wie ich alles miteinander verbunden habe.

Ich begann mit der Suche nach „Webhooks by Zapier“:

Anschließend habe ich in der Trigger-Konfiguration „Catch hook“ verwendet:

Ich habe die von Zapier bereitgestellte generierte Webhook-URL kopiert und sie zur Formular-Konfiguration meines Formulars unter Simply Static -> Forms hinzugefügt.

Dann habe ich in der Einstellung „action“ nach „Helpscout“ gesucht:

Ich habe „Create conversion“ ausgewählt:

Ich musste mein Helpscout-Konto verbinden, um fortzufahren. Ich klickte auf den Link, verband mein Helpscout-Konto und war bereit zum Testen. Zapier wartet auf den Eingang eines Test-Webhooks. Daher wechselte ich zu meiner statischen Website, füllte das Formular aus, und Zapier erhielt eine Antwort, mit der ich die Einstellungen weiter konfigurieren konnte.

Sie sehen das Ergebnis des Webhooks und verwenden es, um die erforderlichen Felder dynamisch auszufüllen. Hier ist die Konfiguration, die ich letztendlich für das Simply-Static-Startformular verwendet habe:

Fazit

Das war der gesamte Prozess hinter „Wie ich meine Website statisch gemacht habe“. Ich hoffe, es hat Ihnen gefallen und hilft Ihnen dabei, Ihre eigene Website auf eine statische Website umzustellen, da dies immense Vorteile in Bezug auf Performance, Sicherheit und Kostenreduzierung bietet. Bleiben Sie dran, denn ich werde in den nächsten Monaten zahlreiche Tutorials veröffentlichen, die nahezu jedes Detail statischer Websites abdecken – vom Hosting bis hin zu externen Diensten und mehr.