# GitHub Pages: kostenloses Hosting für Ihre Website – so veröffentlichen Sie Schritt für Schritt

URL: https://skillaria.top/de/guides/git/github-pages-website-kostenlos-veroeffentlichen

GitHub Pages ist kostenloses Hosting für statische Websites direkt aus einem GitHub-Repository. Sie legen HTML, CSS und JavaScript im Repository ab, aktivieren Pages in den Einstellungen, und die Seite ist unter einer Adresse wie username.github.io erreichbar. Eine eigene Domain und HTTPS sind möglich, serverseitiger Code wie PHP und Datenbanken wird jedoch nicht unterstützt.

## Was ist GitHub Pages

GitHub Pages ist kostenloses Hosting für statische Websites, das in GitHub integriert ist. Sie speichern die Dateien der Website in einem gewöhnlichen Git-Repository, und GitHub liefert sie über HTTPS aus. Jeder neue `git push` in den richtigen Branch aktualisiert die Seite, ein separates FTP, ein Hosting-Panel oder das manuelle Hochladen von Dateien sind nicht nötig.

Den Dienst nennt man im Deutschen meist einfach „GitHub Pages“ oder „Github-Pages-Hosting“. Oft wird auch die Frage „git pages was ist das“ gestellt – korrekt ist aber: GitHub Pages ist eine Funktion der Plattform GitHub, nicht von Git selbst. Git veröffentlicht nichts, es speichert nur die Historie der Änderungen.

Am häufigsten nutzt man GitHub Pages für Projektdokumentationen, persönliche Seiten und Portfolios, Blogs, Landingpages, Lernprojekte sowie Demos von Frontend-Anwendungen wie React, Vue oder Svelte nach dem Build.

### Git Pages ist Hosting für statische Inhalte

Das Schlüsselwort ist statisch. GitHub Pages liefert dem Browser fertige Dateien aus: HTML, CSS, JavaScript, Bilder, Schriften, JSON. Code auf dem Server führen sie nicht aus: PHP, Python oder serverseitiges Node.js und Datenbanken funktionieren hier nicht. Braucht Ihre Seite eine Registrierung, einen Warenkorb oder ein Admin-Panel mit Datenbank, benötigen Sie klassisches Webhosting oder eine Cloud-Plattform.

JavaScript im Browser funktioniert dagegen wie gewohnt. Eine Single-Page-Anwendung kann externe APIs abfragen, Formulare lassen sich über Drittdienste versenden, und die Suche auf der Seite läuft im Client.

## Welche Arten von Websites es bei GitHub Pages gibt

GitHub Pages kennt drei Arten von Websites, und von der Art hängt die Adresse ab.

| Art | Repository | Adresse |
| --- | --- | --- |

| Benutzerseite | `username.github.io` | `https://username.github.io/` |

| Organisationsseite | `orgname.github.io` | `https://orgname.github.io/` |

| Projektseite | beliebiger Name, zum Beispiel `docs` | `https://username.github.io/docs/` |

Eine Benutzer- oder Organisationsseite gibt es pro Konto nur einmal, Projektseiten können Sie beliebig viele haben, jeweils eine pro Repository. Der Name des Repositorys für die persönliche Seite muss genau Ihrem Login bei GitHub entsprechen: Lautet der Login `ivan-petrov`, heißt das Repository `ivan-petrov.github.io`.

Für öffentliche Repositorys ist Pages im kostenlosen Tarif verfügbar. Eine Seite aus einem privaten Repository veröffentlichen Sie nur in den kostenpflichtigen Tarifen von GitHub; die veröffentlichte Seite ist dann trotzdem für alle im Internet sichtbar.

## Wie Sie eine Website auf GitHub Pages Schritt für Schritt veröffentlichen

Wir betrachten den einfachsten Weg: fertige HTML-Dateien, Veröffentlichung aus einem Branch. Sie benötigen ein GitHub-Konto und installiertes Git.

### Schritt 1. Repository erstellen

Legen Sie auf GitHub ein neues öffentliches Repository an. Für die persönliche Seite nennen Sie es `username.github.io`, für eine Projektseite wählen Sie einen beliebigen Namen. Klonen Sie es danach und legen Sie die Startseite an:

```
git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "

# Hallo, GitHub Pages

" > index.html
```

Die Startseite heißt zwingend `index.html` (oder `index.md` bzw. `README.md` – auch diese macht GitHub zur Startseite). Die Schreibweise zählt: `Index.html` funktioniert nicht.

