Wie deploye ich eine App auf GitHub Pages?

Im Grunde erstellst du ein Repo auf GitHub, pusht deinen Code und wenn du ein Framework wie React oder Vue verwendest, konfigurierst du das Build-Script in der package.json. Dann aktivierst du GitHub Pages in den Settings des Repos und zeigst auf den Ordner dist oder gh-pages. Wenn es eine einfache statische HTML/CSS/JS-Seite ist, reicht es, die Dateien direkt in den main Branch zu pushen oder einen gh-pages Branch zu erstellen und fertig, das Deployment läuft praktisch von selbst.

Grundsätzlich ist das richtig, aber ich möchte ein Detail hinzufügen, das mir beim Deployment sehr geholfen hat, als ich angefangen habe. 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, sonst funktionieren die Links nicht. Das ist so ein Detail, das du entdeckst, wenn du alles kaputt in der Produktion siehst, haha.

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, pointing zum Branch 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.