1. ¿Qué es Astro?

Astro es un framework moderno para construir sitios web rápidos, simples y fáciles de mantener. Su lema es:

🪶 “Menos JavaScript, más velocidad.”

Astro genera HTML estático optimizado, pero también permite agregar partes interactivas con JavaScript (por ejemplo, un botón o un contador). Esto hace que tus webs carguen rapidísimo, incluso en móviles lentos.

2. Ventajas frente a otros frameworks

Característica	Astro	Otros (React, Vue, etc.)
Tipo de sitio	Estático y ultrarrápido	Dinámico, más pesado
JavaScript	Solo lo necesario	Se carga todo el framework
Curva de aprendizaje	Muy suave	A veces empinada
SEO	Excelente	A veces requiere SSR
Integración	Puede usar React, Vue, Svelte, etc.	Solo su propio sistema

En resumen: Astro es ideal para blogs, portfolios, webs de cursos, documentación o landing pages, y puede crecer hasta sitios grandes.

3. Cómo funciona Astro internamente

Astro combina lo mejor de varios mundos:

En desarrollo: Tú trabajas con archivos .astro, .js, .css, .md, etc.
En compilación: Astro genera HTML estático (sin necesidad de servidor).
En producción: El navegador solo descarga el HTML y un mínimo de JavaScript (solo si lo necesitas).

Esto se llama Island Architecture (arquitectura de islas):

El HTML estático es el continente.
Los componentes interactivos (botones, contadores, etc.) son las islas.

4. Requisitos previos

Necesitarás:

Node.js instalado (versión 18 o superior). 👉 Puedes comprobarlo con:
```
1node -v
```
Conocimientos básicos de HTML, CSS y JS.
Un editor como VS Code.

5. Instalación y primer proyecto

Paso 1. Crear el proyecto

Abre tu terminal y escribe:

1npm create astro@latest

Luego responde:

Project name: mi-primer-astro
Template: elige Blog o Minimal
TypeScript: puedes decir “No” de momento
Install dependencies: Yes

Esto creará la carpeta y descargará todo lo necesario.

Paso 2. Entrar al proyecto

1cd mi-primer-astro

Paso 3. Iniciar el servidor

1npm run dev

Abre tu navegador en 👉 http://localhost:4321 y verás tu primera página Astro funcionando 🎉

Paso 4. Estructura inicial

La estructura base se ve así:

mi-primer-astro/
├── public/
├── src/
│   ├── pages/
│   └── components/
├── astro.config.mjs
├── package.json
└── README.md

Te explicaré cada carpeta en el Módulo 2.

✅ Astro crea webs rápidas y ligeras.
✅ Usa HTML estático con JavaScript solo cuando hace falta.
✅ Es fácil de aprender si ya conoces HTML, CSS y JS.
✅ En minutos puedes tener tu web corriendo localmente.

Curso de Astro