WordPress und GitHub: So integrieren und nutzen Sie GitHub für eine bessere Website-Entwicklung

GitHub ist ein unverzichtbares Tool für Webentwickler. Da Ihre Projektdatenbank auf dem cloudbasierten Remote-Server von GitHub gespeichert wird, können verschiedene Nutzer sie jederzeit einsehen, verwalten und ändern.

Die Integration von WordPress und GitHub kann den Entwicklungsprozess Ihrer Website verbessern und den Arbeitsablauf Ihres Teams effizienter gestalten.

In diesem Artikel erfahren Sie alles über die Integration von WordPress und GitHub. Wir erklären Ihnen, warum Sie GitHub nutzen sollten, und geben Ihnen eine Schritt-für-Schritt-Anleitung zur Integration in WordPress. Abschließend empfehlen wir Ihnen einige WordPress-GitHub-Plugins, die Sie bei Ihren Entwicklungsaufgaben unterstützen.

Warum Sie sich bei der WordPress-Entwicklung für GitHub entscheiden sollten

Bevor wir auf GitHub eingehen, möchten wir zunächst erläutern, was Git und Versionskontrolle sind. Sie sind unerlässlich, um GitHub zu verstehen und zu erkennen, wie es Ihren Arbeitsablauf bei der Website-Entwicklung verbessern kann.

Was sind Versionskontrolle und Git?

Die Versionskontrolle ist ein System zur Nachverfolgung von Änderungen an einer Reihe von Dateien, beispielsweise an Quellcode in der Softwareentwicklung. Es speichert alle Versionen Ihrer Projektdateien in einem Repository (kurz: Repo).

Es gibt zwei Hauptarten von Versionsverwaltungssystemen: zentrale und verteilte.

Bei zentralen Versionsverwaltungssystemen müssen Personen sich mit dem Haupt-Repository verbinden, um Änderungen vorzunehmen. Tritt ein Problem mit diesem Repository auf, ist der Zugriff oder das Bearbeiten nicht mehr möglich.

Verteilte Versionsverwaltungssysteme hingegen ermöglichen Änderungen, ohne direkt auf das Haupt-Repository zugreifen zu müssen. Personen können das Repository klonen und Dateien auf ihrem lokalen Computer bearbeiten.

Git (Global Information Tracker) ist das beliebteste verteilte Versionsverwaltungssystem. Da Git auf einem Remote-Server gehostet wird, können mehrere Personen gleichzeitig auf dasselbe Projekt zugreifen und daran arbeiten.

Es gibt verschiedene Git-Hosting-Plattformen, doch GitHub ist die beliebteste. Außerdem bietet sie zusätzliche Funktionen zusätzlich zu den grundlegenden Git-Funktionen.

Bei der Entwicklung einer WordPress-Website kann es vorkommen, dass Sie Plugins, Themes oder Kern-Dateien bearbeiten müssen. Zwar können Sie WordPress-Dateien auch nur mit Texteditoren bearbeiten, doch ist dies ein mühsamer Vorgang, bei dem leicht Fehler entstehen können.

GitHub erstellt eine Versionsverwaltung, die Ihre WordPress-Dateien sichert. Zudem verkürzt es den Entwicklungsprozess, sodass Sie Änderungen sofort auf den Server anwenden können.

Was sind die Vorteile von GitHub?

GitHub bietet Webentwicklern zahlreiche Vorteile, darunter:

• Versionsverwaltung. Diese Plattform speichert verschiedene Versionen Ihres Projekts und protokolliert jede Änderung. Sie können jede Änderung identifizieren und bei Bedarf zu einer früheren Version zurückkehren.
• Kostenloses Webhosting. GitHub bietet Hosting-Dienste für WordPress-Websites an. Auf diese Weise können Sie Änderungen an der Website direkt auf GitHub vornehmen, was die Effizienz steigert.
• Integration mit WordPress. WordPress bietet verschiedene GitHub-Plugins mit Funktionen, die Ihnen bei Ihren Entwicklungsprojekten helfen können.
• WordPress-Plugin- und Theme-Repositories. Viele Entwickler nutzen GitHub-Repositorys, um ihre Themes oder Plugins zu speichern. Sollte ein Plugin oder Theme nicht in der offiziellen Bibliothek von WordPress verfügbar sein, können Sie es wahrscheinlich aus dem GitHub-Repository installieren.
• Benutzerfreundlichkeit. Die GitHub-Desktop-Anwendung verfügt über eine benutzerfreundliche grafische Oberfläche, wodurch sie einfacher zu bedienen ist als das übliche Git über die Befehlszeile. Dank der umfassenden Dokumentation ist sie auch für Git-Einsteiger eine hervorragende Wahl.

