Wie verwende ich GitHub Pages?

Inhalte veröffentlichen

GitHub ist eine sehr wichtige und nützliche Community, an der Sie sich beteiligen können, und Git/GitHub ist ein sehr beliebtes Versionskontrollsystem — die meisten Technologieunternehmen verwenden es inzwischen in ihren Arbeitsabläufen. GitHub bietet eine sehr nützliche Funktion namens GitHub Pages, mit der Sie Website-Code live im Web veröffentlichen können.

Grundlegende GitHub-Einrichtung

1. Installieren Sie zunächst Git auf Ihrem Computer. Dies ist die zugrunde liegende Versionskontrollsoftware, auf der GitHub basiert.
2. Registrieren Sie sich anschließend für ein GitHub-Konto. Das ist einfach und unkompliziert.
3. Sobald Sie sich registriert haben, melden Sie sich mit Ihrem Benutzernamen und Passwort bei github.com an.

Ihren Code für das Hochladen vorbereiten

Sie können beliebigen Code in einem GitHub-Repository speichern. Um die Funktion GitHub Pages jedoch optimal zu nutzen, sollte Ihr Code wie eine typische Website strukturiert sein, wobei beispielsweise der primäre Einstiegspunkt eine HTML-Datei namens index.html ist.

Bevor Sie fortfahren, müssen Sie außerdem Ihr Code-Verzeichnis als Git-Repository initialisieren. Gehen Sie dazu wie folgt vor:

1. Navigieren Sie in der Befehlszeile zu Ihrem test-site-Verzeichnis (oder wie auch immer Sie das Verzeichnis genannt haben, das Ihre Website enthält). Verwenden Sie hierfür den Befehl cd (d.h. „change directory“). So würden Sie ihn eingeben, wenn Sie Ihre Website auf Ihrem Desktop in einem Verzeichnis namens test-site abgelegt haben:

   bash

   cd Desktop/test-site
   

2. Wenn die Befehlszeile auf Ihr Website-Verzeichnis zeigt, geben Sie den folgenden Befehl ein. Dieser weist das Werkzeug git an, das Verzeichnis in ein Git-Repository umzuwandeln:

   bash

   git init
   

Ein Hinweis zu Befehlszeilenschnittstellen

Der beste Weg, Ihren Code auf GitHub hochzuladen, ist über die Befehlszeile — ein Fenster, in dem Sie Befehle eingeben, um beispielsweise Dateien zu erstellen und Programme auszuführen, anstatt in einer Benutzeroberfläche zu klicken. Es sieht ungefähr so aus:

Jedes Betriebssystem verfügt über ein Befehlszeilenwerkzeug:

• Windows: Auf die Eingabeaufforderung können Sie zugreifen, indem Sie die Windows-Taste drücken, Eingabeaufforderung eingeben und sie aus der angezeigten Liste auswählen. Beachten Sie, dass Windows eigene Befehlskonventionen hat, die sich von Linux und macOS unterscheiden. Daher können die folgenden Befehle auf Ihrem Computer abweichen.
• macOS: Terminal finden Sie unter Programme > Dienstprogramme.
• Linux: Normalerweise können Sie ein Terminal mit Strg + Alt + T öffnen. Falls das nicht funktioniert, suchen Sie nach Terminal in einer App-Leiste oder einem Menü.

Das mag zunächst etwas beängstigend wirken, aber keine Sorge — Sie werden die Grundlagen schnell verstehen. Sie weisen den Computer im Terminal an, etwas zu tun, indem Sie einen Befehl eingeben und die Eingabetaste drücken, wie oben dargestellt.

Ein Repository für Ihren Code erstellen

1. Als Nächstes müssen Sie ein neues Repository erstellen, in dem Ihre Dateien abgelegt werden. Klicken Sie oben rechts auf der GitHub-Startseite auf Plus (+) und wählen Sie anschließend New Repository aus.
2. Geben Sie auf dieser Seite im Feld Repository name einen Namen für Ihr Code-Repository ein, zum Beispiel my-repository.
3. Fügen Sie außerdem eine Beschreibung hinzu, die angibt, was Ihr Repository enthalten soll. Ihr Bildschirm sollte etwa so aussehen:
4. Klicken Sie auf Create repository. Dadurch sollten Sie auf die folgende Seite gelangen:

Ihre Dateien auf GitHub hochladen

1. Auf der aktuellen Seite interessiert Sie der Abschnitt …or push an existing repository from the command line. In diesem Abschnitt sollten zwei Codezeilen aufgeführt sein. Kopieren Sie die gesamte erste Zeile, fügen Sie sie in die Befehlszeile ein und drücken Sie die Eingabetaste. Der Befehl sollte ungefähr so aussehen:

   bash

   git remote add origin https://github.com/chrisdavidmills/my-repository.git
   

2. Geben Sie anschließend die folgenden zwei Befehle ein und drücken Sie nach jedem die Eingabetaste. Diese bereiten den Code für das Hochladen auf GitHub vor und weisen Git an, diese Dateien zu verwalten.

   bash

   git add --all
   git commit -m 'adding my files to my repository'
   

3. Laden Sie schließlich den Code auf GitHub hoch, indem Sie auf der aktuellen GitHub-Webseite den zweiten der beiden Befehle aus dem Abschnitt …or push an existing repository from the command line aufrufen und ihn in das Terminal eingeben:

   bash

   git push -u origin main
   

4. Jetzt müssen Sie GitHub Pages für Ihr Repository aktivieren. Wählen Sie dazu auf der Startseite Ihres Repositorys Settings und anschließend in der linken Seitenleiste Pages. Wählen Sie unter Source den Branch „main“ aus. Die Seite sollte aktualisiert werden.

5. Rufen Sie erneut den Abschnitt GitHub Pages auf. Dort sollte eine Zeile der Form „Your site is ready to be published at https://xxxxxx.“ angezeigt werden.

6. Wenn Sie auf diese URL klicken, sollten Sie zu einer Live-Version Ihres Beispiels gelangen, sofern die Startseite index.html heißt — standardmäßig wird dieser Einstiegspunkt aufgerufen. Falls der Einstiegspunkt Ihrer Website anders heißt, beispielsweise myPage.html, müssen Sie https://xxxxxx/myPage.html aufrufen.

Weiterführendes GitHub-Wissen

Wenn Sie weitere Änderungen an Ihrer Test-Website vornehmen und diese auf GitHub hochladen möchten, müssen Sie die Änderung wie zuvor an Ihren Dateien vornehmen. Anschließend müssen Sie die folgenden Befehle eingeben und nach jedem die Eingabetaste drücken, um diese Änderungen auf GitHub hochzuladen:

git add --all
git commit -m 'another commit'
git push

Sie können another commit durch eine passendere Nachricht ersetzen, die beschreibt, welche Änderung Sie gerade vorgenommen haben.

Wir haben Git nur oberflächlich behandelt. Weitere Informationen finden Sie auf unserer Seite Git und GitHub.