Übung: Veröffentlichen Ihres Repositorys

  • 5 Minuten

In der Spielwarenfirma haben die Entwickler der Website angeboten, Ihnen beim Schreiben der Bicep-Vorlage zu helfen. Sie haben ihnen mitgeteilt, dass Sie den Bicep-Code in einem Repository gespeichert haben, und sie haben Sie gebeten, das Repository zu veröffentlichen. In dieser Übung veröffentlichen Sie Ihr Git-Repository, damit Ihre Kollegen die Dateien anzeigen und mit Ihnen zusammenarbeiten können.

In dem Prozess gehen Sie wie folgt vor:

  • Erstellen eines neuen Remoterepositorys.
  • Konfigurieren Ihres lokalen Git-Repositorys für die Integration in das Remoterepository.
  • Pushen Ihrer Änderungen aus Ihrem lokalen Repository in das Remoterepository.
  • Überprüfen, ob die Änderungen im Remoterepository angezeigt werden.

Erstellen eines Repositorys in GitHub

  1. Wechseln Sie in einem Browser zu GitHub. Melden Sie sich mit Ihrem GitHub-Konto an, oder erstellen Sie ein neues Konto, falls Sie noch kein Konto besitzen.

  2. Klicken Sie auf das Pluszeichen (+) in der oberen rechten Ecke des Fensters, und wählen Sie dann Neues Repository aus.

    Screenshot der GitHub-Schnittstelle, die das Menü zum Erstellen eines neuen Repositorys zeigt.

  3. Geben Sie die Details Ihres neuen Repositorys ein:

    • Besitzer: Wählen Sie im Dropdownmenü Ihren GitHub-Benutzernamen aus. Im Screenshot ist mygithubuser der GitHub-Kontoname des Repositorybesitzers. Sie benötigen Ihren Kontonamen später in diesem Modul.
    • Repositoryname: Geben Sie einen aussagekräftigen, aber kurzen Namen ein. Verwenden Sie für dieses Modul toy-website-workflow.
    • Beschreibung: Fügen Sie eine Beschreibung ein, damit andere Benutzer*innen nachvollziehen können, wofür das Repository vorgesehen ist.
    • Privat: Sie können GitHub verwenden, um öffentliche und private Repositorys zu erstellen. Erstellen Sie ein privates Repository, weil nur Personen in Ihrer Organisation auf die Dateien Ihrer Toy-Website zugreifen sollten. Sie können anderen Personen später Zugriff gewähren.

    Wenn Sie fertig sind, sollte Ihre Repositorykonfiguration wie der folgende Screenshot aussehen:

    Screenshot der GitHub-Oberfläche, der die Konfiguration für das zu erstellende Repository zeigt.

  4. Klicken Sie auf Create repository (Repository erstellen).

  5. Notieren Sie sich auf der angezeigten Bestätigungsseite die URL des Repositorys. Sie können die Schaltfläche „Kopieren“ zum Kopieren der URL verwenden. Sie benötigen sie in Kürze.

    Screenshot der GitHub-Oberfläche, der die Details des neuen Repositorys mit hervorgehobener URL des Repositorys zeigt.

Erstellen eines Repositorys in Azure Repos

  1. Wechseln Sie in einem Browser zu Azure DevOps. Melden Sie sich an, oder erstellen Sie ein neues Konto.

  2. Wenn Sie ein neues Konto erstellen, befolgen Sie die Anweisungen zum Erstellen einer Azure DevOps-Organisation. Azure DevOps fordert Sie dann auf, ein neues Projekt zu erstellen. Fahren Sie mit dem nächsten Schritt fort.

    Wenn Sie sich bei einer vorhandenen Azure DevOps-Organisation angemeldet haben, wählen Sie die Schaltfläche Neues Projekt aus, um ein neues Projekt zu erstellen.

    Screenshot der Azure DevOps-Oberfläche, der die Schaltfläche zum Erstellen eines neuen Projekts zeigt.

  3. Geben Sie die Details Ihres neuen Projekts ein:

    • Projektname: Geben Sie einen aussagekräftigen, aber kurzen Namen ein. Verwenden Sie für dieses Modul toy-website.
    • Beschreibung: Fügen Sie eine Beschreibung ein, damit andere Benutzer*innen nachvollziehen können, wofür das Repository vorgesehen ist.
    • Sichtbarkeit: Sie können Azure DevOps verwenden, um öffentliche und private Repositorys zu erstellen. Erstellen Sie ein privates Repository, weil nur Personen in Ihrer Organisation auf die Dateien Ihrer Website zugreifen sollten. Sie können anderen Personen später Zugriff gewähren.

    Wenn Sie fertig sind, sollte Ihre Projektkonfiguration wie der folgende Screenshot aussehen:

    Screenshot der Azure DevOps-Oberfläche, der die Konfiguration für das zu erstellende Projekt zeigt.

  4. Klicken Sie auf Erstellen.

  5. Wählen Sie auf der daraufhin angezeigten Projektseite das Menüelement Repos aus.

    Screenshot der Azure DevOps-Oberfläche, der das Menü auf der Projektseite mit hervorgehobenem Element „Repos“ zeigt.

  6. Notieren Sie sich die URL des Repositorys. Sie können die Schaltfläche „Kopieren“ zum Kopieren der URL verwenden. Sie benötigen sie in Kürze.

    Screenshot der Azure Repos-Oberfläche, der die Details des Repositorys mit hervorgehobener URL des Repositorys zeigt.

