Git für die Webentwicklung: Lernen Sie den typischen Workflow eines Projekts kennen

Webentwicklung ist untrennbar mit Zusammenarbeit verbunden. Meistens arbeiten Sie mit anderen Entwicklern zusammen, und selbst wenn Sie dies nicht tun, kann Git Ihnen auf viele andere Arten helfen.

Git ist die Software, die die Version der von uns erstellten Anwendungen steuert. Es wird von Einzelentwicklern, großen Unternehmen und sogar Linux, dem größten Open-Source-Projekt der Welt, verwendet.

Als Webentwickler ist es äußerst wichtig zu wissen, wie man Git für die Webentwicklung richtig einsetzt. Wir sprechen nicht nur von „git add“, „git commit“ und „git push“. Sie sollten den gesamten Workflow zum Erstellen eines Webprojekts mit Git kennen.

Noch nicht überzeugt? Lasst uns beginnen!

Warum Git verwenden?

Dies sind nur einige der Gründe, Git zu verwenden:

• Organisation: Anstatt Ihr Projekt in Ordnern wie v1, v2, v3 usw. zu verwalten, haben Sie ein Projekt mit einer speziellen Datenbank, in der alle Versionen der Dateien gespeichert sind
• Zusammenarbeit: Mit Git können Sie und andere Personen gleichzeitig am selben Projekt arbeiten, ohne Konflikte zu verursachen.
• Open-Source: Git ist Open-Source, aber es ist auch das Tool, das wir verwenden, um zusammenzuarbeiten und großartige Open-Source-Software zu erstellen. Jeder kann Pull-Requests an Open-Source-Projekte auf Plattformen wie GitHub oder Bitbucket stellen.
• Plattformflexibilität: Heutzutage haben Sie viele verschiedene Git-Hosting-Dienste zur Auswahl, wie Gitlab, GitHub, Bitbucket und SourceForge. Sie können sogar eine selbst gehostete Lösung für alle Ihre Projekte verwenden.
• Einfache Backups: Machen Sie Fehler einfach rückgängig und verlieren Sie niemals Ihre Projektcodebasis.

Wir haben den Begriff GitHub jetzt ein- oder zweimal erwähnt, also was ist der Unterschied zwischen Git und GitHub?

Dies kann Sie verwirren, wenn Sie völlig neu bei Git sind. Um es in einfachen Worten auszudrücken: Git und GitHub sind verwandte, aber unterschiedliche Tools.

Git ist das Versionskontrollsystem (VCS), mit dem wir die Änderungen unserer Dateien kontrollieren, während GitHub ein Dienst ist, mit dem wir unsere Projektdateien und ihren Git-Verlauf online speichern (im Ordner .git/ Ihres Projekts). .

Git wird lokal auf Ihrem Computer installiert, und ohne Hosting-Dienste wie GitHub oder GitLab wäre es sehr schwierig, mit anderen Entwicklern zusammenzuarbeiten.

GitHub lädt Git auf, indem es weitere Funktionen hinzufügt, die die Zusammenarbeit verbessern, wie z. B. Klonen, Verzweigen und Zusammenführen. Zusammen bilden diese beiden Tools ein relativ freundliches Ökosystem, in dem Sie Ihr Projekt entwickeln, verwalten und anderen zeigen können.

Grundlegender Git für den Webentwicklungs-Workflow

In den nächsten Abschnitten erfahren Sie durch praktische Übungen mehr über den Git-Workflow für die Webentwicklung.

Installationsvoraussetzungen

Wenn Sie Git noch nicht installiert haben, ist dies ein perfekter Zeitpunkt. Es ist einfach zu installieren und auf den meisten Betriebssystemen verfügbar.

Laden Sie es von der offiziellen Downloadseite herunter oder installieren Sie es mit einem Paketmanager, wenn Sie Linux oder macOS verwenden:

Um zu testen, ob bei der Installation alles geklappt hat, starten Sie ein Terminal unter Linux oder macOS, indem Sie in Ihrem Anwendungsmenü nach „Terminal“ suchen oder Git bash unter Windows öffnen (das standardmäßig mit Git installiert wird).

Geben Sie dann ein:

 git --version