### Schritt 2. Dateien auf GitHub hochladen

```
git add index.html
git commit -m "Erste Seite der Website"
git push origin main
```

Fragt Git beim ersten Upload nach Benutzername und Passwort, verwenden Sie einen persönlichen Zugriffstoken oder die Anmeldung über den Browser – das normale Kontopasswort akzeptiert `git push` über HTTPS nicht.

### Schritt 3. Pages in den Einstellungen aktivieren

Öffnen Sie das Repository auf GitHub, wechseln Sie zu Settings und wählen Sie im Seitenmenü Pages. Im Block Build and deployment wählen Sie im Feld Source die Option Deploy from a branch. Darunter geben Sie den Branch (meist `main`) und den Ordner an: das Stammverzeichnis `/ (root)` oder `/docs`. Klicken Sie auf Save.

Der Ordner `/docs` ist praktisch, wenn im Repository der Projektcode liegt und die Dokumentationsseite daneben in einem eigenen Verzeichnis steht.

### Schritt 4. Veröffentlichung abwarten

Die Veröffentlichung dauert zwischen wenigen Sekunden und einigen Minuten; GitHub weist darauf hin, dass die erste bis zu 10 Minuten dauern kann. Den Fortschritt sehen Sie auf dem Reiter Actions: Dort erscheint der Prozess pages build and deployment. Ist er mit einem grünen Haken abgeschlossen, zeigt Settings → Pages die Adresse der Seite an.

Danach ist alles einfach: Sie bearbeiten die Dateien, machen einen Commit und ein `git push` – die Seite aktualisiert sich automatisch.

## Veröffentlichung über GitHub Actions

Die Veröffentlichung aus einem Branch passt, wenn im Repository fertige Dateien liegen. Muss die Seite vorher gebaut werden – etwa bei einer Anwendung mit Vite, React oder einem Generator wie Hugo –, ist die Quelle GitHub Actions bequemer. Wählen Sie unter Settings → Pages im Feld Source die Option GitHub Actions; GitHub bietet dann fertige Vorlagen für Workflows an.

Ein minimaler Workflow für statische Dateien aus dem Ordner `dist` nach dem Build sieht so aus:

```
name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4
```

Die Datei legen Sie unter `.github/workflows/pages.yml` ab. Nach dem `git push` installiert Actions die Abhängigkeiten, baut das Projekt und veröffentlicht den Inhalt von `dist`. Der Vorteil: Im Repository liegt nur der Quellcode, und die gebauten Dateien belasten die Commit-Historie nicht.

Eine typische Falle bei Projektseiten sind die Pfade. Die Seite ist unter `/repository-name/` erreichbar, der Build-Tool verweist standardmäßig aber auf Ressourcen ab der Wurzel `/`. Dann lädt die Seite ohne Styles und Skripte. Abhilfe schafft der Basispfad: in Vite der Parameter `base: '/repository-name/'`, in anderen Build-Tools eine entsprechende Option.

## Jekyll und statische Generatoren

Bei der Veröffentlichung aus einem Branch leitet GitHub die Dateien standardmäßig durch Jekyll, einen statischen Generator auf Ruby-Basis. Sie können daher Seiten in Markdown schreiben, Themes und Vorlagen einbinden, und GitHub macht daraus HTML. Für Blog oder Dokumentation ist das bequem: Sie schreiben `.md`-Dateien, und das Design übernimmt das Theme.

Ein Nebeneffekt: Jekyll ignoriert Dateien und Ordner, deren Name mit einem Unterstrich beginnt, zum Beispiel `_next` oder `_assets`. Wurde die Seite mit einem anderen Werkzeug gebaut und solche Ordner werden gebraucht, legen Sie im Stammverzeichnis eine leere Datei `.nojekyll` an:

```
touch .nojekyll
git add .nojekyll
git commit -m "Jekyll deaktivieren"
git push
```

Andere Generatoren wie Hugo, Astro, Eleventy, MkDocs oder Docusaurus arbeiten über GitHub Actions: Der Build läuft im Workflow, veröffentlicht wird der fertige Ordner. GitHub Pages selbst kennt diese Werkzeuge nicht, es braucht nur die fertigen Dateien.

## Eigene Domain mit GitHub Pages verbinden

Die Adresse `username.github.io` eignet sich für Lernprojekte, für ein Portfolio oder ein Projekt sollten Sie aber eine eigene Domain verwenden. Die Verbindung erfolgt in zwei Richtungen: beim Domain-Anbieter und in den Einstellungen des Repositorys.

