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 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.