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 las opciones
site
y, si es necesario,base
enastro.config.mjs
.astro.config.mjs import { defineConfig } from 'astro/config'export default defineConfig({site: 'https://astronaut.github.io',base: '/mi-repo',})site
debe serhttps://<TU_NOMBRE_DE_USUARIO>.github.io
ohttps://mi-dominio.com
base
debe ser el nombre de tu repositorio comenzando con una barra diagonal, por ejemplo/mi-repo
. Esto es para que Astro entienda que el root de tu sitio web es/mi-repo
, en lugar de/
que es el valor por defecto.
No necesitas configuar el parametro
base
si:- Tu página es servida desde la carpeta raíz.
- Tu repositorio está ubicado en
https://github.com/<USERNAME>/<USERNAME>.github.io
. - Estás usando un dominio personalizado.
Si previamente no configuraste un valor para
base
, y acabas de configurarlo para desplegar en GitHub, recuerda actualizar tus enlaces internos para que incluyan labase
<a href="/mi-repo/nosotros">Nosotros</a> -
Crea un nuevo archivo en tu proyecto en
.github/workflows/deploy.yml
, dentro del mismo copia y pega el siguiente código YAML.deploy.yml name: GitHub Pages Astro CIon:# Activa el workflow cada vez que hay un push a la rama `main`# ¿Estás usando un nombre diferente de rama? Reemplaza `main` con el nombre de tu ramapush:branches: [ main ]# Te permite ejecutar este workflow manualmente desde la pestaña Actions en GitHub.workflow_dispatch:# Permite clonar el repositorio y desplegar el proyectopermissions:contents: readpages: writeid-token: writejobs:build:runs-on: ubuntu-lateststeps:- name: Checkout your repository using gituses: actions/checkout@v3- name: Install, build, and upload your siteuses: withastro/action@v1# with:# path: . # La ubicación de la raíz de tu proyecto de Astro dentro del repositorio. (opcional)# node-version: 18 # La versión específica de Node que debe utilizarse para compilar tu proyecto. Por defecto es la 18. (opcional)# package-manager: pnpm@latest # El gestor de paquetes de Node que debe instalar las dependencias y compilar tu proyecto. Automáticamente detectadas con base en tu archivo 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@v1La acción de astro toma algunas entradas opcionales. Estas pueden ser proporcionadas mediante descomentar la línea de
with:
y la entrada que quieras utilizar.La action oficial de Astro busca un archivo lockfile para detectar tu gestor de paquetes (
npm
,yarn
,pnpm
obun
). Debes tener el archivopackage-lock.json
,yarn.lock
,pnpm-lock.yaml
obun.lockb
, generado automáticamente por tu gestor de paquetes, en tu repositorio. -
En GitHub, ve a la pestaña Settings de tu repositorio y busca la sección Pages.
-
Elige GitHub Actions como el Source de tu proyecto.
-
Has commit del nuevo archivo workflow y has push a GitHub.
¡Tu proyecto debería estar publicado! Cuando haya cambios en tu repositorio, GitHub Action los implementará automáticamente por ti.
Opcionalmente, puedes configurar un dominio personalizado agregando el siguiente archivo ./public/CNAME
a tu proyecto:
sub.midominio.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.