Wie GitHub verteilten Teams zugute kommt

Der größte Vorteil von GitHub ist die einfache Zusammenarbeit, die durch folgende Funktionen ermöglicht wird:

• Cloud-basiertes Repository. Mit GitHub können Nutzer das Haupt-Repository auf ihren lokalen Rechner klonen. Auf diese Weise können Entwickler offline Änderungen am Repository vornehmen und diese anschließend mit der Version in der Cloud zusammenführen.
• Branching (Verzweigungen). Git-Branches vereinfachen die Aufgabenverteilung. Sie ermöglichen es den Teammitgliedern, gleichzeitig an unabhängigen Entwicklungszweigen zu arbeiten, ohne dass es dabei zu Konflikten kommt.
• Pull Requests. Dies Mit dieser Funktion können Sie bis zu 10 Personen für die Bearbeitung einer bestimmten Aufgabe zuweisen. Auf diese Weise können Sie verfolgen, woran andere gerade arbeiten, und die Änderungen überprüfen, bevor Sie sie in das Haupt-Repository übernehmen.

So richten Sie eine lokale WordPress-Umgebung für Git ein

Bevor Sie GitHub nutzen, sollten Sie eine lokale Version Ihrer WordPress-Website erstellen. Diese lokale Entwicklungsumgebung dient dazu, Änderungen zu testen, darunter neue Themes, Plugins oder Designs.

Änderungen an Ihrer lokalen WordPress-Installation wirken sich erst dann auf die Live-Website aus, wenn Sie sie dort bereitstellen.

Lokale WordPress-Tools

Verwenden Sie ein lokales Webentwicklungs-Tool, um eine WordPress-Umgebung auf Ihrem Computer einzurichten. Je nach Funktion gibt es zwei Arten von Tools: Allzweck-Tools und spezielle WordPress-Entwicklungs-Tools.

Mit Allzweck-Tools können Sie beliebige Webentwicklungsumgebung. Sie unterstützen alle Content-Management-Systeme (CMS), allerdings müssen Sie das CMS manuell installieren.

Zwar können Sie für die WordPress-Entwicklung allgemeine Tools verwenden, wir empfehlen jedoch stattdessen WordPress-spezifische Entwicklungstools. Diese sind bereits in WordPress vorinstalliert, was ihre Nutzung vereinfacht.

Für dieses Tutorial verwenden wir Local WP. Dieses Entwicklungstool verfügt über eine grafische Benutzeroberfläche (GUI), wodurch es benutzerfreundlich und ideal für Webentwickler-Einsteiger ist. Befolgen Sie diese Schritte, um Local einzurichten:

1. Besuchen Sie Release-Notes-Webseite von Local.
2. Laden Sie die neueste Version von Local für Ihr Betriebssystem herunter.

3. Führen Sie das Installationsprogramm von Local aus Folgen Sie den Installationsanleitung für Ihr Betriebssystem.

Nachdem die Installation abgeschlossen ist, erstellen Sie eine lokale Entwicklungsumgebung:

1. Öffnen Sie Local. Überspringen Sie den Schritt zur Kontoerstellung vorerst, indem Sie auf das X-Symbol klicken.

2. Aktivieren Sie im Fenster für die Nutzungsbedingungen („Terms of Service“) das Kontrollkästchen und klicken Sie auf „I agree“.
3. Klicken Sie im Dashboard von Local auf „Create a new site“.

4. Wählen Sie „Create a new site“ und klicken Sie auf „Continue“, um fortzufahren.

5. Geben Sie den Namen Ihrer Website ein und klicken Sie auf „Continue“.

6. Wählen Sie die Einstellungen für Ihre lokale Umgebung. Wenn Sie sich unsicher sind, wählen Sie „Preferred“. Klicken Sie auf „Continue“.

7. Geben Sie Ihre WordPress-Kontodaten ein. Wählen Sie für eine WordPress-Multisite-Installation unter „Advanced options“ die Option „Yes“. Klicken Sie zur Bestätigung auf „Add Site“, und Ihre neue Website erscheint im Dashboard von Local.

