Versionsverwaltung mit Git

Bisher habt ihr eure Website direkt auf dem Server bearbeitet. Das funktioniert – aber was passiert, wenn ihr eine Datei kaputt macht? Oder wenn beide Partner gleichzeitig die gleiche Datei ändern?

Git löst beide Probleme: Es speichert jede Version eurer Dateien und hilft euch, gemeinsam an einem Projekt zu arbeiten.

In dieser Übung richtet ihr Git für euer bestehendes Website-Projekt ein und lernt den grundlegenden Workflow kennen. Dabei arbeitet ihr mit drei Orten:

Git-Workflow: Laptop, Forgejo, Server

Aufgabe 1: Git auf eurem Laptop installieren

Installiert Git auf eurem eigenen Laptop. Je nach Betriebssystem unterscheidet sich die Vorgehensweise:

Windows

  1. Ladet Git von git-scm.com herunter und startet den Installer.
  2. Behaltet die Standardeinstellungen bei – klickt euch durch den Installer durch.
  3. Öffnet anschließend Git Bash (wird mitinstalliert) und prüft die Installation:
Git Bash / Terminal 
git --version

macOS

  1. Öffnet das Terminal und gebt folgenden Befehl ein:
Terminal 
git --version

Falls Git noch nicht installiert ist, bietet macOS automatisch die Installation der Xcode Command Line Tools an. Bestätigt die Installation und wartet, bis sie abgeschlossen ist.

Git konfigurieren (alle Betriebssysteme)

Gebt die folgenden Befehle im Terminal bzw. in Git Bash ein. Ersetzt dabei Name und E-Mail durch eure eigenen Daten:

Git Bash / Terminal 
git config --global user.name "Euer Name"
git config --global user.email "name@stud.ph-weingarten.de"
git config --global init.defaultBranch main
Hinweis für Windows: Verwendet für alle folgenden Git-Befehle Git Bash, nicht die normale Eingabeaufforderung (CMD) oder PowerShell. Git Bash versteht die gleichen Befehle wie das Terminal auf macOS und Linux.

Aufgabe 2: Forgejo-Account einrichten

Forgejo ist eine Plattform zur gemeinsamen Verwaltung von Git-Projekten – ähnlich wie GitHub, aber auf unserem eigenen Server.

  1. Registriert euch auf git.md-phw.de mit eurer PH-Mailadresse.
  2. Hinterlegt euren SSH-Schlüssel bei Forgejo, damit ihr euch ohne Passwort verbinden könnt. Verwendet dafür denselben Schlüssel, den ihr bereits für edumake.de nutzt:
Windows (Git Bash) 
cat ~/.ssh/id_ed25519.pub
macOS (Terminal) 
cat ~/.ssh/id_ed25519.pub
  1. Testet die Verbindung:
Git Bash / Terminal 
ssh -T git@git.md-phw.de

Wenn alles funktioniert, erscheint eine Willkommensnachricht mit eurem Benutzernamen.

Aufgabe 3: Bestehendes Projekt versionieren (auf dem Server)

Eure Website liegt bereits auf dem Server. Jetzt bringt ihr sie unter Git-Versionsverwaltung.

  1. Verbindet euch per SSH mit eurem Server (wie gewohnt).
  2. Konfiguriert Git auf dem Server:
SSH (Server) 
git config --global user.name "Euer Name"
git config --global user.email "name@stud.ph-weingarten.de"
git config --global init.defaultBranch main
git config --global core.editor nano
  1. Wechselt in euer Website-Verzeichnis und erstellt eine .gitignore-Datei. Diese teilt Git mit, welche Dateien nicht versioniert werden sollen:
SSH (Server) 
cd ~/public_html
nano .gitignore

Tragt folgende Zeilen ein und speichert mit Strg+O, Enter, Strg+X:

.gitignore 
*.save
*.swp
*~
.DS_Store
  1. Initialisiert das Git-Repository und erstellt den ersten Commit:
SSH (Server) 
git init
git add .
git status
git commit -m "Erste Version der Website"

git status zeigt euch, welche Dateien zum Commit vorgemerkt wurden. Prüft, ob alle erwarteten Dateien dabei sind.

Aufgabe 4: Mit Forgejo verbinden

Jetzt verbindet ihr euer lokales Repository auf dem Server mit Forgejo, damit eure Dateien online gesichert sind.

  1. Erstellt auf git.md-phw.de ein neues Repository:
  2. Erstellt einen SSH-Schlüssel auf dem Server, damit dieser sich bei Forgejo authentifizieren kann:
SSH (Server) 
ssh-keygen -t ed25519 -C "isaX@edumake.de"

Bestätigt den Speicherort mit Enter und lasst die Passphrase leer (einfach zweimal Enter drücken). Ersetzt isaX durch euren Account-Namen.

  1. Fügt den Deploy Key des Servers bei Forgejo hinzu. Kopiert dazu den öffentlichen Schlüssel:
SSH (Server) 
cat ~/.ssh/id_ed25519.pub
  1. Fügt den Schlüssel auf Forgejo ein:
  2. Ladet euren Tandempartner als Mitarbeiter ein:
  3. Verbindet das Server-Repository mit Forgejo und ladet die Dateien hoch:
SSH (Server) 
cd ~/public_html
git remote add origin git@git.md-phw.de:EUER-USERNAME/eis-website.git
git push -u origin main
Wichtig: Ersetzt EUER-USERNAME durch euren Forgejo-Benutzernamen!
  1. Prüft das Ergebnis auf git.md-phw.de – alle eure Dateien sollten dort sichtbar sein!

