Saltearse al contenido

Despliega tu proyecto de Astro en GitHub pages

Puedes usar GitHub pages para desplegar tu proyecto de Astro directamente desde un repositorio en GitHub.com.

Cómo desplegar

Sección titulada Cómo desplegar

Puedes desplegar un proyecto de Astro en GitHub Pages usando GitHub Actions para construir y desplegar tu proyecto automáticamente. Para hacer esto, tu código fuente debe estar alojado en GitHub.

Astro mantiene la acción oficial withastro/action para desplegar tu proyecto con muy poca configuración. Sigue las instrucciones a continuación para desplegar tu proyecto de Astro en GitHub Pages y consulta el README si necesitas más información.

Configura Astro para GitHub Pages

Sección titulada Configura Astro para GitHub Pages

Desplegando a una URL github.io

Sección titulada Desplegando a una URL github.io

Configura las opciones site y, si es necesario, base en astro.config.mjs.

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://astronaut.github.io',
  base: '/mi-repo',
})

site

Sección titulada site

El valor de site debe ser uno de los siguientes:

base

Sección titulada 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.

Usando GitHub pages con un dominio personalizado

Sección titulada Usando GitHub pages con un dominio personalizado

Para configurar Astro para usar GitHub pages con un dominio personalizado, configura tu dominio como el valor de site. No configures un valor para base:

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://example.com',
})

Configurar una acción de GitHub

Sección titulada Configurar una acción de GitHub

  1. Crea un nuevo archivo en tu proyecto en .github/workflows/deploy.yml y pega el siguiente YAML.

    deploy.yml
    name: Deploy to GitHub Pages
    

    on:
      # Activa el flujo de trabajo cada vez que hagas push a la rama `main`
      # Usando un nombre de rama diferente? Reemplaza `main` con el nombre de tu rama
      push:
        branches: [ main ]
      # Te permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones en GitHub.
      workflow_dispatch:
    

    # Permite que este trabajo clone el repositorio y cree un despliegue de página
    permissions:
      contents: read
      pages: write
      id-token: write
    

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout your repository using git
            uses: actions/checkout@v4
          - name: Install, build, and upload your site
            uses: withastro/action@v2
            # con:
              # path: . # La ubicación raíz de tu proyecto de Astro dentro del repositorio. (opcional)
              # node-version: 20 # La versión específica de Node que debería usarse para construir tu sitio. Por defecto es 20. (opcional)
              # package-manager: pnpm@latest # El gestor de paquetes de Node que debería usarse para instalar dependencias y construir tu sitio. Detectado automáticamente basado en tu lockfile. (opcional)
    

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4

  2. En GitHub, ve a la pestaña Settings de tu repositorio y encuentra la sección Pages de la configuración.

  3. Elige GitHub Actions como el Source de tu sitio.

  4. Haz commit del nuevo archivo de flujo de trabajo y haz push a GitHub.

¡Tu sitio debería estar publicado ahora! Cuando hagas push a los cambios en el repositorio de tu proyecto de Astro, la acción de GitHub los desplegará automáticamente por ti.

Más guías de implementación