Como fazer o deployment de um app no GitHub Pages?

Basicamente você cria um repositório no GitHub, faz push do seu código e se usar um framework tipo React ou Vue configura o script de build no package.json, depois ativa GitHub Pages nas configurações do repositório apontando para a pasta dist ou gh-pages. Se for um site estático HTML/CSS/JS simples é só fazer push direto dos arquivos na branch main ou criar uma branch gh-pages e pronto, o deploy é praticamente automático.

Sim, basicamente é isso, mas quero adicionar um detalhe que foi útil pra mim quando comecei a fazer deploy. Como dito acima a base está certa, mas depende muito do que você está deployando. Se é um site estático simples, tipo HTML, CSS e JavaScript vanilla, literalmente é só fazer push do código e ativar Pages nas settings - você escolhe se quer que leia da branch main e da pasta root, ou de uma pasta /docs. Pronto.

Mas se você usa React ou Vue, a coisa muda um pouco. Você precisa instalar o pacote `gh-pages` com npm, aí configurar o `package.json` adicionando `"homepage": "https://seuusuario.github.io/nome-repo"` (importante colocar o nome do repo se não for seu site principal). Depois você adiciona os scripts de build e deploy, tipo `"deploy": "npm run build && gh-pages -d build"` pro React. Quando você roda `npm run deploy`, a ferramenta compila tudo e faz push automático da pasta build pra branch `gh-pages`. Nas settings você ativa Pages nessa branch e tá resolvido.

Outra coisa que aprendi fazendo vários testes: se você tem assets ou imagens que não carregam, na maioria das vezes é um problema de caminhos relativos. Verifica bem que as imagens estão linkadas de forma correta no seu código. E se você usa um router (tipo React Router), você precisa configurá-lo com `basename` pro nome do repo, senão os links não funcionam. É um desses detalhes que você descobre quando vê tudo quebrado em produção, haha.

Exato, o que eles disseram está certo. Eu só acrescentaria que se você tem um site estático simples (html, css, js) você nem precisa fazer nada de especial, é só o repo ser público e você ativar Pages nas configurações apontando para a branch que quer, geralmente main. Para React e similares você precisa instalar `gh-pages` e colocar os scripts certos no package.json tipo `"deploy": "gh-pages -d build"`, aí quando você faz `npm run deploy` ele carrega tudo automaticamente.

Uma coisa que ninguém fala mas é bem útil: se o teu projeto não está na raiz do repo, você precisa especificar a pasta certa nas settings do GitHub Pages (escolha "Deploy from a branch" e selecione a pasta `/docs` ou `/dist` dependendo de onde fica a build). Descobri isso na marra quando deployei um site ao lado de outros projetos no mesmo repo e me vi com uma página em branco. Ah, e um truque que uso bastante: cria um workflow GitHub Actions simples que faz a build automática quando você faz push, aí você não precisa fazer manualmente `npm run build` e depois commitar a pasta compilada - deixa que o GitHub faça isso por ti e a gestão fica muito mais limpa.