Vorwort
Nachdem Sie mit KI-Tools wie ChatGPT, Canva, Gemini Canvas, Claude Artifacts oder Sider Web Creator eine Website erstellt haben, stellt sich die nächste große Frage: Wie hostet man die Website auf GitHub Pages, sodass man sie über die eigene Domain besuchen kann? Diese Anleitung führt Sie Schritt für Schritt durch den Prozess – vom Exportieren eines Projekts in Sider Web Creator bis hin zu einer vollwertigen Website unter Ihrer persönlichen Domain – und entmystifiziert dabei sowohl das Webhosting als auch die GitHub Pages-Konfiguration.
🎯 Was Sie lernen werden
Wie Sie die KI-generierten Projektdateien korrekt herunterladen und verstehen, bevor Sie einen GitHub Pages-Webhosting-Workflow auswählen.
Schritt-für-Schritt-Anleitungen, um die Website kostenlos auf GitHub Pages bereitzustellen.
Wie Sie Ihre eigene benutzerdefinierte Domain kaufen und innerhalb der GitHub Pages-Einstellungen verknüpfen und sie mit Best-Practice-DNS-Einträgen verbinden.
Profi-Tipps, um die Website vollständig professionell und vertrauenswürdig aussehen zu lassen, sobald das GitHub Pages-Setup live ist.
📥 Schritt 1: Laden Sie Ihre Website von Sider Web Creator herunter
Die meisten Static-Hosting-Plattformen – einschließlich GitHub Pages – erwarten einen sauberen Build-Ordner, daher müssen Sie zuerst Ihre Dateien sammeln.
1.1 Laden Sie die Projektdateien herunter
Nachdem Web Creator die Generierung der Website abgeschlossen hat, klicken Sie auf die Schaltfläche Download in der oberen rechten Ecke.
Warten Sie, während das System Ihr Projekt verpackt.
Sie erhalten eine .zip-Datei, die zum Hochladen auf GitHub Pages bereit ist.
Extrahieren Sie die Zip-Datei an einem beliebigen Ort auf Ihrem Computer.
1.2 Verstehen Sie die Dateistruktur (Wichtig!)
my‑website/
├── dist/ ⭐ Produktionsbuild für **GitHub Pages**
│ ├── index.html → Startseite
│ ├── assets/ → Styles & Scripts
│ └── …
├── src/ 📝 Quellcode-Ordner
├── package.json 📦 Projektkonfiguration
└── …andere Dateien
Wichtiger Hinweis: Nur der Inhalt innerhalb von dist/ wird auf GitHub Pages veröffentlicht.
1.3 Lokaler Vorschau-Test
Gehen Sie in den Ordner dist/.
Doppelklicken Sie auf index.html.
Die Website wird in Ihrem Browser geöffnet.
Überprüfen Sie, ob alles funktioniert, bevor Sie es auf GitHub Pages hochladen.
🚀 Schritt 2: Wählen Sie eine Bereitstellungsplattform
Während GitHub Pages der Held dieser Anleitung ist, hier ein kurzer Vergleich:
| |
|---|
🌟 GitHub Pages (Fokus dieser Anleitung) | Völlig kostenlos • Drag-and-Drop- oder git push-Bereitstellung • Kostenloses HTTPS • Globales CDN • Benutzerdefinierte Domains • Native CI mit GitHub Actions |
| Globales Edge-Netzwerk • 100 % kostenlos • Blitzschnell |
| Polierte Benutzeroberfläche • Funktionsreich |
📤 Schritt 3: Bereitstellung auf GitHub Pages (Detaillierte Anleitung)
Obwohl GitHub Pages in einer Entwicklerplattform angesiedelt ist, betrachten Sie es als hochmodernes Webhosting mit Push-Button-Komfort.
3.1 Anmelden und ein Repository erstellen
Besuchen Sie github.com und melden Sie sich an.
Klicken Sie auf + Neues Repository.
Nennen Sie es my‑website und wählen Sie Öffentlich (oder Privat, wenn Sie einen kostenpflichtigen Plan haben; GitHub Pages unterstützt jetzt private Repos).
Lassen Sie Mit README initialisieren deaktiviert, wenn Sie später pushen möchten.
3.2 Fügen Sie Ihre Site-Dateien hinzu
Methode A: Drag-and-Drop-Upload (am besten für Anfänger)
Klicken Sie im Code-Tab des Repos auf Datei hinzufügen → Dateien hochladen.
Legen Sie alles in dist/ ab.
Scrollen Sie nach unten und klicken Sie auf Änderungen übernehmen.
Methode B: Git CLI (am besten für Entwickler)
# Leeres Repo klonen
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Build-Ausgabe kopieren
cp -r /path/to/dist/* .
# Commit & Push
git add .
git commit -m "Initial **GitHub Pages** deploy"
git push origin main
Beide Wege führen zu statischen Dateien im Repo-Root – perfekt für GitHub Pages.
3.3 Aktivieren Sie GitHub Pages
Gehen Sie zu Einstellungen → Pages.
Wählen Sie unter Quelle Von einem Branch bereitstellen → main (/root).
Klicken Sie auf Speichern. GitHub Pages erstellt in ~30 s und gibt eine URL wie https://<user>.github.io/my‑website/ zurück.
3.4 Holen Sie sich Ihre Standard-URL
Besuchen Sie den Link, um zu bestätigen, dass alles geladen wird. GitHub Pages wird automatisch über ein globales CDN bereitgestellt.
🌐 Schritt 4: Kaufen und Binden Sie Ihre eigene Domain
4.1 Kaufen Sie eine Domain
Empfohlene Registrare (alle funktionieren gut mit GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Wählen Sie nach Möglichkeit eine kurze .com-Domain.
4.2 Fügen Sie die Domain in GitHub Pages hinzu
Suchen Sie weiterhin unter Einstellungen → Pages nach Benutzerdefinierte Domain.
Geben Sie mywebsite.com oder www.mywebsite.com ein.
Klicken Sie auf Speichern. GitHub Pages schreibt automatisch eine CNAME-Datei.
4.3 Konfigurieren Sie DNS-Einträge
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Warten Sie 10 Min.–24 h auf die Propagation. Diese IPs sind für GitHub Pages konstant. |
4.4 Erzwingen Sie HTTPS
Nachdem sich DNS verbreitet hat, aktualisieren Sie die Pages-Einstellungen und aktivieren Sie HTTPS erzwingen. Let’s Encrypt-Zertifikate werden automatisch ausgestellt.
✨ Schritt 5: Lassen Sie die Website professionell aussehen
5.1 Fügen Sie ein benutzerdefiniertes Favicon hinzu
Bereiten Sie ein 32×32 px großes Symbol mit dem Namen favicon.ico vor.
Platzieren Sie es im Repo-Root.
Commit und Push; GitHub Pages stellt es sofort bereit.
5.2 Fügen Sie benutzerdefinierte Meta-Informationen ein
Bearbeiten Sie index.html im Repo-Root:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analytics (optional)
Fügen Sie GA / Plausible-Snippets in <head> ein; GitHub Pages berücksichtigt Caching-Header.
🔧 Fehlerbehebung
Leere Seite? Bestätigen Sie, dass sich index.html im Repo-Root befindet und die Asset-Pfade relativ sind.
Domain leitet zu .github.io weiter? Überprüfen Sie die A/CNAME-Einträge und warten Sie die vollständige TTL ab.
HTTPS-Umschalter deaktiviert? DNS ist noch nicht korrekt; überprüfen Sie dies mit dig.
🎉 Zusammenfassung
Herzlichen Glückwunsch! Sie haben jetzt:
✅ Ihre KI-generierte Website erfolgreich heruntergeladen und für das GitHub Pages-Hosting vorbereitet.
✅ Sie kostenlos auf GitHub Pages bereitgestellt.
✅ Ihre eigene benutzerdefinierte Domain gesichert.
✅ Die GitHub Pages-Umgebung so optimiert, dass sie vollständig professionell aussieht.
Ihre Website ist jetzt:
🌐 Online rund um die Uhr, unterstützt durch das GitHub Pages CDN.
🏷️ Unter einer professionellen Domain bereitgestellt.
🔒 Durch HTTPS-Verschlüsselung geschützt.
⚡ Dank der GitHub Pages Edge-Nodes weltweit schnell.
🗝️ Vollständig in Ihrem Besitz und unter Ihrer Kontrolle.
💡 Nächste Schritte
SEO-Optimierung: Fügen Sie gezielte Schlüsselwörter und Meta-Beschreibungen hinzu, um das Suchranking für Ihr GitHub Pages-Setup zu verbessern.
Social Sharing: Integrieren Sie Share-Buttons für wichtige Plattformen.
Kontinuierliche Updates: Committen Sie Änderungen regelmäßig; GitHub Pages stellt automatisch neu bereit.
Backups: Aktivieren Sie den GitHub Repository-Schutz oder spiegeln Sie das Repo.
Sie sind jetzt ein echter Website-Besitzer – teilen Sie Ihren GitHub Pages-Link und zeigen Sie der Welt Ihre Kreation!