### DNS einrichten

Für eine Subdomain wie `www.example.com` oder `blog.example.com` legen Sie einen CNAME-Eintrag an, der auf `username.github.io` zeigt. Für die Hauptdomain `example.com` erstellen Sie A-Einträge mit den IP-Adressen von GitHub Pages:

```
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
```

Die aktuelle Liste der Adressen einschließlich IPv6 für AAAA-Einträge finden Sie in der Dokumentation von GitHub – prüfen Sie sie vor der Einrichtung. Am besten richten Sie sowohl die Hauptdomain als auch `www` ein: Dann leitet GitHub die eine Adresse auf die andere weiter.

### Einstellung im Repository

Tragen Sie unter Settings → Pages im Feld Custom domain die Domain ein und speichern Sie. Bei der Veröffentlichung aus einem Branch legt GitHub im Repository eine Datei `CNAME` mit dem Namen der Domain an. Bei der Veröffentlichung über Actions ist keine Datei `CNAME` nötig, die Domain wird in den Einstellungen gespeichert.

GitHub empfiehlt, die Domain in den Kontoeinstellungen (Bereich Pages in den Profileinstellungen) zu verifizieren. Das schützt davor, dass jemand anderes Ihre Domain mit seinem Repository verbindet, während der DNS-Eintrag noch auf GitHub zeigt. DNS-Änderungen brauchen bis zu einem Tag, bis sie überall wirken. Funktioniert die Domain nicht sofort, warten Sie also ab.

## HTTPS bei GitHub Pages

Für Adressen der Form `*.github.io` ist HTTPS immer aktiv. Für Ihre eigene Domain stellt GitHub selbst ein Let's-Encrypt-Zertifikat aus, sobald der DNS richtig eingerichtet ist. Danach erscheint in Settings → Pages das Kontrollkästchen Enforce HTTPS – aktivieren Sie es, damit alle HTTP-Anfragen auf HTTPS umgeleitet werden.

Ist das Kästchen inaktiv, ist das Zertifikat noch nicht ausgestellt: Prüfen Sie die DNS-Einträge und warten Sie. Manchmal hilft es, die Domain aus dem Feld Custom domain zu entfernen und erneut einzutragen – so wird die Ausstellung neu gestartet. Prüfen Sie außerdem, dass die Seite Bilder und Skripte nicht über `http://` lädt: Der Browser blockiert solche Ressourcen als gemischte Inhalte.

## Grenzen von GitHub Pages

Das Hosting ist kostenlos, hat aber Grenzen. Sie sind in der Dokumentation von GitHub beschrieben, und für die meisten privaten und Lernseiten reichen sie bei Weitem.

| Grenze | Wert |
| --- | --- |

| Inhalt | nur statische Dateien, kein serverseitiger Code und keine Datenbanken |

| Größe der veröffentlichten Seite | bis 1 GB |

| Empfohlene Größe des Repositorys | bis 1 GB |

| Traffic | weiche Grenze von 100 GB pro Monat |

| Builds aus einem Branch | weiche Grenze von 10 pro Stunde (für Actions nicht relevant) |

| Dauer der Veröffentlichung | Deployment länger als 10 Minuten wird abgebrochen |

Neben den technischen Grenzen gelten Nutzungsregeln: GitHub Pages ist nicht für kommerzielle Dienste wie Online-Shops oder SaaS gedacht und auch nicht für die Verteilung großer Dateien. Für Portfolios, Dokumentation, Blogs und Landingpages von Projekten ist es ideal.

Eine weitere Grenze: Serverseitige Einstellungen gibt es nicht. Eigene Weiterleitungen, Antwort-Header oder Regeln wie in einer `.htaccess` sind nicht möglich. Sie können lediglich eine eigene Seite `404.html` im Stammverzeichnis ablegen; GitHub zeigt sie bei nicht vorhandenen Adressen an.

## Typische Probleme und ihre Lösung

### 404-Fehler auf GitHub Pages

Die häufigste Ursache: Im Ordner, der als Quelle gewählt ist, fehlt die Datei `index.html`. Prüfen Sie, ob Sie den richtigen Branch und Ordner (`/ (root)` oder `/docs`) gewählt haben und ob die Datei exakt `index.html` in Kleinbuchstaben heißt. Zweite Ursache: Die Seite ist noch nicht veröffentlicht – sehen Sie auf dem Reiter Actions nach und warten Sie das Ende des Builds ab.

