GitHub Pages – 3 Wege zur eigenen Website

Die drei Wege im Detail

Jeder Weg wird Schritt für Schritt erklärt – mit Beispielen, die du direkt nachmachen kannst.

📝

Weg 1: Markdown

Einfacher Text wird automatisch zur Website

Schwierigkeit

Was ist das? Du schreibst ganz normalen Text mit ein paar einfachen Zeichen für Überschriften, fetten Text und Links. GitHub verwandelt das automatisch in eine hübsche Webseite – du brauchst keinerlei Programmierkenntnisse. Ideal für Dokumentationen, Blogs, persönliche Seiten oder Projektbeschreibungen.

Repository auf GitHub erstellen

Gehe auf github.com, klicke oben rechts auf «+» → «New repository». Gib einen Namen ein (z.B. meine-seite), wähle Public und aktiviere «Add a README file». Klicke auf «Create repository».

Repo name:

Visibility:

Initialize:

Create repository

Markdown-Datei erstellen

Im Repository klickst du auf «Add file» → «Create new file». Nenne die Datei index.md. Das ist deine Startseite. Schreibe deinen Inhalt mit Markdown-Formatierung:

index.md

# Willkommen auf meiner Seite

Das ist meine erste Website auf GitHub Pages! 🎉

## Über mich

Ich heisse Stefan und arbeite als **Product Owner**.
In meiner Freizeit fotografiere ich gerne.

## Meine Projekte

- [Projekt A](https://example.com)
- [Projekt B](https://example.com)

![Mein Foto](bild.jpg)

Unten auf der Seite klickst du dann «Commit changes», um die Datei zu speichern.

💾 Was passiert bei «Commit changes»? →

GitHub Pages aktivieren

Gehe zu Settings → Pages (linke Seitenleiste). Wähle bei «Source» den Branch main und den Ordner / (root). Klicke auf Save. Nach 1–2 Minuten ist deine Seite live!

Source:

Branch:

Save

Optional: Theme wählen mit _config.yml

Erstelle eine Datei _config.yml im Repository, um ein schönes Design zu aktivieren – ohne eine Zeile CSS zu schreiben:

_config.yml

theme: minima
title: Meine Website
description: Meine persönliche Seite

🌐

Weg 2: HTML-Datei

Fertige Webseite direkt hochladen

Schwierigkeit

Was ist das? Du hast eine fertige HTML-Datei (z.B. selbst erstellt, von einem Tool generiert, oder von Claude erstellt). Du lädst diese Datei einfach auf GitHub hoch – und sie wird genau so angezeigt, wie sie ist. Du hast volle Kontrolle über das Design. Kein automatischer Build nötig.

Repository erstellen

Wie bei Weg 1: Neues Repository auf GitHub erstellen. Name frei wählbar, z.B. portfolio. Public wählen.

HTML-Datei hochladen

Klicke auf «Add file» → «Upload files». Lade deine index.html hoch (plus allfällige CSS, JS, Bilddateien). Dann auf «Commit changes» klicken.

💾 Was passiert bei «Commit changes»? →

index.html – Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Mein Portfolio</title>
  <style>
    body { font-family: sans-serif; max-width: 800px; margin: 0 auto; }
    h1 { color: #2d5be3; }
  </style>
</head>
<body>
  <h1>Willkommen!</h1>
  <p>Das ist meine Website.</p>
  <img src="foto.jpg" alt="Mein Bild">
</body>
</html>

GitHub Pages aktivieren

Gleich wie bei Weg 1: Settings → Pages → Branch: main, Ordner: / (root) → Save. Die Seite wird direkt so angezeigt, wie dein HTML aussieht.

Änderungen machen

Jedes Mal, wenn du eine Datei im Repository änderst oder neu hochlädst, wird die Seite automatisch nach 1–2 Minuten aktualisiert. Keine weiteren Schritte nötig.

⚡

Weg 3: Lovable / Vite / React

App-Projekte automatisch bauen und veröffentlichen

Schwierigkeit

Was ist das? Lovable erstellt ein vollständiges App-Projekt (React + Vite). Dieses kann nicht einfach als HTML hochgeladen werden – es muss zuerst «gebaut» werden. Ein GitHub Actions Workflow erledigt das automatisch: bei jedem Push wird die App kompiliert und das Ergebnis veröffentlicht. Klingt kompliziert, ist aber einmal eingerichtet ein Selbstläufer.

Lovable verbindet sich mit GitHub

Lovable erstellt automatisch ein GitHub-Repository, wenn du dein Projekt mit GitHub verbindest (Button «GitHub» in Lovable). Das Repo enthält den gesamten Quellcode deines Projekts.

Pages-Quelle auf «GitHub Actions» stellen

Im Repository: Settings → Pages. Wichtig: Wähle hier nicht «Deploy from a branch», sondern «GitHub Actions» als Source. Das ist der Unterschied zu Weg 1 und 2!

Source:

⚠️ Nicht «Deploy from a branch» – die App muss zuerst gebaut werden!

Workflow-Datei erstellen

Erstelle im Repository die Datei .github/workflows/deploy.yml. Das ist das «Rezept», das GitHub sagt, wie die App gebaut werden soll. Klicke auf «Add file» → «Create new file» und gib den Pfad ein:

.github/workflows/deploy.yml

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]

permissions: # Rechte für den Workflow
  contents: read
  pages: write
  id-token: write

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
    steps:
      - uses: actions/checkout@v4 # Code holen
      - uses: actions/setup-node@v4 # Node.js bereitstellen
        with: { node-version: 20 }
      - run: npm ci # Pakete installieren
      - run: npm run build # App bauen → dist/
      - uses: actions/upload-pages-artifact@v3
        with: { path: dist } # Ergebnis hochladen
      - uses: actions/deploy-pages@v4 # Veröffentlichen

Base-Path in vite.config.ts setzen

Damit Bilder, CSS und JavaScript auf der veröffentlichten Seite gefunden werden, muss der Repository-Name als Basispfad gesetzt werden. Öffne vite.config.ts und ergänze die base-Zeile:

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
base: '/mein-repo-name/', // ← Dein Repo-Name!
plugins: [react()],
})

