Webentwicklung ist untrennbar mit Zusammenarbeit verbunden. Die meiste Zeit wirst du mit anderen Entwicklern zusammenarbeiten, und selbst wenn das nicht der Fall ist, kann Git dir auf viele andere Arten helfen.
Git ist die Software, die die Versionen der von uns entwickelten Anwendungen kontrolliert. Sie wird von Einzelentwicklern, großen Unternehmen und sogar von Linux, dem größten Open-Source-Projekt der Welt, verwendet.
Als Webentwickler ist es extrem wichtig zu wissen, wie man Git für die Webentwicklung richtig einsetzt. Wir reden hier nicht nur von „git add“, „git commit“ und „git push“. Du solltest den gesamten Arbeitsablauf bei der Erstellung eines Webprojekts mit Git kennen.
Noch nicht überzeugt? Dann lass uns anfangen!
Warum Git verwenden?
Das sind nur einige der Gründe, warum du mit Git anfangen solltest:
- Organisation: Anstatt dein Projekt in Ordnern wie v1, v2, v3 usw. zu verwalten, hast du ein einziges Projekt mit einer speziellen Datenbank, in der alle Versionen der Dateien gespeichert sind
- Kollaboration: Mit Git kannst du und andere Personen gleichzeitig an demselben Projekt arbeiten, ohne dass Konflikte entstehen.
- Open-Source: Git ist Open-Source, aber es ist auch das Werkzeug, mit dem wir zusammenarbeiten und großartige Open-Source-Software entwickeln. Jeder kann auf Plattformen wie GitHub oder Bitbucket Pull Requests für Open-Source-Projekte stellen.
- Flexibilität der Plattform: Heutzutage kannst du zwischen vielen verschiedenen Git-Hosting-Diensten wählen, z. B. Gitlab, GitHub, Bitbucket und SourceForge. Du kannst sogar eine selbst gehostete Lösung für alle deine Projekte nutzen.
- Einfache Backups: Mach Fehler ganz einfach rückgängig und verliere nie die Codebasis deines Projekts.
Wir haben den Begriff GitHub jetzt schon ein- oder zweimal erwähnt. Was ist also der Unterschied zwischen Git und GitHub?
Das könnte dich verwirren, wenn du dich mit Git noch nicht auskennst. Um es in einfachen Worten zu sagen: Git und GitHub sind verwandte, aber unterschiedliche Tools.
Git ist das Versionskontrollsystem (VCS), mit dem wir die Änderungen an unseren Dateien kontrollieren, während GitHub ein Dienst ist, mit dem wir unsere Projektdateien und deren Git-Verlauf online speichern (im Ordner .git/ deines Projekts).
Git wird lokal auf deinem Computer installiert. Ohne Hosting-Dienste wie GitHub oder GitLab wäre es sehr schwierig, mit anderen Entwicklern zusammenzuarbeiten.
GitHub erweitert Git um weitere Funktionen, die die Zusammenarbeit verbessern, wie Klonen, Forken und Zusammenführen. Zusammen bieten dir diese beiden Tools ein relativ freundliches Ökosystem, um dein Projekt zu entwickeln, zu verwalten und anderen Leuten zu zeigen.
Grundlegender Arbeitsablauf mit Git für die Webentwicklung
In den nächsten Abschnitten erfährst du mehr über den Git-Workflow für die Webentwicklung durch praktische Übungen.
Installationsvoraussetzungen
Wenn du Git noch nicht installiert hast, ist jetzt der perfekte Zeitpunkt dafür. Es ist einfach zu installieren und auf den meisten Betriebssystemen verfügbar.
Lade es von der offiziellen Downloadseite herunter oder installiere es mit einem Paketmanager, wenn du Linux oder macOS verwendest:
Um zu testen, ob die Installation geklappt hat, kannst du unter Linux oder macOS ein Terminal starten, indem du in deinem Anwendungsmenü nach „Terminal“ suchst, oder unter Windows die Git-Bash öffnen (die standardmäßig mit Git installiert wird).
Gib dann ein:
git --version
Wenn du eine Git-Version als Antwort erhältst, bist du startklar.
Wir brauchen außerdem ein GitHub-Konto, also melde dich bei GitHub an oder logge dich ein:
Sobald du Git installiert hast und dich in deinem GitHub-Konto angemeldet hast, kannst du mit dem nächsten Abschnitt fortfahren.
Grundlegender Git-Workflow für gemeinschaftliche Projekte
Wie bereits erwähnt, wirst du die meiste Zeit über keine Einzelprojekte entwickeln. Zusammenarbeit ist eine Schlüsselqualifikation, und Git und GitHub helfen uns dabei, dies zu einem einfachen und effektiven Prozess zu machen.
Der typische Arbeitsablauf eines Git-Projekts sieht wie folgt aus:
- Erstelle eine lokale Kopie des Projekts, indem du ein Repository oder Repo klonst. Wenn du mit anderen zusammenarbeitest, solltest du das Repository zuerst forken.
- Erstelle einen Zweig mit einem repräsentativen Namen für die Funktion, an der du arbeiten wirst.
- Bearbeite das Projekt.
- Übertrage die Änderungen auf deinen lokalen Rechner.
- Pushe die Änderungen in das entfernte Projektarchiv.
- Erstelle eine Pull-Anfrage für das ursprüngliche Projektarchiv.
- Führe die Änderungen zusammen und löse Konflikte im Hauptzweig des ursprünglichen Projektarchivs.
Tutorial
Jetzt ist es an der Zeit, sich die Hände schmutzig zu machen!
In dieser Anleitung wirst du eine einfache HTML-Webseite erstellen. In der Praxis wirst du das Basisprojekt aus dem HTML-Site-Repository in dein GitHub-Konto forken. Das kannst du für alle öffentlich zugänglichen Repositories tun.
Um die HTML-Seite zu forken, gehst du zu diesem GitHub-Repository und klickst auf den Fork-Button oben rechts auf der Seite:
Jetzt hast du einen Fork des ursprünglichen Repos, der nur in deinem GitHub-Konto verfügbar ist. Es ist genau dasselbe Projektarchiv – bis du anfängst, Änderungen vorzunehmen.
Wie du siehst, dauert das Forken eines öffentlichen Projektarchivs nur ein paar Sekunden. Das ist toll für Open-Source-Projekte, aber wenn deine Organisation ein privates Projektarchiv hat, musst du als Mitwirkender aufgenommen werden, bevor du es forken kannst.
Jetzt ist es an der Zeit, deinen Fork auf deinen lokalen Rechner zu bringen. Dazu musst du ihn mit dem Befehl git clone klonen, der das Git-Repository von einem anderen Server abruft:
git clone remote_urlDu musst remote_url durch die URL deines Forks ersetzen. Die genaue URL eines GitHub-Repositoriums erhältst du, indem du auf dessen Seite gehst und auf Code klickst. Wähle dann SSH und kopiere den Link, der dir angezeigt wird:
Der Befehl, mit dem du das geforkte Repository klonst, lautet:
git clone [email protected]:yourusername/HTML-site.gitWenn du ein Projektarchiv klonst, erhältst du einen Ordner mit seinem Namen. In diesem Ordner befinden sich der Quellcode des Projekts (in diesem Fall die HTML-Site) und die Git-Repository, die sich in einem Ordner namens .git befindet.
Du kannst die Liste der Dateien in dem neuen Verzeichnis sehen, indem du den neuen Ordner in einem grafischen Dateimanager öffnest oder indem du sie direkt im Terminal mit den Befehlen ls oder dirauflistest:
# Linux/macOS
ls HTML-site/
# Windows
dir HTML-site
.git images .gitignore index.html LICENSE README.md styles.cssDiese HTML-Seite ist sehr einfach. Sie nutzt Bootstrap für praktische Zwecke und ein paar Bilder von Unsplash, wo du kostenlose Bilder für deine Seite herunterladen kannst.
Wenn du die Datei index.html in deinem Browser öffnest, siehst du eine einfache Seite mit ein paar Bildern:
Es ist an der Zeit, mit diesem Projekt herumzuspielen. Sie fühlt sich sehr leer an, und vielleicht könnte eine Kopfzeile mit dem Namen der Seite das Nutzererlebnis verbessern.
Gehe dazu in das HTML-Site-Verzeichnis und erstelle einen Zweig namens header. In diesem neuen Zweig können wir alle Dateien bearbeiten und so viel Code einbauen, wie wir wollen, denn der Hauptzweig (der ursprüngliche) bleibt davon unberührt.
Führe den folgenden Befehl aus:
git checkout -b header
Dadurch wird ein Zweig mit dem Namen „header“ erstellt und du wechselst direkt danach in diesen Zweig. Das ist gleichbedeutend mit:
git branch header
git checkout header
Um zu bestätigen, dass alles geklappt hat, führe aus:
git status
# On branch header
# nothing to commit, working tree clean
Du wirst sehen, dass du vom „Haupt“-Zweig in den „Kopf“-Zweig verschoben wurdest, aber der Arbeitsbaum ist immer noch sauber, da wir keine Dateien bearbeitet haben.
Öffne in deinem bevorzugten Code-Editor die Datei index.html in deinem verzweigten Projekt. Diese Datei enthält einige Links zu Bootstrap 5, so dass wir die Vorteile der fertigen Komponenten des Frameworks nutzen können.
Füge den folgenden Code in die Datei index.html innerhalb des Tags <body> und über dem Bildcontainer ein:
<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>
Sieht viel besser aus! Du kannst gerne andere Verzweigungen und Änderungen vornehmen, wenn du möchtest.
Wenn du mit der Bearbeitung des Projekts fertig bist, ist es an der Zeit, alle Änderungen an dein lokales Projektarchiv zu übertragen. Gib im Projektverzeichnis Folgendes in dein Terminal ein:
git add --all
git commit -m "Added simple header in index.html file"Zu Beginn eines Projekts ist es üblich, dass die Commit-Meldungen aussagekräftig sind, aber mit der Zeit und der Verlagerung des Schwerpunkts nimmt die Qualität der Meldungen tendenziell ab. Achte darauf, dass du eine gute Benennungspraxis beibehältst.
Nachdem du einen Commit für dein lokales Projektarchiv gemacht hast (das immer noch nur auf deinem Computer verfügbar ist), ist es an der Zeit, ihn in das entfernte Projektarchiv zu übertragen.
Wenn du versuchst, den Commit ganz normal zu pushen, wird das nicht funktionieren, weil du gerade auf dem header Zweig arbeitest. Du musst den Upstream-Zweig für header festlegen:
git push --set-upstream origin headerAb dem 13. August 2021 verlangt GitHub die Verwendung von SSH-Authentifizierung, also stelle sicher, dass du deine Schlüssel richtig eingerichtet hast.
Danach solltest du einen neuen Zweig mit dem Namen header in deinem Repository sehen können (z.B. https://github .com/yourusername/HTML-site/branches):
Um einen Pull Request für das ursprüngliche Repository zu erstellen, klicke unten im Abschnitt Aktive Zweige auf Vergleichen.
Das führt dich zu einem Pull Request, in dem du auswählen musst, mit welchem Zweig (dem Original oder deinem Fork) du zusammenführen möchtest. Standardmäßig wird die Option zum Zusammenführen mit dem Basis-Repository angezeigt:
Wenn du auf die Pull-Request-Option klickst, musst du wie bei deinen früheren Commits eine kurze Beschreibung der Änderungen verfassen. Auch hier solltest du dich kurz fassen und beschreibend sein:
Klicke auf die Schaltfläche Pull Request erstellen und warte darauf, dass der Eigentümer des Basis-Repository deine Änderungen akzeptiert oder dir Feedback gibt.
Herzlichen Glückwunsch – du hast soeben alle Schritte eines gängigen Git-Workflows für die Webentwicklung abgeschlossen!
Das war ein sehr einfaches Beispiel, aber die Logik lässt sich auf Projekte aller Größenordnungen übertragen. Achte darauf, dass du diesen Arbeitsablauf auch bei größeren Gemeinschaftsprojekten genau einhältst.
Wie du Git bei Kinsta verwendest
Wenn du Kinsta-Benutzer bist, hast du bereits zwei Möglichkeiten, Git und GitHub über dein MyKinsta-Portal zu nutzen.
Beginnen wir mit der ersten Möglichkeit. Du kannst dich ganz einfach per SSH einloggen und ein Projektarchiv von einem beliebigen Git-Hosting-Dienst wie GitHub, Gitlab oder Bitbucket abrufen.
Dazu gehst du auf die Registerkarte Seiten, wählst eine Seite aus, gehst zu den SSH-Details und kopierst den SSH-Terminalbefehl.
Melde dich über SSH bei deiner Webseite an, indem du den obigen Befehl in dein Terminal einfügst und dich in den öffentlichen Ordner deiner Webseite einloggst (der sich unter /www/yoursitename/ befindet). Hier befinden sich alle deine WordPress-Dateien, so dass du ein Git Repo mit einem benutzerdefinierten Theme oder Plugin, an dem du gearbeitet hast, herunterladen kannst.
So rufst du ein Git Repo mit einem einfachen Befehl auf:
ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"
Mit der neuen GitHub-Deployment-Funktion von Kinsta kannst du jetzt eine komplette WordPress-Webseite von einem GitHub-Repository aus bereitstellen.
Dein GitHub-Repository sollte eine Kopie der WordPress-Kerndateien und natürlich den Inhalt deiner Webseite im Ordner wp-content enthalten.
Schauen wir uns diese Option einmal kurz an.
Gehe zu einer der Webseiten deines Unternehmens und erstelle eine Staging-Umgebung. Das wird nicht länger als ein paar Minuten dauern.
Sobald du in deiner Staging-Umgebung bist, gehst du auf die Registerkarte Bereitstellung und klickst auf die Schaltfläche Einrichtung beginnen. Du wirst ein GitHub-Modal sehen, mit dem du Kinsta mit deinem GitHub-Konto verbinden kannst.
Wähle nun das Repo aus, aus dem du deine Webseite beziehen willst.
Zum Schluss stellst du deine Webseite bereit und besuchst sie über die URL deiner Staging-Seite.
Diese Funktion befindet sich noch in der Beta-Phase, aber bald wird jeder Kinsta-Nutzer Zugang dazu haben.
Git und Kinsta können eine mächtige Kombination sein, wenn du sie richtig zu nutzen weißt. Unser Tutorial ist nur ein einfaches Beispiel, aber in unserem Git-Wissensdatenbank-Artikel erfährst du noch viel mehr.
Zusammenfassung
Heutzutage ist Git ein unverzichtbares Tool für die Webentwicklung, denn die meiste Zeit wirst du mit anderen zusammenarbeiten, um das bestmögliche Projekt zu erstellen.
In diesem Artikel haben wir einige wichtige Gründe für den Einsatz von Git in deinen Projekten besprochen und dir den grundlegenden Arbeitsablauf bei der Zusammenarbeit in einem Git-Repository gezeigt.
Git ist ein so leistungsfähiges Tool, dass du es sogar auf das WordPress-Hosting ausweiten kannst. Es kann also nur von Vorteil sein, wenn du es lernst und als Teil deines Arsenals an Webentwicklungsfähigkeiten einsetzt.
Hast du weitere Vorschläge zur Verbesserung dieses grundlegenden Git-Workflows für die Webentwicklung? Lass es uns in den Kommentaren wissen!
Daniel is a self-taught Python Developer, Technical Writer, and long-life learner. He enjoys creating software from scratch and explaining this process through stunning articles. Follow him on Twitter: @DaniDiazTech
Schreibe einen Kommentar