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 desplegarPuedes 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 PagesDesplegando a una URL github.io
Sección titulada Desplegando a una URL github.ioConfigura las opciones site y, si es necesario, base en 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:
- 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/
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 personalizadoPara 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
Sección titulada Configurar una acción de GitHub-
Crea un nuevo archivo en tu proyecto en
.github/workflows/deploy.ymly pega el siguiente YAML.deploy.yml name: Deploy to GitHub Pageson:# 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 ramapush: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áginapermissions:contents: readpages: writeid-token: writejobs:build:runs-on: ubuntu-lateststeps:- name: Checkout your repository using gituses: actions/checkout@v4- name: Install, build, and upload your siteuses: withastro/action@v2# 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: buildruns-on: ubuntu-latestenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v4 -
En GitHub, ve a la pestaña Settings de tu repositorio y encuentra la sección Pages de la configuración.
-
Elige GitHub Actions como el Source 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.
