Despliega tu sitio de Astro en GitLab Pages

Puedes usar GitLab Pages para alojar un sitio de Astro para tus proyectos, grupos o cuenta de usuario de GitLab.

Cómo desplegar

Puedes desplegar un sitio de Astro en GitLab Pages utilizando GitLab CI/CD para compilar y desplegar tu sitio automáticamente. Para hacer esto, tu código fuente debe estar alojado en GitLab y debes realizar los siguientes cambios en tu proyecto de Astro:

Configura 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:
- La siguiente URL basada en tu nombre de usuario: https://<username>.gitlab.io
- La siguiente URL basada en el nombre de tu grupo: https://<groupname>.gitlab.io
- Tu dominio personalizado si lo tienes configurado en los ajustes de tu proyecto de GitLab: https://example.com
Para instancias autogestionadas de GitLab, reemplaza gitlab.io con el dominio de Pages de tu instancia.

base

Es posible que se requiera un valor para base para que Astro trate el nombre de tu repositorio (por ejemplo, /my-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 /my-blog. Esto es para que Astro entienda que la raíz de tu sitio web es /my-repo, en lugar del valor predeterminado /.
Precaución
Cuando este valor está configurado, todos los enlaces de tus páginas internas deben tener el prefijo de tu valor de base:
<a href="/my-repo/about">About</a>
Consulta más sobre cómo configurar un valor de base.
Renombra el directorio public/ a static/.
Establece outDir: 'public' en astro.config.mjs. Esta configuración le 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 estabas usando el directorio public/ como fuente de archivos estáticos en tu proyecto de Astro, renómbralo y usa ese nuevo nombre de carpeta en astro.config.mjs para el valor de publicDir.

Por ejemplo, aquí están los ajustes correctos de astro.config.mjs cuando el directorio public/ se renombra a static/:
astro.config.mjs
```
import { defineConfig } from 'astro/config';

export default defineConfig({
  outDir: 'public',
  publicDir: 'static',
});
```
Cambia la salida de compilación en .gitignore. En nuestro ejemplo necesitamos cambiar dist/ por 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 compilará y desplegará tu sitio cada vez que realices cambios en tu contenido:

pages:
  # The Docker image that will be used to build your app
  image: node:lts

  before_script:
    - npm ci

  script:
    # Specify the steps involved to build your app here
    - npm run build

  artifacts:
    paths:
      # The folder that contains the built files to be published.
      # This must be called "public".
      - public

  only:
    # Trigger a new build and deploy only when there is a push to the
    # branch(es) below
    - main

Confirma tus cambios y realiza un push a GitLab.
En GitLab, ve al menú Deploy (Despliegue) de tu repositorio y selecciona Pages (Páginas). 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 (Usar dominio único) en esta página.

¡Tu sitio ya debería estar publicado! Cuando realices un push con cambios en el repositorio de tu proyecto de Astro, el pipeline de GitLab CI/CD los desplegará automáticamente por ti.