Saltearse al contenido

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.

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:

  1. 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.

    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 /.

  2. Renombra el directorio public/ a static/.

  3. 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',
    });
  4. Cambia la salida de la compilación en .gitignore. En nuestro ejemplo necesitamos cambiar dist/ a public/:

    .gitignore
    # build output
    dist/
    public/
  5. 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:

    .gitlab-ci.yml
    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
  6. Haz un commit de tus cambios y súbelos a GitLab.

  7. 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.

Más guías de implementación

Contribuir

¿Qué tienes en mente?

Comunidad