¿Qué se guarda en la carpeta dist?

Es el resultado final de la compilación de tu proyecto (producido al ejecutar npm run build). Contiene todo el código HTML, CSS, JavaScript optimizado, imágenes procesadas y archivos listos para que los navegadores los lean.

¿Se sube al hosting o producción?

👍 SÍ (si se trata de un sitio estático tradicional)

  • Si se usa un servidor web estándar (vía FTP / hosting tradicional o en Github para mostrarse como GitHub Pages), ésta es la única carpeta que se debe subir al servidor para publicar la web.

    Se sube el contenido de la carpeta, no la carpeta en sí. Si se sube la carpeta dist, el servidor va a buscar la página principal dentro de la raíz y lanzará un error 404 (o mostrará el índice de archivos).

  • Si se usan plataformas modernas (Vercel, Netlify, Cloudflare Pages, etc.): No se sube manualmente ni a Git. La plataforma se encarga de ejecutar el comando npm run build y generar la carpeta dist automáticamente en la nube.

Publicar un sitio estático de Astro en GitHub Pages

Es posible publicar un sitio estático de Astro en GitHub Pages de forma 100% gratuita.

Para hacerlo, se pueden utilizar cualquiera de las dos alternativas siguientes:

Opción 1: Subir solo la carpeta dist

Si deseas generar el proyecto de forma local en el ordenador y subirlo manualmente a GitHub Pages, se siguen estos pasos:

  1. Se ejecuta npm run build en la terminal para generar la carpeta dist.
  2. Se sube únicamente el contenido de la carpeta dist a la rama de GitHub que se hayas configurado para servir GitHub Pages (normalmente la rama gh-pages o main).

Opción 2: GitHub Actions (La forma automática)

Hay que tener creado un repositorio en GitHub y subir los archivos usando Git (haciendo commit y push).

En lugar de compilar el proyecto en tu ordenador y subir la carpeta dist manualmente a un repositorio, se puede configurar el siguiente flujo de trabajo con GitHub Actions.

  1. Se sube todo el código fuente (carpetas src y public) al repositorio de GitHub.
  2. Se añade un archivo de flujo de trabajo (workflow) que detecta cuando subes cambios.
  3. GitHub ejecuta npm run build en la nube de forma transparente, genera la carpeta dist en segundo plano y publica el sitio automáticamente en GitHub Pages.