Sobald Ihre lokale Umgebung eingerichtet ist, installieren Sie einen Texteditor, um die Daten Ihrer Website zu bearbeiten. Mit Local können Sie VSCode direkt über das Dashboard installieren:

1. Öffnen Sie über das Dashboard von Local das Add-ons-Menü, das durch das Puzzleteil-Symbol in der linken Seitenleiste dargestellt wird.

2. Klicken Sie auf „Xdebug + VS Code“.

3. Das Installationsfenster erscheint. Klicken Sie auf „Install Add-on“.

4. Warten Sie, bis Local die Installation abgeschlossen und neu gestartet hat.

So installieren Sie Git lokal

Sie müssen zuerst ein lokales Git installieren, um das Remote-Repository von GitHub nutzen zu können. In Ihrem lokalen Git-Repository führen Sie Commits für Ihre Änderungen durch, bevor Sie diese auf GitHub hochladen.

Auf Geräten mit einem aktuellen Linux oder macOS ist Git möglicherweise bereits vorinstalliert. Überprüfen Sie dies, indem Sie git --version im Terminal eingeben.

Geben Sie unter Windows git version in die Eingabeaufforderung ein.

Ist Git bereits installiert, gibt Ihre Kommandozeilenanwendung die Versionsnummer von Git zurück. Andernfalls weist sie Sie darauf hin, dass Git ein unbekannter Befehl ist, oder fragt, ob Sie es installieren möchten.

Sie können das Git-Installationsprogramm manuell herunterladen und auf macOS, Linux, oder Windows. Alternativ können Sie einen der Git-GUI-Clients herunterladen, falls Sie lieber mit einer benutzerfreundlichen Oberfläche statt mit der Kommandozeile arbeiten möchten.

Die Schritte zur Installation von Git unterscheiden sich je nach Betriebssystem. In dieser Anleitung erfahren Sie, wie Sie Git über die Windows-Kommandozeile installieren:

1. Laden Sie das Git-Installationsprogramm für Windows herunter.
2. Führen Sie das Installationsprogramm aus. Klicken Sie auf „Next“ und anschließend auf „Finish“, um die Installation mit den Standardoptionen abzuschließen.
3. Öffnen Sie das Windows-Startmenü und suchen Sie nach Git Bash. Drücken Sie die Eingabetaste.
4. Überprüfen Sie mit dem Befehl git version, ob Git bereits installiert ist.

Erstellen Sie nun ein lokales Repository mithilfe von Git Bash. Wenn Sie mit Git noch nicht vertraut sind, lesen Sie unseren Artikel über grundlegende Git-Befehle, um die Grundlagen kennenzulernen.

So erstellen Sie beispielsweise ein Repository für das Standard-Theme Twenty Twenty von WordPress:

1. Navigieren Sie in das Verzeichnis wp-content und öffnen Sie den Ordner des Themes twentytwenty.
2. Klicken Sie mit der rechten Maustaste auf eine freie Stelle im Ordner und wählen Sie „Git Bash Here“.

3. Ein Git-Bash-Fenster öffnet sich. Geben Sie git init ein und drücken Sie die Eingabetaste.

4. Geben Sie git add . ein und drücken Sie Enter.

5. Geben Sie git commit -m "Nachricht" ein und drücken Sie die Eingabetaste. Ersetzen Sie „Nachricht“ durch einen beliebigen Text, achten Sie aber darauf, dass dieser klar und aussagekräftig ist.

War der Vorgang erfolgreich, sollte ein versteckter Ordner namens .git erscheinen.

So erstellen und committen Sie Ihr erstes GitHub-Repository

Jetzt lernen Sie, wie Sie ein Repository auf GitHub erstellen und Ihr lokales Repository dorthin hochladen (pushen). Das GitHub-Repository ist der zentrale Ort, an dem alle Teammitglieder an ihren Änderungen arbeiten.

So registrieren Sie ein GitHub-Konto

Wenn Sie bereits über ein GitHub-Konto verfügen, überspringen Sie diesen Abschnitt und melden Sie sich bei Ihrem Konto an. Andernfalls gehen Sie wie folgt vor:

1. Rufen Sie GitHub in Ihrem Webbrowser auf und klicken Sie oben rechts auf die Schaltfläche „Sign up“.

