- Published on
Desplegar una aplicación Astro en GitHub Pages utilizando GitHub Actions
- Authors
- Name
- Emmanuel Hernandez
- @emmanuelhdev
- Name
- BysMax
Puedes utilizar GitHub Pages para alojar un sitio web Astro directamente desde un repositorio en GitHub.com.
Puedes desplegar un sitio Astro en GitHub Pages utilizando GitHub Actions para construir y desplegar tu sitio 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 sitio Astro en GitHub Pages, y consulta el README del paquete si necesitas más información.
Configurar Astro para GitHub Pages
github.io
Desplegar a una URL Establece las opciones site
y base
en astro.config.mjs
.
import { defineConfig } from 'astro/config'export default defineConfig({ site: 'https://astronaut.github.io', base: 'my-repo',})
El valor para site
debe ser uno de los siguientes:
- La siguiente URL basada en tu nombre de usuario:
https://<username>.github.io
- La URL aleatoria generada automáticamente 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 /my-repo
) como la raíz de tu sitio web.
El valor para base
debe ser el nombre de tu repositorio comenzando con una barra diagonal, por ejemplo /my-blog
. Esto es para que Astro entienda que la raíz de tu sitio web es /my-repo
, en lugar de la ruta por defecto /
.
Usar GitHub Pages con un dominio personalizado
Para configurar Astro para usar GitHub Pages con un dominio personalizado, establece tu dominio como el valor para site
. No establecer 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 YAML a continuación.
name: Deploy to GitHub Pages
on:
# Trigger the workflow every time you push to the `main` branch
# Using a different branch name? Replace `main` with your branch’s name
push:
branches: [main]
# Allows you to run this workflow manually from the Actions tab on GitHub.
workflow_dispatch:
# Allow this job to clone the repo and create a page deployment
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
# with:
# path: . # The root location of your Astro project inside the repository. (optional)
# node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
# package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
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
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.
Confirma el nuevo archivo de flujo de trabajo y súbelo a GitHub.
¡Tu sitio ahora debería estar publicado! Cuando hagas cambios en el repositorio de tu proyecto Astro, la Acción de GitHub los desplegará automáticamente por ti.