Dein erstes Repository | Programmieren Lernen

Jetzt wird es praktisch! In diesem Kapitel erstellst du dein erstes echtes Git-Repository und lernst, wie du Dateien hinzufuegst, aenderst und deinen ersten Commit erstellst. Am Ende hast du ein vollstaendiges kleines Webprojekt unter Versionskontrolle.

Ein Repository erstellen

Es gibt zwei Wege, ein Git-Repository zu erstellen:

Weg 1: Neues Repository initialisieren

# Projektordner erstellen
mkdir meine-webseite
cd meine-webseite

# Git initialisieren
git init

Initialized empty Git repository in /home/user/meine-webseite/.git/

Weg 2: Bestehendes Repository klonen

# Ein Projekt von GitHub herunterladen
git clone https://github.com/benutzer/projekt.git

Wir beginnen mit Weg 1 und erstellen ein neues Projekt von Grund auf.

Dein erstes Projekt aufbauen

Lass uns eine kleine Webseite erstellen. Dieses Projekt werden wir in den naechsten Kapiteln weiter ausbauen.

Projektstruktur erstellen

# Du bist bereits im Ordner meine-webseite/
# Erstelle die Grundstruktur

touch index.html
touch style.css
mkdir images

Die erste Datei: index.html

Oeffne die Datei index.html in deinem Editor und fuege folgenden Inhalt ein:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Willkommen auf meiner Webseite</h1>
        <nav>
            <a href="#ueber-mich">Ueber mich</a>
            <a href="#projekte">Projekte</a>
            <a href="#kontakt">Kontakt</a>
        </nav>
    </header>
    <main>
        <section id="ueber-mich">
            <h2>Ueber mich</h2>
            <p>Ich lerne gerade Webentwicklung und Git!</p>
        </section>
    </main>
    <footer>
        <p>2026 - Meine erste Webseite mit Git</p>
    </footer>
</body>
</html>

Die zweite Datei: style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background: #2c3e50;
    color: white;
    padding: 2rem;
    text-align: center;
}