Wenn Sie eine Git-Version als Antwort erhalten, können Sie loslegen.

Wir benötigen außerdem ein GitHub-Konto, also stellen Sie sicher, dass Sie sich bei GitHub registrieren oder anmelden:

Sobald Sie Git installiert und sich bei Ihrem GitHub-Konto angemeldet haben, können Sie mit dem nächsten Abschnitt fortfahren.

Grundlegender Git-Workflow für kollaborative Projekte

Wie bereits erwähnt, werden Sie die meiste Zeit keine Soloprojekte entwickeln. Zusammenarbeit ist eine Schlüsselkompetenz, und Git und GitHub helfen uns, dies zu einem einfachen, aber effektiven Prozess zu machen.

Der typische Workflow eines Git-Projekts sieht folgendermaßen aus:

1. Erhalten Sie eine lokale Kopie des Projekts, indem Sie ein Repository oder Repo klonen. Wenn Sie zusammenarbeiten, sollten Sie zuerst das Repo forken.
2. Erstellen Sie einen Branch mit einem repräsentativen Namen des Features, an dem Sie arbeiten werden.
3. Bearbeiten Sie das Projekt.
4. Übernehmen Sie die Änderungen auf Ihrem lokalen Computer.
5. Übertragen Sie die Änderungen an das Remote-Repo.
6. Erstellen Sie eine Pull-Anforderung an das ursprüngliche Repository.
7. Führen Sie Konflikte im Hauptzweig des ursprünglichen Repos zusammen und lösen Sie sie.

Lernprogramm

Jetzt ist es an der Zeit, uns die Hände schmutzig zu machen!

In dieser Anleitung erstellen Sie eine einfache HTML-Website. Aus praktischen Gründen verzweigen Sie das Basisprojekt aus dem HTML-Site-Repository in Ihr GitHub-Konto. Dies kann für alle öffentlich zugänglichen Repositories durchgeführt werden.

Um die HTML-Site zu forken, gehen Sie zu diesem GitHub-Repository und klicken Sie auf die Fork -Schaltfläche oben rechts auf der Seite:

Jetzt haben Sie einen Fork des ursprünglichen Repos, der nur in Ihrem GitHub-Konto verfügbar ist. Es ist genau das gleiche Repo – bis Sie anfangen, Änderungen zu übernehmen.

Wie Sie sehen können, dauert das Forken eines öffentlichen Repos nur wenige Sekunden. Dies ist großartig für Open-Source-Projekte, aber denken Sie daran, dass Sie, wenn Ihre Organisation über ein privates Repo verfügt, als Mitwirkender aufgenommen werden müssen, bevor Sie versuchen, es zu forken.

Es ist Zeit, Ihre Gabel zu Ihrem lokalen Computer zu bringen. Dazu müssen Sie es mit dem Befehl git clone , der das Git-Repository vom Remote-Server abruft:

 git clone remote_url

Sie müssen remote_url durch die URL Ihres Forks ersetzen. Um die genaue URL eines GitHub-Repositorys zu erhalten, gehen Sie zu seiner Seite und klicken Sie auf Code . Wählen Sie dann SSH und kopieren Sie den angezeigten Link:

Der Befehl, den Sie ausführen würden, um das gegabelte Repo zu klonen, lautet:

 git clone [email protected]:yourusername/HTML-site.git

Wenn Sie ein Repo klonen, erhalten Sie einen Ordner mit seinem Namen. In diesem Ordner befinden sich der Quellcode des Projekts (in diesem Fall die HTML-Site) und das Git-Repository, das sich in einem Ordner namens .git befindet.

Sie können die Liste der Dateien im neuen Verzeichnis anzeigen, indem Sie den neuen Ordner in einem grafischen Dateimanager öffnen oder sie direkt vom Terminal aus mit den Befehlen ls oder dir auflisten:

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

Diese HTML-Site ist sehr einfach. Es verwendet Bootstrap für praktische Zwecke und ein paar Bilder von Unsplash, wo Sie kostenlose Bilder für Ihre Website herunterladen können.

Wenn Sie die Datei index.html in Ihrem Browser öffnen, sehen Sie eine einfache Seite mit einigen Bildern:

