🛠️ Apps entwickeln › Mit GitHub Pages veröffentlichen

Mit GitHub Pages veröffentlichen

Digitales Pausenbrot · 16. April 2026

Eigene HTML-Lernapps gratis und dauerhaft hosten — komplett ohne Terminal

1 Warum GitHub Pages? Abgrenzung zu Lerndrop.ch ▾

Lerndrop.ch ist perfekt für den schnellen Share einer einzelnen App. Aber sobald du über das Schuljahr mehrere Apps baust und ordnest, lohnt sich eine eigene, dauerhafte Adresse. Genau dafür ist GitHub Pages gedacht.

Kurzvergleich

  • Lerndrop.ch: eine Datei, eine kurze URL, anonym, ohne Konto. Ideal für den Moment.
  • GitHub Pages: deine eigene URL (username.github.io), beliebig viele Apps, versioniert, gratis. Ideal für eine ganze App-Bibliothek.

Was ist GitHub?

Stell dir GitHub wie eine Dropbox für Code mit eingebautem Webserver vor. Du lädst HTML-Dateien hoch — GitHub macht daraus automatisch eine Website. Ursprünglich für Programmierer:innen gebaut, aber die Web-Oberfläche ist heute so einfach, dass du kein einziges technisches Tool installieren musst.

Was kostet das?

Für Unterrichtszwecke ist GitHub Pages vollständig kostenlos. Die einzige Bedingung: dein Repository (so heisst der Ordner auf GitHub) muss öffentlich sein. Das bedeutet: Jeder, der die Adresse kennt, kann die Dateien sehen. Für Lern-Apps ist das kein Problem — du lädst ja sowieso nur Inhalte hoch, die du teilen willst.

Wann welches Tool?

  • Eine Stunde vorbereiten, App nächste Woche weg: Lerndrop.ch.
  • App-Sammlung fürs ganze Schuljahr: GitHub Pages.
  • Gemeinsame Link-Liste für alle Klassen: GitHub Pages.
Screenshot: Split-Vergleich Lerndrop.ch (links) und GitHub Pages (rechts), jeweils Startseite
GitHub Pages zeigt niemals, wer die Datei erstellt hat — aber das Repository ist standardmässig öffentlich. Lade also nie personenbezogene Schüler:innen-Daten hoch.
2 Kostenlos anmelden und erstes Repository erstellen ▾

Schritt 1: Konto erstellen

Gehe auf github.com und klicke oben rechts auf «Sign up». Du brauchst nur eine E-Mail-Adresse und einen Usernamen. Wähle den Usernamen sorgfältig — er wird Teil deiner späteren URL und lässt sich nur schwer ändern. Etwas wie m-mueller-sek oder frau-schmid eignet sich besser als xXCoolLehrerXx.

Schritt 2: E-Mail bestätigen und Free-Plan wählen

GitHub schickt dir eine Bestätigungsmail. Nach dem Klick auf den Link wirst du durch ein kurzes Setup geführt — wähle immer den kostenlosen Plan.

Schritt 3: Repository anlegen

Nach dem Login klickst du oben rechts auf das «+» und wählst «New repository». Die wichtigen Felder:

  • Repository name: exakt username.github.io (ersetze username durch deinen eigenen). Dieser Spezialname schaltet GitHub Pages automatisch frei und macht deine Website sofort unter https://username.github.io erreichbar.
  • Public/Private: Public wählen — Private wäre für Pages kostenpflichtig.
  • «Add a README file»: Haken setzen. Das ist eine leere Startdatei, die du später überschreibst.

Unten auf «Create repository» klicken — fertig.

Screenshot: GitHub «Create repository»-Dialog mit dem Feld username.github.io ausgefüllt
Der Username wird Teil deiner URL. Verwende keine Aliasse, Schimpfwörter oder Privatwitze — du bekommst diese Adresse später Schüler:innen und Eltern in die Hand.
3 HTML-Datei hochladen (Drag & Drop) ▾

Du bist im frisch erstellten Repository. Jetzt kommt deine HTML-App rein — zum Beispiel die Quiz-App aus dem Claude- oder ChatGPT-Tutorial.

Schritt 1: Upload öffnen

Klicke auf «Add file» (oberhalb der Dateiliste) → «Upload files».

Schritt 2: Datei reinziehen

Ziehe deine HTML-Datei per Drag & Drop in den grossen gestrichelten Bereich. Alternativ: «choose your files» und Datei auswählen.

Schritt 3: WICHTIG — Dateiname

