Introducción a Astro

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 #

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:

1. En desarrollo:
   Tú trabajas con archivos .astro, .js, .css, .md, etc.

2. En compilación:
   Astro genera HTML estático (sin necesidad de servidor).

3. 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 24 actualizado. Astro 7.4.2 requiere Node 22.23.4 o superior, sin versiones impares; utilizaremos Node 24 en desarrollo y despliegue.
  👉 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
• Elige la plantilla Minimal para seguir los ejemplos desde cero. Astro incluye soporte TypeScript; no necesitas dominarlo para escribir HTML y JavaScript.
• Install dependencies: Yes

Esto creará la carpeta y descargará todo lo necesario. Las opciones del asistente pueden variar según su versión.

Este curso utiliza Astro 7.4.2. Después de entrar en la carpeta, comprueba la versión con npx astro --version. Para reproducir los ejemplos con esa versión ejecuta npm install --save-exact astro@7.4.2 y conserva package-lock.json en Git. Para actualizar un proyecto existente y sus integraciones oficiales se utiliza npx @astrojs/upgrade. Versiones y actualización.

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.