Astro es un framework de desarrollo web moderno que permite crear sitios estáticos rápidos y optimizados. Su arquitectura está diseñada para generar contenido estático cuando sea posible, y también permite incluir JavaScript solo donde sea necesario.
En esta guía aprenderás cómo crear y desplegar una página web construida con Astro en GitHub Pages.
Requisitos previos
Configurar el Proyecto Astro
Crear un nuevo proyecto Astro:
npm create astro@latest my-astro-site cd my-astro-site npm install
Inicia el servidor de desarrollo:
npm run dev
/localhost:3000 para ver tu sitio en desarrollo.
Configurar Astro para GitHub Pages
Configura el archivo:
astro.config.mjs: Abre el archivo astro.config.mjs y agrega la propiedad base si tu repositorio utiliza un nombre personalizado (por ejemplo, https://usuario.github.io/repositorio/):
import { defineConfig } from 'astro/config';
export default defineConfig({
base: '/Astro-Hola-Mundo/', // Cambia esto por el nombre de tu repositorio
});
Crear un Script de Construcción y Despliegue
Agrega un script de despliegue:
"scripts": {
"deploy": "npm run build && npx gh-pages -d dist"
}
Instala la dependencia:
npm install gh-pages --save-dev
Publicar en GitHub Pages
Inicializa un repositorio Git:
git init git add . git commit -m "Inicializar proyecto Astro" git branch -M main
Sube tu proyecto a GitHub:
git remote add origin https://github.com/usuario/repositorio.git git push -u origin main
Ejecuta el script de despliegue:
npm run deploy
Configura GitHub Pages:
- Ve al repositorio en GitHub.
- Accede a
Settings > Pages. - Selecciona la rama
gh-pagescomo fuente.
Tu sitio estará disponible en unos minutos en https://usuario.github.io/repositorio/.
Conclusión
Has creado y desplegado exitosamente un sitio con Astro en GitHub Pages. Ahora puedes personalizar tu página para ajustarla a tus necesidades.
🚀GitHub: https://github.com/tinguar/Astro-Hola-Mundo
🚀Proyecto: https://tinguar.github.io/Astro-Hola-Mundo/
NUESTRO BLOG
Echa un vistazo a nuestros otros contenidos de calidad.
¡Nos encantaría conocer más sobre tu Proyecto !
Usuarios contentos
Proyectos entregados