2. Geben Sie Ihre E-Mail-Adresse ein und klicken Sie auf „Continue“, um fortzufahren.
3. Erstellen Sie einen Benutzernamen und ein Passwort. Wählen Sie anschließend, ob Sie Neuigkeiten und Updates erhalten möchten, und klicken Sie auf „Continue“.

4. Bestätigen Sie Ihr Konto, indem Sie auf „Start Puzzle“ klicken und die Aufgabe lösen. Klicken Sie danach auf „Create Account“.
5. Suchen Sie in Ihrem E-Mail-Postfach nach dem Bestätigungscode von GitHub. Geben Sie den Code in das Feld „Enter code“ ein und drücken Sie die Eingabetaste.
6. Beantworten Sie einige Fragen, um Ihr GitHub-Konto an Ihre Anforderungen anzupassen, oder klicken Sie auf „Skip personalization“.

7. Wählen Sie entweder das „Free Account“ oder das „Team Account“.
8. Warten Sie, bis GitHub Sie zu Ihrer Kontoseite weiterleitet.

So erstellen Sie Ihr erstes GitHub-Repository

Melden Sie sich in Ihrem GitHub-Konto an, um ein neues Repository zu erstellen. Führen Sie dann auf einer beliebigen Seite folgende Schritte aus:

1. Klicken Sie oben rechts auf das Plus-Symbol (+). Wählen Sie aus dem Dropdown-Menü die Option New repository.

2. Wählen Sie auf der Seite „Create a new repository“ einen Eigentümer (Owner) aus und geben Sie Ihren Repository-Namen (Repository name) ein. Optional können Sie eine Beschreibung (Description) hinzufügen.
3. Wählen Sie die Sichtbarkeit Ihres Repositorys aus. Weitere Informationen hierzu finden Sie in der Anleitung von GitHub zu Repositorys.

4. Da wir das lokale Repository hochladen, überspringen Sie den Bereich Initialize this repository with: und klicken Sie direkt auf Create repository. Nach der Erstellung zeigt GitHub Ihr neues, leeres Repository an.

So führen Sie Ihren ersten GitHub-Commit durch

Nachdem Sie ein GitHub-Repository erstellt haben, führen Sie Ihren ersten Commit durch, indem Sie die Daten Ihres lokalen Repositorys hochladen:

1. Öffnen Sie Ihr GitHub-Repository.
2. Suchen und kopieren Sie im Abschnitt Quick setup die URL des Repositorys.

3. Öffnen Sie Git Bash. Geben Sie git remote add origin URL ein und drücken Sie die Eingabetaste. Ersetzen Sie dabei URL durch den Link zu Ihrem Repository.

4. Geben Sie git push -u origin master ein und drücken Sie Enter.

5. Das Fenster zur Verbindung mit GitHub erscheint. Wählen Sie Sign in with your browser.

6. Melden Sie sich mit Ihrem GitHub-Benutzernamen und Ihrem Passwort an.
7. Wählen Sie auf dem Bestätigungsbildschirm die Option Authorize GitCredentialManager.

8. Öffnen Sie Ihr GitHub-Repository – die Dateien Ihres lokalen Repositorys sollten nun dort sichtbar sein.

Jedes Mal, wenn Sie Änderungen an Ihrem lokalen Repository vornehmen, laden Sie diese auf GitHub hoch (Push). Dadurch wird Ihr GitHub-Repository mit den neuesten lokalen Änderungen aktualisiert.

So rufen Sie Updates von GitHub auf Ihren lokalen Computer ab

Nachdem Sie die Dateien Ihres lokalen Repositorys auf GitHub hochgeladen haben, können andere Personen Änderungen daran vornehmen. Um diese Änderungen in Ihr lokales Repository zu übernehmen, müssen Sie die Updates von GitHub abrufen („fetch“).

Beim Abrufen (Fetch) werden Updates heruntergeladen und in Ihr lokales Repository zusammengeführt. Der Befehl „Pull“ lädt zwar ebenfalls das aktualisierte Repo herunter, führt die Daten jedoch nicht automatisch mit Ihren Arbeitsdateien zusammen.

So rufen Sie Updates von GitHub ab:

1. Öffnen Sie Ihren Projektordner. In diesem Beispiel öffnen wir den Ordner des WordPress-Themes Twenty Twenty.
2. Klicken Sie mit der rechten Maustaste auf eine freie Stelle und wählen Sie Git Bash Here.

