Como fazer o deployment de um app no GitHub Pages?

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.

A coisa mais importante é entender que GitHub Pages exige que você escolha qual pasta servir como raiz do site, e 90% dos problemas vêm daí. Não é intuitivo: muita gente carrega o repo inteiro e depois se pergunta por que não vê nada. Quando coloquei online o primeiro projeto feito com Vite, perdi horas porque tinha o arquivo index.html na pasta dist, mas GitHub Pages procurava na raiz.

O que eu faria é: criar o repo, fazer o push do teu código, depois ir em Settings > Pages. Lá selecionar o branch (geralmente main) e especificar a pasta exata onde estão os arquivos que queres servir (na maioria dos casos é / para a raiz, ou /docs ou /dist se usas um bundler). Se usas React, Vue ou similar, primeiro tens de executar o build local para gerar os arquivos estáticos finais, fazer o commit desses arquivos e só depois ativá-los no Pages.

Um detalhe que me salvou depois: se queres que o deploy seja automático toda vez que fazes push, podes usar uma GitHub Action. É mais avançado, mas evita ter de fazer o build manualmente toda vez. No início eu fazia tudo na mão e às vezes esquecia de commitar a build. Agora uso um script simples que faz isso para mim e não penso mais nisso.