Wie deploye ich eine App auf GitHub Pages?

Grundsätzlich ist das richtig, aber ich möchte ein Detail hinzufügen, das mir beim Deployment sehr geholfen hat, als ich anfing. Wie gesagt ist die Basis richtig, aber es hängt sehr davon ab, was du deployest. Wenn es eine einfache statische Website ist, so etwas wie HTML, CSS und reines JavaScript, dann musst du buchstäblich nur den Code pushen und Pages in den Einstellungen aktivieren - du wählst aus, ob du von der main-Branch und dem Root-Ordner lesen möchtest oder von einem /docs-Ordner. Fertig.

Aber wenn du React oder Vue verwendest, wird die Sache ein bisschen komplizierter. Du musst das Paket `gh-pages` mit npm installieren, dann `package.json` konfigurieren und `"homepage": "https://deinbenutzername.github.io/repo-name"` hinzufügen (wichtig, den Repo-Namen einzutragen, wenn es nicht deine Hauptwebsite ist). Danach fügst du die Build- und Deploy-Skripte hinzu, so etwas wie `"deploy": "npm run build && gh-pages -d build"` für React. Wenn du `npm run deploy` ausführst, kompiliert das Tool alles und pushed den build-Ordner automatisch auf die `gh-pages`-Branch. In den Einstellungen aktivierst du Pages auf dieser Branch und dann bist du fertig.

Noch etwas, das ich bei verschiedenen Versuchen gelernt habe: Falls Assets oder Bilder nicht laden, ist oft ein Problem mit relativen Pfaden schuld. Überprüf genau, dass die Bilder in deinem Code korrekt verlinkt sind. Und wenn du einen Router nutzt (wie React Router), musst du ihn mit `basename` für den Repo-Namen konfigurieren.

Genau, das was sie gesagt haben stimmt. Ich würde nur noch hinzufügen, dass du bei einer einfachen statischen Website (html, css, js) eigentlich gar nichts Besonderes machen musst, du brauchst nur ein öffentliches Repo und musst Pages in den Einstellungen aktivieren, auf den Branch zeigend, den du willst, normalerweise main.

Bei React und ähnlichem musst du `gh-pages` installieren und die richtigen Scripts in die package.json packen wie `"deploy": "gh-pages -d build"`, und wenn du dann `npm run deploy` ausführst, lädt es alles automatisch hoch.

Eine Sache, die keiner sagt, aber echt hilfreich ist: Wenn dein Projekt nicht im Root des Repos liegt, musst du in den GitHub-Pages-Einstellungen den richtigen Ordner angeben (wähle "Deploy from a branch" und selektiere dann den Ordner `/docs` oder `/dist`, je nachdem wo dein Build landet).

Das habe ich am eigenen Leib erfahren, als ich eine Website neben anderen Projekten im selben Repo deployed habe und dann mit einer leeren Seite dastanden bin.

Ach, und ein Trick, den ich oft nutze: Erstell dir einen einfachen GitHub-Actions-Workflow, der automatisch buildet, wenn du pushst. So musst du nicht manuell `npm run build` machen und dann den kompilierten Ordner committen - lass GitHub das für dich machen und das ganze Management wird viel sauberer.

Das Wichtigste ist zu verstehen, dass GitHub Pages erfordert, dass du auswählst, welcher Ordner als Root des Webauftritts dienen soll - und 90 % der Probleme entstehen genau da. Das ist nicht intuitiv: viele laden das gesamte Repository hoch und fragen sich dann, warum nichts angezeigt wird. Als ich mein erstes Projekt mit Vite online gestellt habe, habe ich Stunden verloren, weil die Datei index.html im Ordner dist war, aber GitHub Pages in der Root gesucht hat.

Das würde ich machen: Erstelle das Repository, pushe deinen Code, dann geh zu Settings > Pages. Dort wählst du den Branch aus (normalerweise main) und spezifizierst genau den Ordner, in dem die Dateien sind, die du servieren möchtest (in den meisten Fällen ist das / für die Root oder /docs bzw. /dist, wenn du einen Bundler nutzt). Wenn du React, Vue oder ähnliches verwendest, musst du zuerst lokal den Build starten, um die finalen statischen Dateien zu generieren, diese Dateien committen und erst dann auf Pages aktivieren.

Ein Detail, das mir später geholfen hat: Wenn du willst, dass der Deploy automatisch erfolgt, jedes Mal wenn du pushst, kannst du eine GitHub Action verwenden. Das ist fortgeschrittener, aber du sparst dir, den Build jedes Mal manuell zu machen. Am Anfang habe ich alles von Hand gemacht und bin ab und zu vergessen, den Build zu committen. Jetzt nutze ich ein einfaches Skript, das das für mich erledigt, und ich denke nicht mehr darüber nach.