Frontend Academy · Lektion

git init, add, commit und status

Initialisieren Sie ein Repository, stellen Sie Änderungen mit git add bereit, erstellen Sie Commits und lesen Sie git status sowie git log, um die Historie zu verstehen.

Lektion 1 von 413 Schritte

git init, add, commit und status ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Versionskontrolle?

Git verfolgt jede Änderung an Ihrem Code im Laufe der Zeit. Sie können sehen, was, wann und warum geändert wurde. Fehler lassen sich rückgängig machen. Mehrere Personen können an derselben Codebasis arbeiten. Jedes professionelle Team verwendet Git.

git init – Ein Repository starten

Führen Sie git init in einem beliebigen Ordner aus, um ein Git-Repository zu initialisieren. Git erstellt ein verstecktes Verzeichnis .git, in dem die gesamte Projekthistorie gespeichert wird.

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

Die drei Bereiche

Git hat drei Bereiche: Arbeitsverzeichnis (Dateien, die Sie bearbeiten), Staging-Bereich (Dateien, die für den nächsten Commit vorgemerkt sind), Repository (Commit-Historie). Im Staging-Bereich können Sie präzise Commits zusammenstellen.

git status – Was wurde geändert?

git status zeigt, welche Dateien nicht verfolgt, geändert oder für den Commit vorgemerkt sind. Verwenden Sie den Befehl während Ihres gesamten Workflows regelmäßig, um den aktuellen Zustand zu überprüfen.

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add – Änderungen vormerken

git add filename nimmt eine bestimmte Datei in den Staging-Bereich auf. git add . nimmt alle Änderungen im aktuellen Verzeichnis auf. git add -p nimmt Änderungen interaktiv auf (Hunk für Hunk).

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit – Einen Snapshot speichern

git commit -m 'message' erstellt einen dauerhaften Snapshot der vorgemerkten Änderungen. Die Nachricht sollte beschreiben, warum die Änderung vorgenommen wurde, nicht was geändert wurde. Jeder Commit besitzt einen eindeutigen SHA-Hash.

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

Conventional Commits

Viele Teams verwenden das Format Conventional Commits: type(scope): description. Häufige Typen sind feat, fix, refactor, test, docs, chore und perf. Dadurch lassen sich Changelogs und semantische Versionierung automatisiert erzeugen.

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log – Historie anzeigen

git log zeigt die Commit-Historie. git log --oneline zeigt eine kompakte Ansicht mit einer Zeile pro Commit. git log --graph stellt die Branch-Struktur grafisch dar.

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff – Änderungen anzeigen

git diff zeigt nicht vorgemerkte Änderungen. git diff --staged zeigt vorgemerkte Änderungen. git diff HEAD zeigt alle Änderungen seit dem letzten Commit.

Die Datei .gitignore

Führen Sie in .gitignore Dateien und Verzeichnisse auf, die von der Versionskontrolle ausgeschlossen werden sollen. Ignorieren Sie immer node_modules, .env sowie die Verzeichnisse dist und build. GitHub stellt für jede Sprache und jedes Framework Vorlagen für gitignore bereit.

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore – Nicht vorgemerkte Änderungen verwerfen

git restore filename verwirft Änderungen an einer Datei im Arbeitsverzeichnis und setzt sie auf die zuletzt committe Version zurück. Der Vorgang ist destruktiv – die Änderungen gehen verloren.

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

Kurzüberprüfung

Was bewirkt git add .?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Zentrale Git-Befehle

git init startet ein Repository. git status zeigt den aktuellen Zustand. git add nimmt Dateien in den Staging-Bereich auf. git commit speichert einen Snapshot mit einer Nachricht. git log zeigt die Historie. git diff zeigt Änderungen. .gitignore schließt Dateien aus. Schreiben Sie immer aussagekräftige Commit-Nachrichten, die erklären, warum etwas geändert wurde, nicht was.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „git init, add, commit und status“ kostenlos?

Ja — der vollständige Text von „git init, add, commit und status“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „git init, add, commit und status“?

Initialisieren Sie ein Repository, stellen Sie Änderungen mit git add bereit, erstellen Sie Commits und lesen Sie git status sowie git log, um die Historie zu verstehen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „git init, add, commit und status“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy