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.

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 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',
})

El valor de site debe ser uno de los siguientes:

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',
})
  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