3. Geben Sie git fetch URL ein und drücken Sie die Eingabetaste. Ihr lokales Repository ist nun auf dem neuesten Stand.

So nutzen Sie GitHub für die WordPress-Entwicklung

Nachdem Sie alle Werkzeuge vorbereitet haben, können Sie GitHub nutzen, um an der Entwicklung Ihrer Website zu arbeiten. Hier ist ein Beispiel-Workflow zum Ändern des Themes Ihrer Website:

1. Rufen Sie das GitHub-Repository Ihres Website-Themes ab.
2. Nehmen Sie Änderungen am Theme vor und testen Sie diese auf dem lokalen Server.
3. Öffnen Sie den Ordner des Themes → klicken Sie mit der rechten Maustaste auf eine freie Stelle → wählen Sie Git Bash Here.
4. Geben Sie git add . ein und drücken Sie die Eingabetaste. Dadurch erfährt Git, dass die Änderungen beim nächsten Commit berücksichtigt werden sollen.
5. Übernehmen Sie die Änderungen in das lokale Repo, indem Sie den Befehl git commit ausführen.
6. Laden Sie Ihr aktualisiertes lokales Repo mit dem Befehl git push -u origin master auf GitHub hoch. Ersetzen Sie master durch den Namen des entsprechenden Branches, wenn Sie Änderungen in einen anderen Branch übertragen möchten.
7. Sobald alles bereit ist, übertragen Sie die Änderungen auf Ihre Live-Website, indem Sie Ihr Remote-Repo dort bereitstellen (Deploy).

Es gibt viele Möglichkeiten, Remote-Repositorys auf dem Live-Produktionsserver bereitzustellen. Am einfachsten ist es, ein WordPress-GitHub-Plugin zu verwenden, wie zum Beispiel WP Pusher.

So nutzen Sie WP Pusher, um Ihr GitHub-Repo auf der Live-Website bereitzustellen:

1. Laden Sie das Plugin WP Pusher herunter und installieren Sie es.
2. Navigieren Sie in der WordPress-Seitenleiste zu WP Pusher.

3. Wechseln Sie zum Reiter GitHub und klicken Sie auf Obtain a GitHub Token.

4. Ein Pop-up-Fenster zur Bestätigung erscheint. Autorisieren Sie WP Pusher für den Zugriff auf Ihr GitHub-Konto.
5. Kopieren Sie das Token aus dem Pop-up-Fenster und fügen Sie ihn in WordPress ein.
6. Klicken Sie zur Bestätigung auf Save GitHub token.

7. Navigieren Sie in der WordPress-Seitenleiste zu WP Pusher → Install theme oder Install plugin. In diesem Beispiel wählen wir Install theme.
8. Tragen Sie im Feld Theme repository den Namen Ihres GitHub-Repositorys ein.
9. Geben Sie im Feld Repository branch den Begriff main ein.
10. Klicken Sie auf die Schaltfläche Install theme.

11. Navigieren Sie nach der Installation zu Design → Themes → und aktivieren Sie Ihr neu bereitgestelltes Theme.

Jedes Mal, wenn Sie Änderungen in Repositories hochladen, rufen Sie WP Pusher → Plugins oder Themes → Update auf. Andernfalls werden Ihre Änderungen nicht auf der Live-Website angezeigt.

Weitere Ressourcen für GitHub-WordPress-Integrationen

Abgesehen von der Optimierung der Entwicklungsabläufe dient die Integration von WordPress in GitHub noch weiteren Zwecken. So können Sie beispielsweise Plugins oder Themes von GitHub installieren und Ihre Website auf dieser Plattform hosten.

So installieren Sie WordPress-Plugins und -Themes von GitHub

WordPress-Entwickler verfügen in der Regel über GitHub-Repositorys für ihre Themes oder Plugins. Falls diese Themes oder Plugins nicht in der offiziellen WordPress-Bibliothek verfügbar sind, können Sie sie von GitHub installieren.

Die Schritte zur Installation eines Themes und ein Plugin sind ähnlich. So laden Sie ein WordPress-Plugin von GitHub herunter und installieren es:

1. Öffnen Sie GitHub und suchen Sie nach dem gewünschten Plugin.
2. Klicken Sie auf der Repository-Seite des Plugins auf Code → Download ZIP.

