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

Básicamente creas un repo en GitHub, haces push de tu código y si usas un framework como React o Vue configuras el script de build en el package.json, luego activas GitHub Pages desde las settings del repo apuntando a la carpeta dist o gh-pages. Si es un sitio estático HTML/CSS/JS simple basta con pushear directamente los archivos en la rama main o crear una rama gh-pages y listo, el deploy es prácticamente automático.

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.