Come fare il deployment di un'app su GitHub Pages?

Sostanzialmente crei un repo su GitHub, fai il push del tuo codice e se usi un framework tipo React o Vue configuri lo script di build nel package.json, poi attivi GitHub Pages dalle settings del repo puntando alla cartella dist o gh-pages. Se è un sito statico HTML/CSS/JS semplice basta pushare direttamente i file nella branch main o creare una gh-pages branch e il gioco è fatto, il deploy è praticamente automatico.

Fondamentalmente è quello, però voglio aggiungere un dettaglio che mi è stato utile quando ho iniziato a fare deployment. Come detto sopra la base è giusta, ma dipende molto da quello che stai deployando. Se è un sito statico semplice, tipo HTML, CSS e JavaScript vanilla, letteralmente basta pushare il codice e attivare Pages dalle settings - scegli se vuoi che legga dalla branch main e dalla cartella root, oppure da una cartella /docs. Fatto.

Ma se usi React o Vue, la cosa cambia un po'. Devi installare il pacchetto `gh-pages` con npm, poi configurare il `package.json` aggiungendo `"homepage": "https://tuousername.github.io/nome-repo"` (importante mettere il nome del repo se non è il tuo sito principale). Dopo di che aggiungi gli script di build e deploy, tipo `"deploy": "npm run build && gh-pages -d build"` per React. Quando runni `npm run deploy`, il tool compila tutto e pushes automaticamente la cartella build sulla branch `gh-pages`. Dalle settings attivi Pages su quella branch e sei a posto.

Un'altra cosa che ho imparato facendo vari tentativi: se hai asset o immagini che non caricano, spesso è un problema di percorsi relativi. Verifica bene che le immagini siano linkate in modo corretto nel tuo codice. E se usi un router (tipo React Router), devi configurarlo con `basename` per il nome del repo, altrimenti i link non funzionano. È uno di quei dettagli che scopri quando vedi tutto rotto in produzione, haha.

Esatto, quello che hanno detto è giusto. Io aggiungerei solo che se hai un sito statico semplice (html, css, js) non devi nemmeno fare nulla di particolare, basta che il repo sia pubblico e che attivi Pages dalle impostazioni pointing alla branch che vuoi, di solito main. Per React e simili devi installare `gh-pages` e mettere gli script giusti nel package.json tipo `"deploy": "gh-pages -d build"`, poi quando fai `npm run deploy` carica tutto in automatico.

Una cosa che nessuno dice ma è davvero utile: se il tuo progetto non è nella root del repo, devi specificare la cartella giusta nelle settings di GitHub Pages (scegli "Deploy from a branch" e seleziona la cartella `/docs` o `/dist` a seconda di dove finisce la build). Io l'ho scoperto sulla mia pelle quando ho deployato un sito a fianco ad altri progetti nello stesso repo e mi son trovato con una pagina vuota. Ah, e un trick che uso spesso: crea un workflow GitHub Actions semplice che fa il build automatico quando pussi, così non devi fare manualmente `npm run build` e poi commitare la cartella compilata - lasci che GitHub lo faccia per te e la gestione diventa molto più pulita.