Es ist Zeit, mit diesem Projekt herumzuspielen. Es fühlt sich sehr leer an, und vielleicht könnte ein Header mit dem Namen der Website die Benutzererfahrung verbessern.

Gehen Sie dazu in das HTML-Site- Verzeichnis und erstellen Sie einen Branch namens header . In diesem neuen Zweig können wir alle Dateien bearbeiten und so viel Code implementieren, wie wir möchten, da dies den Hauptzweig (ursprünglich) nicht beeinflusst.

Führen Sie den folgenden Befehl aus:

Melden Sie sich für den Newsletter an

Möchten Sie wissen, wie wir unseren Traffic um über 1000 % gesteigert haben?

Schließen Sie sich über 20.000 anderen an, die unseren wöchentlichen Newsletter mit WordPress-Insidertipps erhalten!

Abonniere jetzt

 git checkout -b header

Dadurch wird ein Zweig namens „header“ erstellt und Sie werden direkt danach darauf umgeschaltet. Es ist äquivalent zu:

 git branch header git checkout header

Um zu bestätigen, dass alles geklappt hat, führen Sie Folgendes aus:

 git status # On branch header # nothing to commit, working tree clean

Sie werden sehen, dass Sie vom „Haupt“-Zweig zum „Header“-Zweig verschoben wurden, aber der Arbeitsbaum ist immer noch sauber, da wir keine Dateien bearbeitet haben.

Öffnen Sie in Ihrem bevorzugten Code-Editor die Datei index.html in Ihrem verzweigten Projekt. Diese Datei enthält einige Links zu Bootstrap 5, sodass wir die gebrauchsfertigen Komponenten des Frameworks nutzen können.

Fügen Sie der index.html -Datei innerhalb des <body> -Tags und über dem Bildcontainer den folgenden Code hinzu:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

Viel besser aussehend! Fühlen Sie sich frei, andere Verzweigungen und Änderungen vorzunehmen, die Sie wünschen.

Sobald Sie mit der Bearbeitung des Projekts fertig sind, ist es an der Zeit, alle Änderungen an Ihr lokales Repository zu übertragen. Geben Sie im Projektverzeichnis Folgendes in Ihr Terminal ein:

 git add --all git commit -m "Added simple header in index.html file"

Wenn Sie ein Projekt zum ersten Mal starten, ist es üblich, beschreibende Commit-Nachrichten zu haben, aber mit der Zeit und einem veränderten Fokus lässt die Qualität der Nachrichten tendenziell nach. Stellen Sie sicher, dass Sie mit der guten Benennungspraxis Schritt halten.

Nachdem Sie ein Commit für Ihr lokales Repository vorgenommen haben (das immer noch nur auf Ihrem Computer verfügbar ist), ist es an der Zeit, es in das Remote-Repository zu verschieben.

Wenn Sie versuchen, das Commit wie gewohnt zu pushen, funktioniert es nicht, weil Sie gerade am header Branch arbeiten. Sie müssen den Upstream-Zweig für header festlegen:

 git push --set-upstream origin header

Ab dem 13. August 2021 erfordert GitHub die Verwendung der SSH-Authentifizierung, stellen Sie also sicher, dass Sie Ihre Schlüssel richtig eingerichtet haben.