3. Wählen Sie den gewünschten Ordner aus und klicken Sie auf Speichern.
4. Nach dem Herunterladen installieren Sie das WordPress-Plugin manuell.

GitHub Pages für das Hosting statischer WordPress-Seiten

GitHub bietet einen kostenlosen Hosting-Dienst namens GitHub Pages an. Damit können Sie direkt aus Ihrem GitHub-Remote-Repo eine statische Website erstellen.

Dabei wird Ihre WordPress-Website allerdings in eine statische Seite umgewandelt, sodass dynamische Funktionen entfallen. Eine statische Website eignet sich hervorragend für ein einfaches Portfolio, einen Blog oder eine Projekt-Demosite.

Zudem nutzen auf GitHub Pages gehostete Websites standardmäßig eine github.io-Domain. Wenn Sie diese ändern möchten, können Sie bei einem Anbieter wie Hostinger eine eigene Domain erwerben.

Um Ihre WordPress-Website auf GitHub Pages zu hosten, führen Sie die folgenden Schritte aus.

1. Ein neues GitHub-Pages-Repository erstellen

Im GitHub-Pages-Repository werden die Daten Ihrer statischen Website gespeichert. Die Erstellung funktioniert genauso wie bei einem normalen GitHub-Repository. Der Name des Repositorys lautet in diesem Fall jedoch benutzername.github.io.

Nach dem Erstellen des Remote-GitHub-Pages-Repositorys klonen Sie es auf Ihren lokalen Computer:

1. Öffnen Sie GitHub und rufen Sie die Seite des Repositorys auf.
2. Klicken Sie auf Code und kopieren Sie die URL des Repositorys.

3. Navigieren Sie zu dem Ordner, in dem Sie das Repository speichern möchten.
4. Klicken Sie mit der rechten Maustaste auf eine freie Stelle und wählen Sie Git Bash Here.
5. Geben Sie git clone URL ein und drücken Sie die Eingabetaste. Ein neuer Ordner mit dem Namen Ihres GitHub-Pages-Repositorys sollte erscheinen.

2. Eine WordPress-Website erstellen

Die WordPress-Seite dient als Ihre Entwicklungsumgebung. Dort nehmen Sie Änderungen am Inhalt und am Design der Live-Website vor, die auf GitHub Pages gehostet wird.

Mit Tools wie Local können Sie Ihre WordPress-GitHub-Pages-Websites auf einem lokalen Server hosten. Andernfalls verwenden Sie Webhosting-Dienste, um anderen Personen den Fernzugriff zu ermöglichen.

Wenn Sie Ihre Entwicklungssite auf einem externen Server hosten, stellen Sie diese auf privat, damit Besucher nicht auf eine unfertige Website gelangen.

Schauen Sie sich unsere WordPress-Anleitung an, um mehr über die Installation und Nutzung des CMS zu erfahren. Sobald Ihre Website erstellt ist, können Sie deren Inhalt und Design anpassen.

3. Die WordPress-Website in statisches HTML umwandeln

GitHub Pages unterstützt nur statische Seiten. Da WordPress-Websites dynamisch sind, müssen Sie diese vor der Bereitstellung in statische Seiten umwandeln.

Es gibt verschiedene Methoden zur Umwandlung. Am gebräuchlichsten ist die Nutzung eines Plugins. In dieser Anleitung verwenden wir das Freemium-Plugin Simply Static.

Richten Sie das Plugin zuerst ein, um Ihre WordPress-Website mit Simply Static umzuwandeln:

1. Laden Sie das Plugin Simply Static herunter und installieren Sie es.
2. Navigieren Sie in der Seitenleiste des WordPress-Dashboards zu Simply Static → Settings → Reiter General.

3. Wählen Sie unter Destination URLs die Option Use absolute URLs.
4. Geben Sie die URL Ihrer GitHub-Pages-Website ein. Bei Websites mit der kostenlosen Domain lautet die URL benutzername.github.io.
5. Wählen Sie als Delivery Method die Option Local Directory.
6. Geben Sie den lokalen Pfad zu Ihrem geklonten GitHub-Pages-Repository ein. Dort speichert Simply Static die HTML-Dateien Ihrer Website.
7. Klicken Sie auf Save Changes.

Nach Abschluss der Konfiguration können Sie Ihre WordPress-Website umwandeln:

