Übung: Erstellen einer Verzweigung als Alice

10 Minuten

Ihre Freundin Alice möchte CSS-Code hinzufügen, um die Katzenfotos auf Ihrer Website zu formatieren. Alice möchte diese Aufgabe in ihrer eigenen Verzweigung durchführen.

Einrichten

Bevor Sie die Rolle von Alice einnehmen können, müssen Sie einige Aufgaben erledigen, um ein Bare-Repository einzurichten, das von allen verwendet werden kann, und dann einige Dateien hinzufügen.

Git ist in Azure Cloud Shell bereits installiert, sodass Git in Cloud Shell rechts verwendet werden kann.

Hinweis

Für diese Übung muss Sich Cloud Shell im klassischen Modus befinden. Wählen Sie oben im Cloud Shell-Fenster das Symbol Mehr (…) aus, wählen Sie Einstellungen aus, und wählen Sie Zur klassischen Version wechseln aus.

Erstellen eines freigegebenen Bare-Repositorys

Erstellen Sie ein neues Verzeichnis namens Shared.git, das das Bare-Repository enthalten soll:
```
mkdir Shared.git
cd Shared.git
```
Führen Sie nun den folgenden Befehl aus, um ein Bare-Repository im freigegebenen Verzeichnis zu erstellen:
```
git init --bare
```
Legen Sie den Namen der Standardverzweigung für das neue Repository fest. Um diese Aufgabe zu erfüllen, können Sie den HEAD-Branch so ändern, dass er auf einen anderen Branch verweist, in diesem Fall auf den main-Branch:
```
git symbolic-ref HEAD refs/heads/main
```

Klonen des freigegebenen Repositorys für Bob

Navigieren Sie in das übergeordnete Verzeichnis, und erstellen Sie ein Verzeichnis für Bob zum Speichern seines Repositorys:
```
cd ..
mkdir Bob
```

Klonen und konfigurieren Sie das Repository für Bob:

cd Bob
git clone ../Shared.git .
git config user.name Bob
git config user.email bob@contoso.com
git symbolic-ref HEAD refs/heads/main

Hinweis

Da Sie mit dem Standardbranch von main beginnen möchten, müssen Sie HEAD so ändern, damit auf refs/heads/main anstelle von refs/heads/master verwiesen wird, was der Standardbranchname ist.

Hinzufügen von Basisdateien

Als letzten Einrichtungsschritt fügen Sie die Basisdateien der Website hinzu und pushen sie in das freigegebene Repository. Für diese Befehle arbeiten Sie weiterhin im Verzeichnis Bob.

Erstellen Sie mit dem Linux-Befehl touch einige Dateien, die Sie dann mithilfe von Git stagen und committen:

touch index.html
mkdir Assets
touch Assets/site.css
git add .
git commit -m "Create empty index.html and site.css files"

Fügen Sie nun mit dem Code-Editor von Cloud Shell Ihrer Datei HTML-Code hinzu. Sie können den Editor öffnen, indem Sie den Befehl code ausführen. Öffnen Sie index.html im Online-Editor, indem Sie an der Terminaleingabeaufforderung code index.html eingeben:
```
code index.html
```

Fügen Sie als Nächstes den HTML-Code ein:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
    <link rel="stylesheet" href="CSS/site.css">
  </head>
  <body>
    <nav><a href="./index.html">home</a></nav>
    <h1>Our Feline Friends</h1>
    <p>Eventually we will put cat pictures here.</p>
    <footer><hr>Copyright (c) 2021 Contoso Cats</footer>
  </body>
</html>

Speichern Sie die Datei, und schließen Sie den Editor. Sie können entweder die Auslassungspunkte „...“ in der rechten Ecke des Editors auswählen oder die entsprechende Tastenkombination verwenden (drücken Sie STRG+S unter Windows und Linux, oder drücken Sie CMD+S unter macOS).
Wechseln Sie in das Verzeichnis Assets, und öffnen Sie die Datei site.css im Editor:
```
cd Assets
code site.css
```