Generieren eines Git-Kennworts

Wenn Sie mit Azure Repos aus Visual Studio Code unter macOS arbeiten, müssen Sie ein spezielles Kennwort verwenden, das sich von dem Kennwort für Ihre Anmeldung unterscheidet.

Hinweis

Wenn Sie Windows verwenden, fahren Sie mit dem nächsten Abschnitt Konfigurieren Ihres lokalen Git-Repositorys fort.

  1. Wählen Sie die Schaltfläche Git-Anmeldeinformationen generieren aus.

    Azure Repos erstellt ein zufälliges Kennwort, das Sie verwenden können.

  2. Notieren Sie sich den Wert von Kennwort. Sie benötigen sie in Kürze.

Lassen Sie Ihren Browser geöffnet. Sie sehen sich das Repository später in dieser Übung noch einmal an.

Konfigurieren Ihres lokalen Git-Repositorys

  1. Stellen Sie sicher, dass Sie sich im Mainbranch befinden, indem Sie den folgenden Befehl im Visual Studio Code-Terminal eingeben:

    git checkout main

  2. Geben Sie den folgenden Befehl ein, um Ihr lokales Repository in das erstellte Remoterepository zu integrieren. Ersetzen Sie YOUR_REPOSITORY_URL durch die URL, die Sie zuvor gespeichert haben.

    git remote add origin YOUR_REPOSITORY_URL

    Beachten Sie, dass Sie den Befehl git remote add verwenden, um einen neuen Verweis auf ein Remoterepository zu erstellen. Nennen Sie den Verweis origin, wobei es sich um den Standardnamen handelt.

  3. Überprüfen Sie, ob das Remoterepository erstellt wurde.

    git remote -v

    Die Ausgabe sieht dann wie das folgende Beispiel aus.

    origin  https://github.com/mygithubuser/toy-website.git (fetch)
origin  https://github.com/mygithubuser/toy-website.git (push)

    origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (fetch)
origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (push)

Pushen Ihrer Änderungen mithilfe der Git CLI

  1. Geben Sie im Visual Studio Code-Terminal den folgenden Befehl ein:

    git push -u origin main

    Da Ihr aktueller lokaler Branch main ist, teilt dieser Befehl Git mit, dass Ihr lokaler Mainbranch den Mainbranch in Ihrem Remoterepository nachverfolgt. Außerdem pusht er die Commits aus Ihrem lokalen Repository in das Remoterepository.

  2. Dies ist das erste Mal, dass Sie dieses Remoterepository verwendet haben, weshalb Sie vom Terminal aufgefordert werden, die Art der Authentifizierung auszuwählen. Wählen Sie die Option zur Verwendung des Browsers aus.

  3. Befolgen Sie die Anweisungen im Browser, um sich anzumelden und Visual Studio Code für den Zugriff auf Ihr GitHub-Repository zu autorisieren.

  4. In Ihrem Terminalfenster zeigt Git eine Ausgabe ähnlich dem folgenden Beispiel an:

    Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/mygithubuser/toy-website.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

    Diese Ausgabe gibt an, dass Git den Inhalt Ihres Repositorys erfolgreich in das Remoterepository gepusht hat.

  1. Geben Sie im Visual Studio Code-Terminal den folgenden Befehl ein:

    git push -u origin main

    Da Ihr aktueller lokaler Branch main ist, teilt dieser Befehl Git mit, dass Ihr lokaler Mainbranch den Mainbranch in Ihrem Remoterepository nachverfolgt. Außerdem pusht er die Commits aus Ihrem lokalen Repository in das Remoterepository.

  2. Dies ist das erste Mal, dass Sie dieses Repository verwendet haben, sodass Sie aufgefordert werden, sich anzumelden.

    Wenn Sie Windows verwenden, geben Sie dieselben Anmeldeinformationen ein, die Sie zuvor in dieser Übung für die Anmeldung bei Azure DevOps verwendet haben.

    Wenn Sie macOS verwenden, fügen Sie das Kennwort ein, das Sie zuvor in dieser Übung generiert haben.

  3. In Ihrem Terminalfenster zeigt Git eine Ausgabe ähnlich dem folgenden Beispiel an:

    Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Analyzing objects... (16/16) (5 ms)
