Guía para Crear y Desplegar una Página con Astro en GitHub Pages

Publicado por Alberto Guaman en 6 de noviembre de 2024

Categorías

Etiquetas

Índice

Creación del Proyecto Astro
Ejecuta el servidor de desarrollo
Despliegue en GitHub
Configuración para el Despliegue en GitHub Pages
Despliega el proyecto
Sitio desplegado con éxito, felicidades!

Creación del Proyecto Astro

Inicia un nuevo proyecto Astro: Abre tu terminal y ejecuta el siguiente comando para crear un proyecto nuevo en Astro, el nombre del proyecto "githubpages" puedes cambiarlo a tu gusto.

npm create astro@latest githubpages

Este comando te guiará a través de algunas opciones. Selecciona el nombre de tu proyecto y elige una plantilla. Para este tutorial, puedes seleccionar una plantilla en blanco.

Ejecuta el servidor de desarrollo

Ejecuta el servidor local para asegurarte de que todo funcione correctamente.

npm run dev

Despliegue en GitHub

Crea un repositorio en GitHub: Ve a github.com y crea un nuevo repositorio. Puedes nombrarlo como desees, pero asegúrate de que sea público.
Conecta tu proyecto local con GitHub: Agrega el repositorio remoto y realiza el primer commit y push.

Configuración para el Despliegue en GitHub Pages

GitHub Pages requiere que tu sitio esté en la carpeta docs o que el contenido esté en una rama específica como gh-pages. Vamos a configurar Astro para compilar el proyecto en la carpeta dist, que es el valor predeterminado.

Actualiza el archivo de configuración astro.config.mjs: Abre el archivo astro.config.mjs y configura el base path para GitHub Pages.

2. Configura el script de despliegue: Agrega un nuevo script en el archivo package.json para automatizar el despliegue en GitHub Pages.

"scripts": {
  "build": "astro build",
  "deploy": "gh-pages -d dist" // agrega esta linea
}

3. Instala gh-pages: Ejecuta el siguiente comando para instalar la dependencia gh-pages, que permitirá desplegar el sitio de manera sencilla.

npm install gh-pages --save-dev

Despliega el proyecto

Ejecuta el script de despliegue para construir el proyecto y publicarlo en GitHub Pages.

npm run build
npm run deploy

Sitio desplegado con éxito, felicidades!

Ve a la configuración de tu repositorio en GitHub.
En el menú lateral, selecciona Pages.
Configura la fuente como gh-pages, y guarda los cambios.

GitHub tomará unos minutos para publicar el sitio. Cuando esté listo, podrás acceder a tu página en https://tu-usuario.github.io/nombre-del-repositorio/.