Despliega tu proyecto de Astro en GitLab Pages

Puedes usar GitLab Pages para alojar un proyecto de Astro para tu proyecto, grupo, o cuenta de usuario en GitLab.

Cómo desplegar

Puede desplegar un sitio de Astro en GitLab Pages usando GitLab CI/CD para construir y desplegar automáticamente tu sitio. Para hacer esto, tu código fuente debe estar alojado en GitLab y necesitas hacer los siguientes cambios en tu proyecto de Astro:

Establece las opciones site y base en astro.config.mjs.
astro.config.mjs
```
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://<username>.gitlab.io',
  base: '/<my-repo>',
  outDir: 'public',
  publicDir: 'static',
});
```
site

El valor para site debe ser uno de los siguientes:
- El siguiente URL basado en el nombre de tu grupo: https://<groupname>.gitlab.io
- El siguiente URL basado en tu nombre de usuario: https://<username>.gitlab.io
- Tu dominio personalizado si lo tienes configurado en la configuración de tu proyecto de GitLab: https://example.com
Para instancias auto-alojadas de GitLab, reemplaza gitlab.io con el dominio de Pages de tu instancia.

base

Un valor para base puede ser requerido para que Astro trate el nombre de tu repositorio (por ejemplo, /mi-repo) como la raíz de tu sitio web.

No establezcas un parámetro base si tu página se sirve desde la carpeta raíz.

El valor para base debe ser el nombre de tu repositorio comenzando con una barra diagonal, por ejemplo /mi-blog. Esto es para que Astro entienda que la raíz de tu sitio web es /mi-repo, en lugar de la raíz predeterminada /.
Precaución
Cuando este valor está configurado, todos los enlaces internos de tus páginas deben tener el prefijo de tu valor base:
<a href="/my-repo/about">Acerca</a>
Ver más sobre configurar un valor base
Renombra el directorio public/ a static/.
Establece outDir: 'public' en astro.config.mjs. Esta configuración indica a Astro que coloque la salida de la compilación estática en una carpeta llamada public, que es la carpeta requerida por GitLab Pages para los archivos expuestos.

Si estás usando el directorio public/ como fuente de archivos estáticos en tu proyecto de Astro, renombralo y usa ese nuevo nombre del directorio en astro.config.mjs para el valor de publicDir.

Por ejemplo, estos son los ajustes correctos de astro.config.mjs cuando el directorio public/ es renombrado a static/:
astro.config.mjs
```
import { defineConfig } from 'astro/config';

export default defineConfig({
  outDir: 'public',
  publicDir: 'static',
});
```
Cambia la salida de la compilación en .gitignore. En nuestro ejemplo necesitamos cambiar dist/ a public/:
.gitignore
```
# build output
dist/
public/
```

Crea un archivo llamado .gitlab-ci.yml en la raíz de tu proyecto con el contenido a continuación. Esto construirá y desplegará tu sitio cada vez que hagas cambios en tu contenido:

pages:
  # La imagen de Docker que se usará para construir tu app
  image: node:lts

  before_script:
    - npm ci

  script:
    # Especifica los pasos involucrados para construir tu app aquí
    - npm run build

  artifacts:
    paths:
      # El directorio que contiene los archivos construidos para ser publicados.
      # Debe llamarse "public".
      - public

  only:
    # Activa una nueva compilación y despliega solo cuando haya un push a la
    # rama(s) a continuación
    - main

Haz un commit de tus cambios y súbelos a GitLab.
En GitLab, ve al menú Deploy de tu repositorio y selecciona Pages. Aquí verás la URL completa de tu sitio web de GitLab Pages. Para asegurarte de que estás usando el formato de URL https://username.gitlab.io/my-repo, desmarca la configuración Use unique domain en esta página.

¡Tu sitio debería estar publicado! Cuando hagas cambios en tu repositorio de proyecto de Astro, el pipeline CI/CD de GitLab los desplegará automáticamente para ti.