Erscheint der 404-Fehler auf inneren Seiten einer Single-Page-Anwendung beim Neuladen, liegt es am Routing: Der Server kennt die Adresse `/about` nicht, weil es die Datei nicht gibt. Umgehen lässt sich das mit Hash-Routing (`/#/about`) oder mit einer Kopie der `index.html` unter dem Namen `404.html`.

### Die Seite aktualisiert sich nicht

Prüfen Sie zuerst, ob die Änderungen wirklich bei GitHub angekommen sind: Führen Sie `git status` und `git log origin/main --oneline -3` aus. Öffnen Sie dann den Reiter Actions: Ist der Build fehlgeschlagen, sehen Sie ein rotes Kreuz und ein Protokoll mit dem Fehler – etwa einen Syntaxfehler in einer Jekyll-Datei oder einen Fehler im Workflow.

Ist der Build erfolgreich, zeigt der Browser aber eine alte Version, ist der Cache schuld. GitHub Pages speichert Dateien einige Minuten zwischen, dazu kommt der Cache des Browsers. Laden Sie die Seite mit geleertem Cache neu (Strg+F5 oder Cmd+Umschalt+R) oder öffnen Sie sie in einem privaten Fenster.

### Styles und Bilder werden nicht geladen

Fast immer sind die Pfade falsch. Auf einer Projektseite führt der Link `/style.css` in die Wurzel von `username.github.io` statt in den Ordner des Repositorys. Verwenden Sie relative Pfade (`style.css`, `./img/logo.png`) oder legen Sie den Basispfad im Build-Tool fest. Achten Sie auch auf die Schreibweise: Die Server von GitHub unterscheiden `Logo.PNG` und `logo.png`, auch wenn es lokal unter Windows funktioniert hat.

### Ordner mit Unterstrich fehlen

Das ist Jekyll: Es veröffentlicht keine Verzeichnisse wie `_app`. Legen Sie im Stammverzeichnis die Datei `.nojekyll` an oder wechseln Sie zur Veröffentlichung über GitHub Actions.

## Fazit

GitHub Pages ist der schnellste Weg, eine statische Website kostenlos online zu stellen: Repository, Datei `index.html`, Quelle unter Settings → Pages – und nach wenigen Minuten ist die Seite unter `username.github.io` erreichbar. Für Websites mit Build-Schritt nutzen Sie GitHub Actions, für eine eigene Domain die DNS-Einträge und das Kontrollkästchen Enforce HTTPS. Beachten Sie die Grenzen: nur statische Inhalte, ohne serverseitigen Code, mit Limits für Größe und Traffic. Die Arbeit mit GitHub, das Hochladen von Änderungen und die Automatisierung werden im Git-Kurs praktisch durchgearbeitet.

## FAQ

**Ist GitHub Pages wirklich kostenlos?**

Ja, für öffentliche Repositorys im kostenlosen Tarif kostet GitHub Pages nichts, einschließlich HTTPS und einer eigenen Domain. Bezahlen müssen Sie nur die Domain beim Anbieter und gegebenenfalls einen kostenpflichtigen Tarif von GitHub, wenn Sie aus einem privaten Repository veröffentlichen möchten.

**Kann man eine Website mit PHP oder WordPress auf GitHub Pages betreiben?**

Nein, GitHub Pages liefert nur statische Dateien und führt keinen serverseitigen Code aus. Eine WordPress-Seite lässt sich mit speziellen Plugins in statisches HTML exportieren, Formulare, Kommentare und das Admin-Panel funktionieren dann aber nicht mehr.

**Wie viele Websites kann man bei GitHub Pages anlegen?**

Eine Benutzerseite unter username.github.io und unbegrenzt viele Projektseiten, jeweils eine pro Repository.

**Indexieren Suchmaschinen Websites auf GitHub Pages?**

Ja, solche Seiten werden wie andere Websites indexiert. Für eine bessere Indexierung legen Sie die Dateien sitemap.xml und robots.txt im Stammverzeichnis ab und bestätigen die Website in den Webmaster-Tools der Suchmaschinen.

**Wie entferne ich eine Website von GitHub Pages?**

Klicken Sie unter Settings → Pages auf Unpublish site, sofern die Schaltfläche verfügbar ist, oder wählen Sie im Feld Source für den Branch den Wert None. Das Löschen des Repositorys entfernt die Seite ebenfalls.


---
Source: Skillaria.Top (https://skillaria.top)