Fügen Sie in der Datei die folgende CSS-Spezifikation hinzu:

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
body { font-family: serif; background-color: #F0FFF8; }
nav, footer { background-color: #C0D8DF; }

Speichern Sie die Datei, und schließen Sie den Editor.

Wechseln Sie zum Verzeichnis Bob zurück, und wiederholen Sie den Commit:
```
cd ..
git add .
git commit -m "Add simple HTML and stylesheet"
git push --set-upstream origin main
```
Hinweis

Da wir einen anderen Standardbranchnamen verwenden, müssen Sie Git anweisen, Ihren Mainbranch dem Mainbranch des Quellrepositorys zuzuordnen.

Überprüfen Sie die Ausgabe. Machen Sie sich keine Sorgen, wenn Sie eine Warnung wie im Beispiel erhalten. Bei dieser Warnung geht es nur darum, die Benutzer über eine Änderung des Standardverhaltens von Git zu informieren.

warning: push.default is unset; its implicit value has changed in
Git 2.0 from 'matching' to 'simple'. To squelch this message
and maintain the traditional behavior, use:

  git config --global push.default matching

To squelch this message and adopt the new behavior now, run:

  git config --global push.default simple

When push.default is set to 'matching', git will push local branches
to the remote branches that already exist with the same name.

Since Git 2.0, Git defaults to the more conservative 'simple'
behavior, which only pushes the current branch to the corresponding
remote branch that 'git pull' uses to update the current branch.

See 'git help config' and search for 'push.default' for further information.
(the 'simple' mode was introduced in Git 1.7.11. Use the similar mode
'current' instead of 'simple' if you sometimes use older versions of Git)

Wenn Sie sicherstellen möchten, dass diese Warnung nicht noch einmal angezeigt wird, können Sie den folgenden Befehl ausführen:

git config --global push.default simple

Überprüfen Sie, ob der Erfolg in der Ausgabe angezeigt wird:

Counting objects: 9, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (9/9), 953 bytes | 953.00 KiB/s, done.
Total 9 (delta 0), reused 0 (delta 0)
To ../Shared.git
 * [new branch]      main -> main

Erstellen einer Verzweigung für Alice

Alice möchte einen Topic-Branch mit dem Namen add-style erstellen, um ihre Arbeit darin zu erledigen. Nehmen Sie die Rolle von Alice ein, erstellen Sie eine Verzweigung, und fügen Sie dieser Code hinzu.

Navigieren Sie in das übergeordnete Verzeichnis, und erstellen Sie ein Verzeichnis für Alice zum Speichern ihrer Kopie des Repositorys:
```
cd ..
mkdir Alice
```

Klonen Sie das Repository für Alice, und konfigurieren Sie es dann:

cd Alice
git clone ../Shared.git .
git config user.name Alice
git config user.email alice@contoso.com

Sie verfügen jetzt über eine aktuelle Kopie des Repositorys. Zur Bestätigung können Sie den Dateiinhalt auflisten und git status verwenden, um den Zustand des Repositorys zu bestätigen.
```
ls
git status
```
Führen Sie den git branch-Befehl aus, um einen Branch mit dem Namen add-style zu erstellen. Führen Sie anschließend den git checkout-Befehl aus, um zu diesem Branch zu wechseln (machen Sie ihn zum aktuellen Branch).
```
git branch add-style
git checkout add-style
```
Öffnen Sie im Verzeichnis Alice/Assets die Datei site.css. Fügen Sie unten in der Datei die folgende CSS-Klassendefinition hinzu:
```
.cat { max-width: 40%; padding: 5 }
```
Speichern Sie die Änderungen an der Datei, und schließen Sie den Editor.

Führen Sie für die Änderung einen Commit aus:

git commit -a -m "Add style for cat pictures"

An dieser Stelle möchte Alice ihren Stil allen anderen Benutzern zur Verfügung stellen, daher wechselt sie zurück zu main und führt einen Pull aus für den Fall, dass andere Benutzer Änderungen vorgenommen haben:
```
git checkout main
git pull
```
Die Ausgabe gibt an, dass die Verzweigung main auf dem neuesten Stand ist (d. h., main auf dem Computer von Alice entspricht main im freigegebenen Repository). Alice führt also den add-style-Branch mit dem main-Branch zusammen, indem sie git merge --ff-only ausführt, um einen Merge mit Vorlauf auszuführen. Anschließend pusht Alice main aus ihrem Repository in das freigegebene Repository.
```
git merge --ff-only add-style
git push
```