U12 — VS Code & Git einrichten

Ziel dieser Übung

Sie erledigen den lokalen Teil des Git-Workflows komplett in VS Code — klonen, ändern, committen und synchronisieren per Klick statt per Terminal-Befehl. Am Ende haben Sie eine Änderung von VS Code über Forgejo bis auf den Server gebracht, ohne lokal ein einziges Terminal-Kommando zu tippen.

Die Farben zeigen Ihnen, wo Sie gerade arbeiten:

lokal auf Ihrem Endgerät (VS Code)  ·  git auf Forgejo (git.md-phw.de, Browser)  ·  server auf dem Server (SSH-Terminal)

Schritte im Überblick

1VS Code installieren
2Repository klonen (per Klick)
3Source Control kennenlernen
4Änderung machen, committen, syncen
5Im Forgejo-GUI prüfen
6Auf dem Server pullen & testen

lokal Schritt 1: VS Code installieren

  1. Laden Sie VS Code herunter: code.visualstudio.com (Windows / macOS / Linux)
  2. Installieren Sie mit den Standardeinstellungen
  3. Starten Sie VS Code

Wichtig: Git selbst muss installiert sein — das haben Sie in u5 bereits erledigt. VS Code findet Git automatisch. Falls nicht: git-scm.com.

Sie brauchen kein Addon: Die Git-Funktionen (Source Control) sind in VS Code fest eingebaut.

lokal Schritt 2: Repository klonen

Falls Ihr Projekt schon als Ordner auf dem Laptop liegt (aus u5): einfach in VS Code öffnen (Datei → Ordner öffnen) und weiter zu Schritt 3. Sonst:

  1. Drücken Sie Strg/Cmd + Shift + P (Befehlspalette)
  2. Tippen Sie Git: Clone und bestätigen Sie mit Enter
  3. Fügen Sie Ihre Repo-Adresse ein:
    git@git.md-phw.de:IHR-NAME/eis-website.git
  4. Wählen Sie einen Zielordner (z. B. Dokumente/EIS26)
  5. Bestätigen Sie „Möchten Sie das geklonte Repository öffnen?“ mit Öffnen

VS Code nutzt dabei automatisch Ihren SSH-Schlüssel — denselben, den Sie in Forgejo hinterlegt haben.

lokal Schritt 3: Source Control kennenlernen

Links in der Aktivitätsleiste finden Sie das Source-Control-Symbol (drei verbundene Punkte, wie ein Verzweigungs-Diagramm). Klicken Sie darauf.

Buchstaben hinter Dateinamen: M = geändert (modified), U = neu (untracked), D = gelöscht (deleted).

lokal Schritt 4: Änderung machen → committen → syncen

  1. Öffnen Sie index.html im Explorer (linke Leiste, oberstes Symbol)
  2. Fügen Sie im <head> einen Kommentar ein:
    <!-- Erste Änderung aus VS Code -->
  3. Speichern (Strg/Cmd + S) — im Source Control erscheint index.html mit M
  4. Klicken Sie auf das + neben der Datei (Stage)
  5. Tippen Sie oben die Commit-Nachricht: Erste Änderung aus VS Code
  6. Klicken Sie auf den Haken ✓ (Commit)
  7. Klicken Sie auf Sync Changes (oder das Kreissymbol unten in der Statusleiste)

Geschafft: Ihre Änderung ist jetzt auf Forgejo — ohne ein einziges Terminal-Kommando.

git Schritt 5: Im Forgejo-GUI prüfen

  1. Öffnen Sie git.md-phw.de im Browser und gehen Sie in Ihr Repository
  2. Ist Ihr Commit „Erste Änderung aus VS Code“ oben sichtbar?
  3. Klicken Sie auf index.html — ist der Kommentar in der Datei?
  4. Struktur-Abgleich: Stimmen Verzeichnisse und Dateien mit Ihrer README.md überein?

Dieser Blick ins GUI ist Ihre Kontrollinstanz — machen Sie ihn zur Routine nach jedem Sync.

server Schritt 6: Auf dem Server pullen & testen

Dafür brauchen Sie Ihr einziges Terminal: die SSH-Verbindung zum Server (nur im mbm-WLAN).

ssh -p 2222 isa##@edumake.de
cd ~/public_html
git pull
# Welche Dateien wurden aktualisiert? Nur die gepushten!
git log --oneline -3
# Ist Ihr Commit "Erste Änderung aus VS Code" dabei?
  1. Prüfen Sie die Ausgabe von git pull: Es kommen nur die Dateien an, die Sie lokal geändert und gepusht haben
  2. Öffnen Sie https://isa##.edumake.de im Browser
  3. Hard Reload: Strg + Shift + R (Windows/Linux) bzw. Cmd + Shift + R (macOS)

Ihr neuer Workflow ab jetzt:

lokal in VS Code ändern → Stage → Commit → Sync  →  git GUI-Check  →  server git pull → Browser mit Hard Reload

Weiter geht es mit dem ersten Training: u13 — Workflow-Training I (angeleitet)

Weiterführende Links