Aufgabe 5: Auf den Laptop klonen

Jetzt holt ihr euch das Projekt auf euren Laptop. Beide Tandempartner führen dies auf ihrem eigenen Gerät aus.

  1. Öffnet Git Bash (Windows) bzw. Terminal (macOS) und klont das Repository:
Git Bash / Terminal 
git clone git@git.md-phw.de:EUER-USERNAME/eis-website.git
cd eis-website
ls

Alle Dateien vom Server sollten jetzt auf eurem Laptop sein!

  1. Macht eine kleine Änderung auf dem Laptop (z. B. einen Kommentar in index.html ergänzen):
Git Bash / Terminal 
git add index.html
git commit -m "Kommentar in index.html ergaenzt"
git push
  1. Prüft auf git.md-phw.de, ob die Änderung sichtbar ist.
  2. Holt die Änderung auf den Server (Deployment):
SSH (Server) 
cd ~/public_html
git pull
  1. Prüft eure Website unter https://isaN.edumake.de – die Änderung sollte jetzt live sein!

Aufgabe 6: Zusammenarbeit im Tandem

Übt den gemeinsamen Workflow mit eurem Tandempartner. Merkt euch das Mantra: Immer erst pull, dann bearbeiten, dann push!

  1. Partner A bearbeitet impressum.html auf dem eigenen Laptop:
Git Bash / Terminal (Partner A) 
git pull
# impressum.html bearbeiten...
git add impressum.html
git commit -m "Impressum aktualisiert"
git push
  1. Partner B holt sich die Änderung:
Git Bash / Terminal (Partner B) 
git pull
  1. Partner B bearbeitet kontakt.html:
Git Bash / Terminal (Partner B) 
# kontakt.html bearbeiten...
git add kontakt.html
git commit -m "Kontaktseite erweitert"
git push
  1. Partner A: git pull – die Änderung von Partner B ist da!
  2. Beide: Auf dem Server git pull ausführen und die Website prüfen.

Aufgabe 7 (Fortgeschritten): Merge-Konflikt

Was passiert, wenn beide Partner die gleiche Stelle in einer Datei ändern? Git erkennt den Konflikt und ihr müsst ihn manuell lösen.

  1. Partner A ändert den <title> in index.html und pusht:
Git Bash / Terminal (Partner A) 
git pull
# <title> in index.html ändern, z.B. "Unsere Website - Partner A"
git add index.html
git commit -m "Title geaendert (Partner A)"
git push
  1. Partner B ändert denselben <title> in index.html – ohne vorher zu pullen!
Git Bash / Terminal (Partner B) 
# <title> in index.html ändern, z.B. "Unsere Website - Partner B"
git add index.html
git commit -m "Title geaendert (Partner B)"
git push

Der push von Partner B wird abgelehnt (rejected)! Git schützt euch davor, Änderungen des anderen zu überschreiben.

  1. Partner B löst den Konflikt:
Git Bash / Terminal (Partner B) 
git pull

Die Datei index.html enthält jetzt Konfliktmarkierungen:

index.html (Konflikt) 
<<<<<<< HEAD
<title>Unsere Website - Partner B</title>
=======
<title>Unsere Website - Partner A</title>
>>>>>>> ...
  1. Öffnet die Datei, entfernt die Markierungen (<<<<<<<, =======, >>>>>>>) und behaltet die gewünschte Version.
  2. Speichert und schließt den Konflikt ab:
Git Bash / Terminal (Partner B) 
git add index.html
git commit -m "Konflikt im Title geloest"
git push
  1. Partner A: git pull – der Konflikt ist gelöst, beide haben die gleiche Version.

Aufgabe 8: Neue Seite gemeinsam erstellen – team.html

Erstellt gemeinsam eine neue Seite team.html mit einem Steckbrief pro Person.

  1. Erstellt euch jeweils einen Avatar (kein eigenes Foto!), z. B. über einen der folgenden Generatoren: Speichert das Bild in eurem img/-Ordner.
  2. Partner A erstellt die Datei team.html mit der Grundstruktur und dem eigenen Steckbrief (Name, Avatar-Bild, kurzer Text):
Git Bash / Terminal (Partner A) 
git add team.html img/
git commit -m "Team-Seite mit Steckbrief Partner A"
git push
  1. Partner B pullt, ergänzt den eigenen Steckbrief und pusht:
Git Bash / Terminal (Partner B) 
git pull
# Eigenen Steckbrief in team.html ergänzen, Avatar in img/ speichern
git add team.html img/
git commit -m "Steckbrief Partner B ergaenzt"
git push
  1. Ergänzt in index.html einen Link zur neuen Team-Seite in der Navigation.
  2. Auf dem Server: git pull – prüft die Team-Seite unter https://isaN.edumake.de/team.html

Kurzreferenz: Die wichtigsten Git-Befehle

Erstmalig einrichten
git initNeues Repository im aktuellen Ordner anlegen
git clone URLRepository von Forgejo herunterladen
git remote add origin URLForgejo-Verbindung einrichten
Täglicher Workflow
git pullNeueste Version von Forgejo holen
git statusÄnderungen anzeigen
git add DATEIDatei für den nächsten Commit vormerken
git commit -m "..."Änderungen als neue Version speichern
git pushCommits an Forgejo senden
Nützlich
git log --onelineVersionsgeschichte kompakt anzeigen
git diffÄnderungen im Detail anzeigen

Weiter zu U6: JavaScript Grundlagen