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

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

Desplegando a una URL `github.io`

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

import { defineConfig } from 'astro/config'

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

`site`

El valor de site debe ser uno de los siguientes:

El siguiente URL basado en el nombre de tu usuario: https://<username>.github.io
El URL autogenerado aleatorio para una página privada de una organización de GitHub: https://<random-string>.pages.github.io/

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

:::noteNo configures un valor para base si:

Tu página se sirve desde la carpeta raíz.
Tu repositorio está ubicado en https://github.com/<USUARIO>/<USUARIO>.github.io.:::

:::cautionCuando este valor está configurado, todos los enlaces internos de tu página deben tener el prefijo del valor de base:

<a href="/mi-repo/acerca">Acerca</a>

Ve más sobre como configurar un valor base (EN):::

Usando GitHub pages con un dominio personalizado

:::tip[Configurar un dominio personalizado]Puedes configurar un dominio personalizado agregando el siguiente archivo ./public/CNAME a tu proyecto:

sub.mydomain.com

Esto desplegará tu proyecto en el dominio personalizado en lugar de user.github.io. No olvides también configurar el DNS en el proveedor de dominio.:::

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:

import { defineConfig } from 'astro/config'

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

Configurar una acción de GitHub

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

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@v3
        # with:
          # 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

:::noteLa acción de astro toma algunas entradas opcionales. Estas pueden ser proporcionadas descomentando la línea with: y la entrada que quieres usar.:::

:::cautionLa acción oficial de Astro escanea el lockfile para detectar tu gestor de paquetes preferido (npm, yarn, pnpm, o bun). Debes incluir el archivo package-lock.json, yarn.lock, pnpm-lock.yaml o bun.lockb en tu repositorio.:::

(Opcional) Si pasas variables de entorno a tu proyecto Astro durante el desarrollo local o al previsualizar compilaciones, deberás definir cualquier variable pública en el archivo deploy.yml para que se procesen cuando despliegues en GitHub Pages. (Consulta la documentación de GitHub sobre cómo configurar secretos para agregar variables de entorno privadas).

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@v3
        env:
          # Usa comillas simples para el valor de la variable
          PUBLIC_EVM_WALLET_ADDRESS: '0x4bFc229A40d41698154336aFF864f61083E76659'

En GitHub, ve a la pestaña Settings de tu repositorio y busca la sección Pages dentro de la configuración.
Elige GitHub Actions como la fuente de tu sitio.
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.