1. Navigieren Sie in der Seitenleiste Ihres WordPress-Dashboards zu Simply Static → Generate.
2. Klicken Sie auf die Schaltfläche Generate Static Files. Warten Sie, bis der Export abgeschlossen ist.

3. Öffnen Sie Ihr lokales GitHub-Pages-Repository. War der Export erfolgreich, werden die HTML-Dateien dort angezeigt.

4. Die Website auf GitHub Pages bereitstellen

Übertragen Sie Ihre statische WordPress-Website auf GitHub Pages, um sie online zu stellen. Im Gegensatz zu vielen anderen Hosting-Diensten werden Änderungen durch das Hochladen in das GitHub-Pages-Repo automatisch auf der Live-Website veröffentlicht.

So stellen Sie Ihre Website bereit, indem Sie die HTML-Dateien in Ihr GitHub-Repo hochladen:

1. Kopieren Sie die URL Ihres GitHub-Pages-Repo.
2. Öffnen Sie Ihren lokalen Repository-Ordner.
3. Klicken Sie mit der rechten Maustaste auf eine freie Stelle und wählen Sie Git Bash Here.
4. Geben Sie git remote add origin URL ein und drücken Sie die Eingabetaste. Falls die Fehlermeldung error: remote origin already exists erscheint, haben Sie das Remote-Repository bereits hinzugefügt. Fahren Sie in diesem Fall direkt mit dem nächsten Schritt fort.
5. Laden Sie alle Dateien in das GitHub-Repository hoch, indem Sie git push origin -u master eingeben und die Eingabetaste drücken.
6. Wenn GitHub Sie zur Anmeldung auffordert, wählen Sie Sign in with your browser und geben Sie Ihren Benutzernamen und Ihr Passwort ein.

Nach dem Hochladen der HTML-Dateien in Ihr GitHub-Pages-Repository ist Ihre Live-Website erreichbar.

Jedes Mal, wenn Sie Änderungen an Ihrer Website vornehmen, erstellen Sie neue HTML-Dateien und laden Sie diese in das GitHub-Pages-Repository hoch. Wenn Sie den GitHub-Desktop-Client nutzen, klicken Sie auf Push Origin.

Wenn Sie die HTML-Dateien Ihrer Website lieber automatisch auf GitHub Pages bereitstellen möchten, sollten Sie den Kauf der Pro-Version von Simply Static in Betracht ziehen. Die Preise beginnen bei 99,99 $.

Beliebte WordPress-GitHub-Plugins

Der Einsatz von Plugins kann Ihren Arbeitsablauf weiter optimieren und die WordPress-Entwicklung effizienter gestalten. Hier sind unsere Empfehlungen für die drei besten GitHub-WordPress-Plugins, die jeweils unterschiedliche Zwecke erfüllen:

1. WP Pusher

WP Pusher hilft Ihnen dabei, ein neues Theme oder Plugin über die URL des Repositorys auf Ihrer Live-WordPress-Seite bereitzustellen. Damit können Sie ein Theme und ein Plugin direkt über das WordPress-Dashboard installieren.

WP Pusher sorgt für einen effizienteren Arbeitsablauf für Nutzer, die ihre Plugins oder Themes regelmäßig aktualisieren. Es eignet sich außerdem zur Installation von Plugins oder Themes, die nicht in der WordPress-Bibliothek verfügbar sind.

Um ein WordPress-Theme mit WP Pusher zu installieren, geben Sie einfach den Repo-Link ein und klicken auf die Schaltfläche „Install“. Das Plugin bietet zudem eigene Bereiche für Themes und Plugins, in denen alle installierten Erweiterungen aufgeführt sind.

WP Pusher ist als kostenlose und als Premium-Version erhältlich. Der Premium-Tarif bietet mehr Funktionen und ist ab 99 $ pro Jahr. Außerdem ist es erhältlich mit einer 30-tägigen Geld-zurück-Garantie.

Hauptmerkmale:

• Unterstützung mehrerer Plattformen. WP Pusher lässt sich mit verschiedenen Git-basierten Repository-Diensten integrieren, darunter GitHub, GitLab und Bitbucket.
• Push-to-Deploy. Aktualisiert WordPress-Themes oder Plugins automatisch jedes Mal, wenn Benutzer einen Push an Git senden.
• Multisite-Unterstützung. Dieses Plugin funktioniert für alle Websites innerhalb eines WordPress-Multisite-Netzwerks.