Danach sollten Sie in Ihrem Fork-Repository (z. B. https://github.com/yourusername/HTML-site/branches ) einen neuen Branch namens header sehen können:

Um eine Pull-Anforderung an das ursprüngliche Repo zu erstellen, klicken Sie unten im Abschnitt „ Aktive Zweige “ auf „ Vergleichen “.

Dies führt Sie zu einer Pull-Anforderung, bei der Sie auswählen müssen, mit welchem ​​Zweig (dem Original oder Ihrem Fork) Sie zusammenführen möchten. Standardmäßig wird die Option zum Zusammenführen mit dem Basis-Repository angezeigt:

Sobald Sie auf die Pull-Request-Option klicken, müssen Sie eine kurze Beschreibung der vorgenommenen Änderungen schreiben, genau wie bei Ihren früheren Commits. Versuchen Sie noch einmal, sich kurz und doch beschreibend zu fassen:

Klicken Sie auf die Schaltfläche Pull-Anfrage erstellen und warten Sie, bis der Eigentümer des Basis-Repositorys Ihre Änderungen akzeptiert oder Ihnen Feedback zu Ihren Änderungen gibt.

Herzlichen Glückwunsch – Sie haben soeben alle Schritte eines gängigen Git-Workflows für die Webentwicklung abgeschlossen!

Dies war ein wirklich einfaches Beispiel, aber die Logik erstreckt sich über Projekte aller Größen. Stellen Sie sicher, dass Sie diesen Workflow auch in größeren Kooperationsprojekten eng implementieren.

Wie man Git bei Kinsta verwendet

Wenn du ein Kinsta-Benutzer bist, hast du bereits zwei Möglichkeiten, Git und GitHub von deinem MyKinsta-Portal aus zu verwenden.

Beginnen wir mit der ersten Option. Sie können sich einfach per SSH einloggen und ein Repo von jedem Git-Hosting-Service wie GitHub, Gitlab oder Bitbucket ziehen.

Gehen Sie dazu zu Ihrer Registerkarte Sites , wählen Sie eine Site aus, gehen Sie zu Ihrem Abschnitt mit den SSH-Details und kopieren Sie den SSH-Terminalbefehl.

Melden Sie sich über SSH bei Ihrer Site an, indem Sie den obigen Befehl in Ihr Terminal einfügen und den öffentlichen Ordner Ihrer Site eingeben (zu finden unter /www/yoursitename/ ). Hier befinden sich alle Ihre WordPress-Dateien, sodass Sie ein Git-Repository mit einem benutzerdefinierten Design oder Plugin herunterladen können, an dem Sie gearbeitet haben.

So rufen Sie ein Git-Repo mit einem einfachen Befehl ab:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Jetzt, mit der Einführung der neuen GitHub-Bereitstellungsfunktion bei Kinsta, kannst du eine vollständige WordPress-Site aus einem GitHub-Repository bereitstellen.

Dein GitHub-Repo sollte eine Kopie der WordPress-Kerndateien und natürlich den Inhalt deiner Website im wp-content- Ordner enthalten.

Werfen wir einen kurzen Blick auf diese Option.

Gehen Sie zu einem der Standorte Ihres Unternehmens und erstellen Sie eine Staging-Umgebung. Das würde nicht länger als ein paar Minuten dauern.

Sobald Sie sich auf Ihrer Staging-Site befinden, gehen Sie zur Registerkarte Bereitstellung und klicken Sie auf die Schaltfläche Einrichtung starten. Du wirst ein GitHub-Modal sehen, das es Kinsta ermöglicht, sich mit deinem GitHub-Konto zu verbinden.

Wählen Sie nun das Repo aus, aus dem Sie Ihre Website abrufen möchten.

Stellen Sie schließlich Ihre Website bereit und besuchen Sie sie über die URL Ihrer Staging-Website.

Diese Funktion befindet sich noch in der Beta -Phase, aber bald wird jeder Kinsta-Benutzer darauf zugreifen können.

Die Verwendung von Git und Kinsta kann eine leistungsstarke Kombination sein, wenn Sie wissen, wie man sie gut einsetzt. Während unser Tutorial hier nur ein einfaches Beispiel darstellt, können Sie in unserem Artikel in der Git-Wissensdatenbank viel mehr erfahren.

Zusammenfassung

Heutzutage ist Git ein unverzichtbares Werkzeug für die Webentwicklung, da Sie die meiste Zeit mit anderen zusammenarbeiten, um das bestmögliche Projekt zu erstellen.

In diesem Artikel haben wir einige wichtige Gründe für die Verwendung von Git in Ihren Projekten erörtert und Ihnen den grundlegenden Arbeitsablauf der Zusammenarbeit in einem Git-Repository gezeigt.

Git ist ein so leistungsstarkes Tool, dass Sie seine Nutzung sogar auf das WordPress-Hosting ausdehnen können, sodass es Ihnen nur zugute kommen kann, es als Teil Ihres Arsenals an Webentwicklungsfähigkeiten zu lernen und zu implementieren.

Haben Sie weitere Vorschläge zur Verbesserung dieses grundlegenden Git-Workflows für die Webentwicklung? Lass es uns im Kommentarbereich wissen!