Damit die App beim Aufruf deiner URL automatisch startet, muss die Startdatei exakt index.html heissen. Falls deine Datei anders heisst (z.B. quiz-fotosynthese.html), benenne sie vor dem Upload um — oder direkt auf GitHub nach dem Upload: Datei anklicken → Stift-Icon → oben den Namen ändern.

Schritt 4: Commit

«Commit» ist das GitHub-Wort für «Änderungen speichern». Unten im Feld «Commit changes» eine kurze Beschreibung eingeben (z.B. «Erste Lernapp hochgeladen») → auf den grünen «Commit changes»-Button klicken.

Schritt 5: Warten und testen

Nach 30–60 Sekunden ist deine App live unter https://username.github.io. Öffne die URL in einem neuen Tab und prüfe, ob die App korrekt funktioniert.

Screenshot: Drag-&-Drop-Upload-Bereich im Repository, index.html bereits sichtbar in der Dateiliste
Für eine ganze App-Sammlung: Unterordner anlegen. Unterordner entstehen, indem du beim Upload oder Umbenennen den Pfad mit Schrägstrich eingibst: quiz-fotosynthese/index.html. Die Datei wird dann automatisch unter username.github.io/quiz-fotosynthese/ erreichbar. So entsteht aus einem Repository deine eigene App-Bibliothek.
4 App aktualisieren und mit Schüler:innen teilen ▾

Deine App ist online. Jetzt geht es um den Alltag: Inhalte korrigieren, neue Apps ergänzen, den Link in die Klasse bringen.

Eine Datei direkt im Browser bearbeiten

Repository öffnen → Datei anklicken → Stift-Icon oben rechts → Änderungen eintippen → unten «Commit changes». Die Website aktualisiert sich nach ein paar Sekunden automatisch.

Eine ganze Datei ersetzen

«Add file» → «Upload files» → gleiche Datei erneut hochladen. GitHub überschreibt die alte Version automatisch.

Mit der Klasse teilen

Deine URL (https://username.github.io oder username.github.io/ordnername/) ist die finale Adresse. Für den Klassenraum ist ein QR-Code am schnellsten — den Workflow dazu kennst du bereits aus dem vorherigen Tutorial (Lerndrop → Schritt 3): Claude oder ChatGPT bitten, einen QR-Code für deine URL zu generieren, ausdrucken, aufhängen.

Organisation für den Schulalltag

  • Ein Repository für alle Apps — nicht für jedes Quiz ein neues Konto.
  • Ordner pro Fach oder pro Klasse (/7a-deutsch/, /8b-mathe/).
  • Eine zentrale index.html als Inhaltsverzeichnis — eine einfache Liste mit Links zu allen Apps. So genügt ein einziger Link fürs ganze Schuljahr.
📋 In meiner Klasse habe ich alle Quiz-Apps in einem einzigen Repository gesammelt, gruppiert in Ordnern nach Fach und Thema. Die Start-index.html ist eine schlichte Linkliste — ein einziger QR-Code an der Pinnwand führt zu allen Apps des Schuljahrs.
GitHub-Pages-Checkliste (A4, zum Ausdrucken)

Quiz

1. Welchen Namen muss das Repository haben, damit deine Pages-URL automatisch <code>username.github.io</code> wird?

  1. mein-repo
  2. username.github.io
  3. pages-repo
  4. www.github
Lösung anzeigen

Richtige Antwort: b) — Der Spezialname <code>username.github.io</code> (mit deinem eigenen Usernamen) schaltet GitHub Pages automatisch frei und ergibt die kürzeste, sauberste URL.

2. Welchen Dateinamen muss die Startseite deiner App zwingend haben?

  1. Beliebig
  2. index.html
  3. start.html
  4. home.html
Lösung anzeigen

Richtige Antwort: b) — Nur <code>index.html</code> wird automatisch aufgerufen, wenn jemand deine URL ohne konkreten Dateinamen besucht. Alles andere zeigt nur eine Dateiliste.

3. Was kostet GitHub Pages für den Unterrichtseinsatz?

  1. Gratis, solange das Repository öffentlich ist
  2. Ab CHF 5 pro Monat
  3. Nur für Schulen mit Lizenz kostenlos
  4. Einmalige Lizenzgebühr
Lösung anzeigen

Richtige Antwort: a) — Bei öffentlichen Repositories ist GitHub Pages komplett kostenlos — ohne Laufzeit- oder Traffic-Limit im Schulumfeld.