2. Git-Updater

Git Updater ist ein einfaches Plugin zur Automatisierung von Updates für Auf GitHub gehostete WordPress-Themes, Plugins und Sprachpakete.

Git Updater benötigt autorisierten Zugriff auf die Repositorys, um ordnungsgemäß zu funktionieren. Zudem müssen die style.css-Dateien der Themes und Plugins bestimmte Codezeilen enthalten.

Das Plugin kann regelmäßig nach neueren Updates in Ihren Theme- und Plugin-Repositories suchen. Wenn es eine neuere Version erkennt, werden die Änderungen automatisch auf dem Live-Server bereitgestellt.

Git Updater bietet eine kostenlose und eine Pro-Version an. Die Pro-Versionen sind ab 30 $ pro Jahr und bieten zusätzliche Funktionen wie Ferninstallationen und Filialwechsel.

Hauptmerkmale:

• Automatische Updates. Ein Theme, ein Plugin oder ein Sprachpaket wird automatisch aktualisiert, sobald eine neue Version im GitHub-Repository erscheint.
• Remote-Installation von Plugins und Themes. Damit können Sie GitHub-basierte Themes und Plugins über das WordPress-Dashboard installieren.
• Unterstützung privater und öffentlicher Repositorys. Verfolgen Sie Aktualisierungen aus öffentlichen und privaten Repositories.
• Branch-Wechsel. Sie können festlegen, ob Git Updater den Master-Branch oder andere Entwicklungs-Branches berücksichtigt.

3. GitHub Embed

GitHub Embed ist ein Open-Source-Plugin zum Einbetten von GitHub-Inhalten in Ihre Website. Derzeit unterstützt es:

• Repositorys
• Benutzerprofile
• Zusammenfassung der Projektmeilensteine
• Projekt-Mitwirkende

Fügen Sie einfach die Repo-URL auf Ihrer Website ein, um GitHub-Informationen einzubetten. Das Plugin ruft Aktualisierungen der eingebetteten Daten automatisch ab und übernimmt diese.

GitHub Embed eignet sich besonders gut für Projektwebseiten. Mit diesem Plugin können Entwickler die Informationen zu ihren Projekten auf der Webseite stets auf dem neuesten Stand halten.

Das Beste daran ist, dass dieses Plugin und alle seine Funktionen völlig kostenlos sind.

Wichtigste Merkmale:

• Anpassbares Design. Das Plugin bietet CSS-Klassen, mit denen Sie die eingebetteten Informationen an das Design Ihrer Website anpassen können.
• Automatische Aktualisierung der Informationen. GitHub Embed aktualisiert die eingebetteten Informationen automatisch jedes Mal, wenn ein Benutzer eine Änderung auf GitHub vornimmt.
• Mehrfaches Einbetten. Nutzer können verschiedene Informationen auf ihren Websites einbinden.
• Meilenstein-Übersichten. Geben Sie Einzelheiten zum Fortschritt Ihres Projekts an, einschließlich der Probleme, Termine und Beschreibungen der Meilensteine.

Fazit

GitHub ist ein Git-Hosting-Dienst, der es Entwicklern ermöglicht, effizienter an Projekten zusammenzuarbeiten. Die Plattform verfügt über Funktionen zur Versionskontrolle, Nachverfolgung und Verzweigung, wodurch eine gleichzeitige und strukturierte Entwicklung desselben Projekts ermöglicht wird.

Die Integration von WordPress und GitHub wird Ihre Arbeitsabläufe bei der Website-Entwicklung verbessern. In diesem Artikel wurden die einzelnen Schritte zur Integration von GitHub und WordPress erläutert.

Dank der GitHub-Integration können Nutzer WordPress-Plugins aus ihren Repositorys installieren und eine WordPress-Website auf GitHub Pages hosten. Darüber hinaus lassen sich mit Plugins wie WP Pusher, Git Updater und GitHub Embed einige Integrationsprozesse automatisieren.

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu verstehen, wie Sie GitHub zur Unterstützung Ihrer WordPress-Projekte nutzen können. Wenn Sie Fragen haben, hinterlassen Sie uns gerne einen Kommentar.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.

Erstellt von

Virginija Jonušaitė

Mehr von Virginija Jonušaitė