nav a {
    color: #ecf0f1;
    margin: 0 1rem;
    text-decoration: none;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

footer {
    background: #34495e;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

Den Status pruefen

Jetzt schauen wir, was Git ueber unser Projekt weiss:

git status

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        index.html
        style.css

nothing added to commit but untracked files present (use "git add" to track)

Git sagt uns:

Wir sind auf dem Branch main
Es gibt noch keine Commits
Zwei Dateien sind untracked - Git kennt sie, ueberwacht sie aber noch nicht

Dateien zum Staging hinzufuegen

Bevor du einen Commit erstellen kannst, musst du Git sagen, welche Dateien du in den Commit aufnehmen moechtest. Das nennt man Staging.

# Eine einzelne Datei stagen
git add index.html

# Status pruefen
git status

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   index.html

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        style.css

Die index.html ist jetzt staged (bereit fuer den Commit), aber style.css noch nicht. Fuege sie hinzu:

# Alle Dateien stagen
git add .

# Status pruefen
git status

On branch main

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   index.html
        new file:   style.css

Die drei Bereiche von Git

Git arbeitet mit drei Bereichen:

Working Directory  →  Staging Area  →  Repository
(Deine Dateien)       (Vorbereitung)   (Gespeichert)

  Bearbeiten         git add           git commit

Bereich	Beschreibung
Working Directory	Dein Projektordner mit allen Dateien
Staging Area	Aenderungen, die fuer den naechsten Commit vorgemerkt sind
Repository	Alle gespeicherten Commits (die Historie)

Deinen ersten Commit erstellen

Jetzt ist es soweit - dein erster Commit!

git commit -m "Initiales Projekt: HTML-Grundstruktur und CSS-Styling"

[main (root-commit) 5c2a1b3] Initiales Projekt: HTML-Grundstruktur und CSS-Styling
 2 files changed, 52 insertions(+)
 create mode 100644 index.html
 create mode 100644 style.css

Herzlichen Glueckwunsch! Du hast deinen ersten Git-Commit erstellt!

Was gerade passiert ist

Git hat einen Schnappschuss deines Projekts erstellt
Der Commit hat einen eindeutigen Hash bekommen (5c2a1b3)
Die Commit-Message beschreibt, was du gemacht hast
2 Dateien mit 52 Zeilen wurden aufgenommen

Weitere Aenderungen committen

Lass uns das Projekt erweitern und einen zweiten Commit erstellen.

Eine neue Sektion hinzufuegen

Fuege in index.html vor dem </main>-Tag eine neue Sektion hinzu:

        <section id="projekte">
            <h2>Meine Projekte</h2>
            <ul>
                <li>Diese Webseite (in Arbeit)</li>
                <li>Weitere Projekte folgen...</li>
            </ul>
        </section>

Pruefe den Status:

git status

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -m")

Git erkennt, dass index.html veraendert wurde. Committe die Aenderung:

git add index.html
git commit -m "Projekte-Sektion zur Startseite hinzugefuegt"

[main 8e1d9f0] Projekte-Sektion zur Startseite hinzugefuegt
 1 file changed, 7 insertions(+)

Die Historie anschauen

Schaue dir deine bisherigen Commits an:

git log

commit 8e1d9f0a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e (HEAD -> main)
Author: Dein Name <deine.email@beispiel.de>
Date:   Mon Mar 10 10:30:00 2026 +0100

    Projekte-Sektion zur Startseite hinzugefuegt

commit 5c2a1b3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b
Author: Dein Name <deine.email@beispiel.de>
Date:   Mon Mar 10 10:00:00 2026 +0100

    Initiales Projekt: HTML-Grundstruktur und CSS-Styling

Fuer eine kompaktere Ansicht:

git log --oneline

8e1d9f0 Projekte-Sektion zur Startseite hinzugefuegt
5c2a1b3 Initiales Projekt: HTML-Grundstruktur und CSS-Styling

Der .git-Ordner

Wenn du dir die Dateien in deinem Projektordner anschaust, siehst du einen versteckten .git-Ordner:

ls -la

drwxr-xr-x  8 user user 4096 Mar 10 10:30 .git
-rw-r--r--  1 user user  580 Mar 10 10:30 index.html
-rw-r--r--  1 user user  340 Mar 10 10:00 style.css

Der .git-Ordner enthaelt:

Die gesamte Commit-Historie
Die Konfiguration des Repositories
Die Staging Area (Index)
Alle Branches und Tags

Wichtig: Loesche oder veraendere den .git-Ordner niemals manuell! Wenn du diesen Ordner loeschst, ist die gesamte Git-Historie unwiederbringlich verloren.

Aenderungen rueckgaengig machen

Datei aus dem Staging entfernen

Du hast eine Datei versehentlich gestaged?

# Datei aus dem Staging entfernen (Aenderungen bleiben erhalten)
git restore --staged index.html

Aenderungen in einer Datei verwerfen

Du moechtest eine Datei auf den letzten Commit zuruecksetzen?

# Vorsicht: Alle Aenderungen gehen verloren!
git restore index.html

Uebungen

Erstelle ein neues Repository mit dem Namen uebung-webseite
Erstelle eine index.html mit einer einfachen Struktur
Stage die Datei und erstelle einen Commit
Aendere die Datei und erstelle einen zweiten Commit
Schaue dir die Historie mit git log --oneline an

Was kommt als Naechstes?

Im naechsten Kapitel lernst du die wichtigsten Git-Grundbefehle im Detail kennen. Du wirst sicherer im Umgang mit der Kommandozeile und verstehst, wie die einzelnen Befehle zusammenspielen.

Zusammenfassung

Mit git init erstellst du ein neues Repository
Git hat drei Bereiche: Working Directory, Staging Area und Repository
git add fuegt Dateien zum Staging hinzu
git commit -m "Message" erstellt einen Schnappschuss
git status zeigt den aktuellen Zustand deines Projekts
git log zeigt die Commit-Historie
Der .git-Ordner ist das Herzstueck deines Repositories

Pro-Tipp: Mache lieber viele kleine Commits als wenige grosse. Jeder Commit sollte eine logische Einheit darstellen - zum Beispiel “Navigation hinzugefuegt” statt “Alles geaendert”. So kannst du spaeter leichter nachvollziehen, was wann passiert ist.