¿Cómo hacer el deployment de una app en GitHub Pages?

Sí, fundamentalmente es eso, pero quiero agregar un detalle que me fue útil cuando empecé a hacer deployment. Como se dijo arriba la base es correcta, pero depende mucho de lo que estés deployando. Si es un sitio estático simple, tipo HTML, CSS y JavaScript vanilla, literalmente basta pushear el código y activar Pages desde las settings - eliges si quieres que lea desde la branch main y la carpeta root, o desde una carpeta /docs. Listo.

Pero si usas React o Vue, la cosa cambia un poco. Tienes que instalar el paquete `gh-pages` con npm, después configurar el `package.json` agregando `"homepage": "https://tuousername.github.io/nombre-repo"` (importante poner el nombre del repo si no es tu sitio principal). Después de eso agregas los scripts de build y deploy, tipo `"deploy": "npm run build && gh-pages -d build"` para React. Cuando corres `npm run deploy`, la herramienta compila todo y pushea automáticamente la carpeta build a la branch `gh-pages`. Desde settings activas Pages en esa branch y estás listo.

Otra cosa que aprendí haciendo varios intentos: si tienes assets o imágenes que no cargan, a menudo es un problema de rutas relativas. Verifica bien que las imágenes estén linkeadas de forma correcta en tu código. Y si usas un router (tipo React Router), tienes que configurarlo con `basename` para el nombre del repo, si no los links no funcionan. Es uno de esos detalles que descubres cuando ves todo roto en producción, jaja.

Lo que dijeron es correcto. Yo solo añadiría que si tienes un sitio estático simple (html, css, js) ni siquiera tienes que hacer nada en particular, solo basta que el repo sea público y que actives Pages desde la configuración apuntando a la rama que quieras, normalmente main.

Para React y similares tienes que instalar `gh-pages` y poner los scripts correctos en el package.json tipo `"deploy": "gh-pages -d build"`, luego cuando haces `npm run deploy` carga todo automáticamente.

Una cosa que nadie dice pero es realmente útil: si tu proyecto no está en la raíz del repo, tienes que especificar la carpeta correcta en las settings de GitHub Pages (elige "Deploy from a branch" y selecciona la carpeta `/docs` o `/dist` dependiendo de dónde termine la build).

Lo descubrí en carne propia cuando deployé un sitio al lado de otros proyectos en el mismo repo y me encontré con una página en blanco.

Ah, y un truco que uso seguido: crea un workflow de GitHub Actions simple que haga la build automática cuando hagas push, así no tienes que hacer manualmente `npm run build` y después commitear la carpeta compilada - dejas que GitHub lo haga por vos y la gestión se vuelve mucho más limpia.

Lo más importante es entender que GitHub Pages requiere que elijas qué carpeta servir como raíz del sitio, y el 90% de los problemas vienen de ahí. No es intuitivo: mucha gente carga todo el repo y luego se pregunta por qué no ve nada. Cuando puse online el primer proyecto hecho con Vite, perdí horas porque tenía el archivo index.html en la carpeta dist, pero GitHub Pages buscaba en la raíz.

Lo que yo haría es: crea el repo, haz push de tu código, luego ve a Settings > Pages. Ahí selecciona la rama (normalmente main) y especifica la carpeta exacta donde están los archivos que quieres servir (en la mayoría de los casos es / para la raíz, o /docs o /dist si usas un bundler). Si usas React, Vue o similar, primero tienes que lanzar el build local para generar los archivos estáticos finales, hacer commit de esos archivos y solo después activarlos en Pages.

Un detalle que me salvó después: si quieres que el deploy sea automático cada vez que haces push, puedes usar una GitHub Action. Es más avanzado, pero evita tener que hacer el build manualmente cada vez. Al principio hacía todo a mano y de vez en cuando me olvidaba de hacer commit de la build. Ahora uso un script simple que lo hace por mí y no pienso más en ello.