Pushen und warten

Sobald du die Dateien committet hast, startet der Workflow automatisch. Unter dem Tab «Actions» im Repository kannst du den Fortschritt beobachten. Nach 2–3 Minuten ist die Seite live. Jeder neue Push startet einen neuen Build.

💾 Was genau passiert nach dem Commit? →

↑ Nach oben

	📝 Markdown	🌐 HTML	⚡ Lovable / Vite
Vorkenntnisse	Keine	Grundlegendes HTML	Keine (Lovable generiert)
Design-Freiheit	Begrenzt (Themes)	Volle Kontrolle	Volle Kontrolle
Build nötig?	Nein (Jekyll automatisch)	Nein	Ja (GitHub Actions)
Pages-Quelle	Branch: main	Branch: main	GitHub Actions
Interaktivität	Nur Text & Bilder	HTML + JS möglich	Volle App-Funktionalität
Ideal für	Doku, Blog, Portfolio	Statische Webseiten	Web-Apps, Dashboards
Einrichtung	~5 Minuten	~5 Minuten	~15 Minuten

📝 Markdown

🌐 HTML

⚡ Lovable / Vite

Vorkenntnisse

Keine

Grundlegendes HTML

Keine (Lovable generiert)

Design-Freiheit

Begrenzt (Themes)

Volle Kontrolle

Build nötig?

Nein (Jekyll automatisch)

Nein

Ja (GitHub Actions)

Pages-Quelle

Branch: main

GitHub Actions

Interaktivität

Nur Text & Bilder

HTML + JS möglich

Volle App-Funktionalität

Ideal für

Doku, Blog, Portfolio

Statische Webseiten

Web-Apps, Dashboards

Einrichtung

~5 Minuten

~15 Minuten

Commit = Speichern + Protokollieren

Was passiert in welcher Reihenfolge?

1. Snapshot erstellen

2. Logbuch-Eintrag schreiben

3. Auf den Server schreiben (Push)

4. GitHub Pages reagiert

So sieht der Ablauf aus – der Commit ist das Bindeglied

📍 Wo und wann klickst du «Commit Changes»?

Was passiert danach? Der «pages-build-deployment» Workflow

1. Dateien einsammeln

2. Prüfen & Bauen

3. Artefakt erstellen

4. Auf CDN verteilen

Weg 1: Markdown

Repository auf GitHub erstellen

Markdown-Datei erstellen

GitHub Pages aktivieren

Optional: Theme wählen mit _config.yml

Weg 2: HTML-Datei

Repository erstellen

HTML-Datei hochladen

GitHub Pages aktivieren

Änderungen machen

Weg 3: Lovable / Vite / React

Lovable verbindet sich mit GitHub

Pages-Quelle auf «GitHub Actions» stellen

Workflow-Datei erstellen

Base-Path in vite.config.ts setzen

Pushen und warten

📝 Weg 1: Markdown Automatisch via Jekyll

🌐 Weg 2: HTML Direkte Auslieferung

⚡ Weg 3: Lovable / Vite GitHub Actions Build

Startseite muss index heissen

Geduld nach dem Push

Public vs. Private

Base-Path bei Vite nicht vergessen

Custom Domain möglich

Keine Datenbank möglich

Reine HTML-Seite

HTML mit externen Diensten