So hosten Sie eine statische WordPress Kostenlose Site (auf GitHub Pages, Vercel, Netlify)

WordPress ist ein leistungsstarkes und beliebtes Content-Management-System, das jedoch ein dynamisches WordPress Website kann kostspielig sein und laufende Wartung erfordern. Für viele einfache Websites oder Blogs ist eine statische Version einer WordPress Site kann eine hervorragende Alternative sein. Statische Sites sind schneller, sicherer und können kostenlos auf Plattformen wie GitHub Pages, Netlify oder Vercel gehostet werden.

In diesem Tutorial werde ich Sie durch den Prozess der Erstellung einer statischen Version Ihres WordPress Website und Hosting kostenlos. Dieser Ansatz ist ideal für Anfänger, die die benutzerfreundliche WordPress Schnittstelle zur Inhaltserstellung, während Sie gleichzeitig die Vorteile einer statischen Site genießen.

Werkzeuge, die Sie brauchen

Bevor wir uns in den Prozess stürzen, sollten wir sicherstellen, dass Sie über alle notwendigen Werkzeuge verfügen. Hier ist eine Liste mit allem, was Sie zum Hosten Ihres statischen WordPress Seite kostenlos:

Bevor Sie mit dem Tutorial fortfahren, stellen Sie sicher, dass Sie diese Tools installiert und Konten eingerichtet haben. Wenn alles bereit ist, läuft der Vorgang reibungslos und unkompliziert.

Schritt 1: Entwickeln Sie Ihre WordPress Site auf LocalWP

Bevor wir beginnen, müssen Sie Ihre WordPress Site bereit. Wenn Sie Ihre Site noch nicht erstellt haben oder sie derzeit woanders gehostet wird, empfehle ich die Verwendung von LocalWP (früher Local by Flywheel), um Ihre Site lokal zu entwickeln und zu testen.

1. Laden Sie LocalWP kostenlos herunter und installieren Sie es von localwp.com.
2. Erstelle eine neue WordPress Website in LocalWP.
3. Gestalten Sie Ihre Site, fügen Sie Inhalte hinzu und installieren Sie die erforderlichen Plug-Ins.
4. Stellen Sie sicher, dass Ihre Site in ihrer statischen Form genau so aussieht und funktioniert, wie Sie es möchten.

Grundlegendes zu den Einschränkungen statischer Sites

Während statisch WordPress Websites bieten Vorteile wie verbesserte Geschwindigkeit, Sicherheit und kostenlose Hosting-Optionen, es ist wichtig, sich ihrer Einschränkungen bewusst zu sein. Einige dynamische Funktionen von WordPress funktioniert nicht in einer statischen Umgebung:

1. WordPress Online Formulare: Traditionell WordPress Formulare, die auf serverseitiger Verarbeitung basieren, funktionieren nicht. Dazu gehören Kontaktformulare, Abonnementformulare und andere interaktive Formulare.
2. WordPress Ihre Nachricht: Dynamische Kommentarsysteme, die Benutzerinteraktionen in Echtzeit ermöglichen, werden auf statischen Sites nicht unterstützt.
3. Zugriff auf den Admin-Bereich: Alle Links zu /wp-admin oder ähnliche interne WordPress Routen funktionieren nicht, da diese eine serverseitige Verarbeitung erfordern.
4. Inhaltsaktualisierungen in Echtzeit: Statische Websites müssen neu generiert und neu bereitgestellt werden, damit Änderungen am Inhalt sichtbar werden, im Gegensatz zu dynamischen WordPress Websites, auf denen Änderungen sofort wirksam sind.
5. Benutzerauthentifizierung: Funktionen, die Benutzeranmeldungen oder Mitgliedschaften erfordern, werden in einer grundlegenden statischen Site-Einrichtung nicht unterstützt.
6. E-Commerce-Funktionalität: Dynamische Einkaufswagen und Zahlungsabwicklungen funktionieren in einer statischen Umgebung normalerweise nicht.
7. Suchfunktion: WordPressDie integrierte Suchfunktion von funktioniert nicht, es können jedoch Alternativen implementiert werden (wie in den Simply Static Pro-Funktionen erwähnt).
8. Dynamische Seitenleisten und Widgets: Widgets, die Echtzeitdaten abrufen oder eine serverseitige Verarbeitung erfordern, funktionieren nicht wie erwartet.

Mögliche Problemumgehungen

Diese Einschränkungen bestehen zwar, es gibt jedoch Möglichkeiten, einige davon zu mildern:

• Für Formulare können Sie Dienste von Drittanbietern wie Formspree oder Netlify Forms verwenden.
• Kommentare können über Dienste wie Disqus oder Facebook Comments abgewickelt werden.
• Suchfunktionen können mit clientseitigen Lösungen wie Lunr.js oder Algolia (wie in Simply Static Pro angeboten) implementiert werden.
• Erwägen Sie für den E-Commerce die Verwendung externer Dienste wie Snipcart oder Gumroad.

