En mi artículo anterior sobre Astro expliqué qué es y por qué está ganando espacio frente a otros frameworks web. Ahora toca la parte práctica: crear tu primera web con Astro, desde la instalación hasta el despliegue en producción.
Requisitos previos
- Tener instalado Node.js 18 o superior.
- Un editor de código (VS Code, Neovim, etc.).
- Conocimientos básicos de HTML y CSS.
1. Crear el proyecto
Abre una terminal y ejecuta:
npm create astro@latest my-first-astro
cd my-first-astro
npm install
El asistente te preguntará si quieres empezar desde cero o con una plantilla. Para este tutorial elige “blog básico”.
2. Ejecutar el servidor de desarrollo
Inicia el servidor local:
npm run dev
Abre http://localhost:4321 y verás tu primer sitio con Astro corriendo.
3. Estructura básica de Astro
Un proyecto de Astro tiene principalmente:
src/pages/: aquí van tus páginas (cada archivo.astrose convierte en una ruta).src/components/: tus componentes reutilizables.public/: archivos estáticos como imágenes y fuentes.
4. Crear tu primera página
Crea un archivo en src/pages/hola.astro con este contenido:
<html lang="es">
<head>
<title>Hola desde Astro</title>
</head>
<body>
<h1>¡Hola mundo con Astro!</h1>
<p>Esta es mi primera página.</p>
</body>
</html>
Ahora visita http://localhost:4321/hola y deberías ver tu nueva página funcionando.
5. Publicar en producción
Cuando tu sitio esté listo, genera los archivos estáticos:
npm run build
Esto creará la carpeta dist/ con tu web final.
Puedes subirla fácilmente a servicios como:
- Netlify
- Vercel
- Cloudflare Pages
Por ejemplo, en Netlify basta con conectar tu repositorio GitHub, elegir la carpeta dist, ¡y listo!
Conclusión
En menos de 15 minutos ya tienes tu primera web con Astro en línea. Es simple, rápido y flexible.
En mi caso, incluso llegué a migrar proyectos reales que antes estaban en cPanel. Si te interesa esa experiencia, te lo cuento aquí: 👉 Cómo migré sitios estáticos desde cPanel a Astro
No hay comentarios:
Publicar un comentario