remote: Storing packfile... done (165 ms)
remote: Storing index... done (75 ms)
To https://dev.azure.com/myuser/toy-website/_git/toy-website
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

    Diese Ausgabe gibt an, dass Git den Inhalt Ihres Repositorys erfolgreich in das Remoterepository gepusht hat.

Hinzufügen einer README-Datei (Infodatei)

Da Ihre Kollegen nun Ihr Repository verwenden, ist es wichtig, eine README.md-Datei zu erstellen, um ihnen Informationen zu liefern, wofür Ihr Repository gedacht ist und wie sie damit beginnen können.

  1. Öffnen Sie Explorer in Visual Studio Code.

  2. Fügen Sie im Stamm Ihrer aktuellen Ordnerstruktur eine neue Datei hinzu, und nennen Sie sie README.md.

  3. Kopieren Sie den folgenden Text in die Datei:

    # Toy company's website

This repository contains the website for our toy company.

## How to use

The Azure infrastructure is defined using [Bicep](/azure/azure-resource-manager/bicep).

To deploy the website's Azure resources, use the _deploy/main.bicep_ file.

    Tipp

    Dies ist eine Platzhalter-README-Datei, sodass der Inhalte nicht allzu sinnvoll ist. Wenn Sie mit Ihren eigenen Git-Repositorys arbeiten, erstellen Sie eine README-Datei, die einem Benutzer mitteilt, wie er die ersten Schritte mit Ihrem Code unternehmen kann. Stellen Sie sich dies als schlankes Handbuch für Ihr Projekt vor.

  4. Speichern Sie die Datei .

  5. Stagen und committen Sie die Datei in Ihrem lokalen Git-Repository. Sie können auswählen, ob Sie mittels Git CLI oder mithilfe der Quellcodeverwaltung in Visual Studio Code committen.

Erneutes Pushen mithilfe von Visual Studio Code

Nachdem Sie nun eine neue Datei committet haben, müssen Sie Ihre Änderungen erneut pushen, damit das Remoterepository über die neuesten Dateien verfügt. Diesmal verwenden Sie Visual Studio Code, um in das Remoterepository zu pushen.

  1. Öffnen Sie die Quellcodeverwaltung in Visual Studio Code.

  2. Wählen Sie das Symbol mit den drei Punkten rechts von der Symbolleiste Quellcodeverwaltung, und wählen Sie dann Push aus.

    Screenshot von Visual Studio Code mit dem Menü „Quellcodeverwaltung“ mit hervorgehobenem Menüelement „Push“.

    Beachten Sie, dass Sie nicht erneut aufgefordert werden, sich anzumelden. Ihre Anmeldeinformationen werden zwischen Git CLI und Visual Studio Code geteilt.

Überprüfen der Änderungen in GitHub

Nachdem Sie ihre Änderungen in Ihr Remoterepository gepusht haben, können Sie den Inhalt des Repositorys auf GitHub untersuchen.

  1. Aktualisieren Sie die Seite des Repositorys in Ihrem Browser.

  2. Beachten Sie, dass die von Ihnen erstellten Dateien jetzt aufgelistet sind und dass Ihre README.md-Datei angezeigt wird.

    Screenshot der GitHub-Oberfläche, der das Repository einschließlich Ordner- und Dateistruktur zeigt.

  3. Durchsuchen Sie die GitHub-Oberfläche, um die Dateien zu erkunden, und beachten Sie, dass alle Ihre Änderungen angezeigt werden. Da GitHub über die vollständige Liste der Änderungen an jeder Datei verfügt, können Sie sogar den Verlauf einer Datei genauso anzeigen, wie Sie es auch bei der Arbeit in Visual Studio Code können.

Überprüfen der Änderungen in Azure Repos

Nachdem Sie ihre Änderungen in Ihr Remoterepository gepusht haben, können Sie den Inhalt des Repositorys in Azure Repos untersuchen.

  1. Aktualisieren Sie die Seite Repos in Ihrem Browser.

  2. Beachten Sie, dass die von Ihnen erstellten Dateien jetzt aufgelistet sind und dass Ihre README.md-Datei angezeigt wird.

    Screenshot der Azure DevOps-Oberfläche, der das Repository einschließlich Ordner- und Dateistruktur zeigt.

  3. Durchsuchen Sie die Azure Repos-Oberfläche, um die Dateien zu erkunden, und beachten Sie, dass alle Ihre Änderungen angezeigt werden. Da Azure Repos über die vollständige Liste der Änderungen an jeder Datei verfügt, können Sie sogar den Verlauf einer Datei genauso anzeigen, wie Sie es auch bei der Arbeit in Visual Studio Code können.