Bei der Entwicklung Ihres WordPress Beachten Sie diese Einschränkungen und planen Sie die Struktur und Funktionen Ihrer Site entsprechend. Konzentrieren Sie sich auf inhaltsgesteuerte Seiten und minimieren Sie die Abhängigkeit von dynamischen Funktionen, die sich nicht auf eine statische Umgebung übertragen lassen.

Schritt 2: Simply Static installieren und konfigurieren

Simply Static ist ein kostenloses WordPress Plugin das erzeugt eine statische Version Ihrer WordPress Seite? So richten Sie es ein:

1. In Ihrem WordPress Dashboard, gehen Sie zu Plugins > Neu hinzufügen.
2. Suchen Sie nach „Simply Static“, installieren Sie das Plugin und aktivieren Sie das Plugin.
3. Gehen Sie zu Simply Static > Einstellungen in Ihrem WordPress Instrumententafel.
4. Legen Sie unter der Registerkarte „Allgemein“ Folgendes fest:
   • Ziel-URLs: Wählen Sie „Für Offline-Verwendung speichern“. Wenn Sie bereits eine benutzerdefinierte Domain haben, wählen Sie „Absolute URLs“, wie im folgenden Screenshot gezeigt:

5. Lokales Verzeichnis: Legen Sie hier ein Verzeichnis außerhalb Ihres WordPress Installation, zB /Users/yourusername/Documents/StaticSite

6. Stellen Sie unter der Registerkarte „Einschließen/Ausschließen“ sicher, dass alle erforderlichen URLs enthalten sind.
   • In den meisten Fällen verwenden Sie /wp-content/ und /wp-includes/

7. Speichern Sie Ihre Einstellungen.

Da ist auch ein Pro-Version von SimplyStaticHier ist eine Zusammenfassung der Pro-Funktionen des Simply Static-Plugins:

1. Erweiterte Bereitstellung:
   • Stellen Sie statische Sites auf mehreren Plattformen bereit, darunter SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces und BunnyCDN.
2. Einfache Site-Updates:
   • Verwalten Sie Inhaltsaktualisierungen effizient, sei es für einzelne Beiträge, Massenaktualisierungen oder bestimmte URLs.
3. Integration von Formularen und Kommentaren:
   • Integrieren Sie Formulare aus beliebten Plugins wie Contact Form 7, Gravity Forms und Elementor Forms nahtlos in Ihre statische Site.
4. Suchfunktion:
   • Implementieren Sie eine grundlegende Suche mit Fuse.js oder aktualisieren Sie auf ein umfassenderes Such-Erlebnis mit Algolia.
5. WP-CLI-Unterstützung:
   • Verwenden Sie WP-CLI, um Simply Static-Funktionen direkt von der Befehlszeile aus zu konfigurieren, zu exportieren und zu verwalten.
6. Mehrsprachige Unterstützung:
   • Bieten Sie Inhalte in mehreren Sprachen mit Integrationen für WPML, Polylang und TranslatePress an.
7. Minimierung:
   • Optimieren Sie die Site-Leistung, indem Sie CSS-, JavaScript- und statische HTML-Dateien minimieren.
8. WordPress Verschleierung:
   • Standard ersetzen WordPress Wege, um die Tatsache zu verbergen, WordPress Als Content Management System kommt hier zum Einsatz.

Diese Pro-Features verbessern die Funktionalität und Flexibilität von statischen WordPress Websites, die erweiterte Bereitstellungen, bessere Leistung und ein verbessertes Benutzererlebnis ermöglichen.

Schritt 3: Git-Repository initialisieren

Nachdem wir nun unseren statischen Site-Generator eingerichtet haben, bereiten wir unser lokales Verzeichnis für die Versionskontrolle vor:

1. Öffnen Sie ein Terminal oder eine Eingabeaufforderung.
2. Navigieren Sie zu dem Verzeichnis, das Sie in Simply Static angegeben haben (z. B. cd /Users/yourusername/Documents/StaticSite).
3. Initialisieren Sie ein neues Git-Repository, indem Sie Folgendes ausführen:

   git init

Schritt 4: Erstellen Sie ein GitHub-Repository

Wir verwenden GitHub Desktop, um unser Repository zu erstellen und zu verwalten:

1. Laden Sie GitHub Desktop herunter und installieren Sie es von desktop.github.com wenn du es nicht schon getan hast.
2. Öffnen Sie GitHub Desktop und melden Sie sich bei Ihrem GitHub-Konto an.
3. Klicken Sie auf „Datei“ > „Neues Repository“ oder verwenden Sie die Schaltfläche „Neues Repository auf Ihrer Festplatte erstellen“.
4. Stellen Sie Folgendes ein:
   • Name: Wählen Sie einen Namen für Ihr Repository (z. B. „my-static-wordpress“)
   • Lokaler Pfad: Legen Sie hier das gleiche Verzeichnis fest, das Sie in Simply Static angegeben haben.
   • Initialisieren Sie dieses Repository mit einer README-Datei: Lassen Sie das Häkchen deaktiviert
   • Git ignore: Wählen Sie „Keine“ (wir haben in Schritt 3 unser eigenes erstellt)
   • Lizenz: Wählen Sie eine geeignete Lizenz oder belassen Sie sie auf „Keine“.
5. Klicken Sie auf „Repository erstellen“

Schritt 5: Commit des Repositorys

Nachdem wir nun unser Repository eingerichtet haben, führen wir unseren ersten Commit durch:

1. In GitHub Desktop sollten Sie alle Dateien Ihrer statischen Site als Änderungen aufgelistet sehen.
2. Geben Sie eine Zusammenfassung für Ihr Commit ein (z. B. „Erstes Commit statischer Site-Dateien“).
3. Klicken Sie auf „Commit to main“ (oder „Commit to master“ in älteren Versionen).
4. Klicken Sie auf „Repository veröffentlichen“, um Ihr lokales Repository auf GitHub zu übertragen.

Schritt 6: Führen Sie einen Simply Static-Export durch

Jetzt ist es Zeit, unsere statische Site zu generieren:

1. Gehen Sie zurück zu Ihrem WordPress Instrumententafel.
2. Navigieren Sie zu Simply Static > Generieren. (Sie können die Diagnosefehlermeldung ignorieren, da Sie nur in einem lokalen Verzeichnis bereitstellen.)
3. Klicken Sie auf „Statische Dateien generieren“.
4. Warten Sie, bis der Vorgang abgeschlossen ist. Dies kann je nach Größe Ihrer Site einige Minuten dauern.
5. Wenn Sie fertig sind, kehren Sie zu GitHub Desktop zurück.
6. Sie sollten die neu generierten oder aktualisierten Dateien als Änderungen aufgelistet sehen.
7. Übernehmen Sie diese Änderungen mit einer Meldung wie „Statische Site-Dateien aktualisieren“.
8. Übertragen Sie die Änderungen auf GitHub, indem Sie auf „Ursprung übertragen“ klicken.

Schritt 7: Verbinden Sie das Repository mit einer Hosting-Plattform

Da unsere statische Site nun auf GitHub ist, können wir sie problemlos mit einer kostenlosen Hosting-Plattform verbinden. Ich stelle Anweisungen für GitHub Pages, Netlify und Vercel bereit:

GitHub-Seiten

1. Gehen Sie zu Ihrem Repository auf GitHub.com.
2. Klicken Sie in der linken Seitenleiste auf „Einstellungen“ > „Seiten“.
3. Wählen Sie unter „Quelle“ die Option „Aus einem Zweig bereitstellen“ aus.
4. Wählen Sie den Zweig aus, den Sie bereitstellen möchten (normalerweise „main“ oder „master“).
5. Wählen Sie den Stammordner (/) und klicken Sie auf „Speichern“.
6. Ihre Site wird live sein unter https://yourusername.github.io/repository-name/.

Netlify

1. Eröffnen Sie ein kostenloses Konto unter netlify.com.
2. Klicken Sie in Ihrem Netlify-Dashboard auf „Neue Site aus Git“.
3. Wählen Sie GitHub als Ihren Git-Anbieter und autorisieren Sie Netlify.
4. Wählen Sie Ihr Repository aus der Liste aus.
5. Lassen Sie den Build-Befehl und das Veröffentlichungsverzeichnis leer.
6. Klicken Sie auf „Site bereitstellen“.
7. Ihre Site wird auf einer Netlify-Subdomain live geschaltet, die Sie in den Site-Einstellungen anpassen können.

vercel

1. Eröffnen Sie ein kostenloses Konto unter vercel.com.
2. Klicken Sie in Ihrem Vercel-Dashboard auf „Neues Projekt“.
3. Importieren Sie Ihr GitHub-Repository.
4. Lassen Sie die Build-Einstellungen wie sie sind (Vercel sollte automatisch erkennen, dass es sich um eine statische Site handelt).
5. Klicken Sie auf „Bereitstellen“.
6. Ihre Site wird auf einer Vercel-Subdomain live geschaltet, die Sie in den Projekteinstellungen anpassen können.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben jetzt eine statische Version Ihrer WordPress Website gehostet kostenlos. Denken Sie daran, Ihre statischen Dateien neu zu generieren und zu übertragen, wenn Sie Änderungen an Ihrem WordPress Site. Dieser Workflow ermöglicht Ihnen die Leichtigkeit von WordPress zur Inhaltserstellung und profitieren Sie gleichzeitig von der Geschwindigkeit, Sicherheit und dem kostenlosen Hosting einer statischen Site.

Einige zusätzliche Tipps:

• Erwägen Sie die Einrichtung einer benutzerdefinierten Domäne für ein professionelleres Erscheinungsbild.
• Aktualisieren Sie regelmäßig Ihre WordPress Installation und Plugins, um sicherzustellen, dass Sie mit den neuesten Funktionen und Sicherheitsupdates arbeiten.
• Entdecken Sie die erweiterten Funktionen des Pro-Version von Simply Static, wie sich zu verstecken WordPress und Einrichten von Formularen oder Suchfunktionen für Ihre statische Site.