Astro

Guía completa para empezar con Astro, el moderno framework para construir sitios web rápidos y estáticos

Por José Luís Ferrer Rodríguez | Actualizado: 02/06/2025

Introducción

Astro es un framework moderno para construir sitios web rápidos y estáticos que priorizan la entrega de contenido HTML puro y optimizan la carga de JavaScript solo cuando es necesario. Esta guía cubre los conceptos esenciales para empezar a crear con Astro.

Índice

¿Qué es Astro?
Configuración inicial
Estructura del proyecto
Componentes Astro
Markdown y contenido
Integración con frameworks (React, Vue, Svelte)
Rutas y páginas
Despliegue y optimización

¿Qué es Astro?

Astro es un generador de sitios estáticos que permite construir páginas web con componentes de múltiples frameworks (React, Vue, Svelte…) y genera HTML estático optimizado para velocidad y SEO. Su filosofía es enviar el mínimo JavaScript posible al cliente.

Configuración inicial

Para crear un nuevo proyecto Astro:

# Crear proyecto con plantilla básica
npm create astro@latest

# Instalar dependencias
cd nombre-del-proyecto
npm install

# Levantar servidor de desarrollo
npm run dev

Astro usa npm o yarn y tiene soporte para TypeScript.

Estructura del proyecto

src/pages/ — Donde se colocan las páginas. Cada archivo .astro o .md genera una ruta.
src/components/ — Componentes reutilizables.
public/ — Archivos estáticos (imágenes, favicon).
astro.config.mjs — Configuración principal de Astro.

Componentes Astro

Los componentes .astro combinan HTML, JavaScript y CSS con un formato propio.

---
const { nombre } = Astro.props;
---

<html>
  <body>
    <h1>Hola, {nombre}!</h1>
  </body>
</html>

Se pueden usar props, scripts y estilos scoped.

Markdown y contenido

Astro soporta Markdown de forma nativa. Puedes crear archivos .md en src/pages para contenido:

---
title: "Mi primer post"
pubDate: "2025-06-02"
---

# Este es un título

Contenido escrito en Markdown que Astro convierte en HTML.

También puedes usar @astrojs/content para organizar colecciones de contenido con metadatos y validación.

Integración con frameworks (React, Vue, Svelte)

Astro permite importar y usar componentes de frameworks populares:

---
import MiComponenteReact from '../components/MiComponenteReact.jsx';
---

<html>
  <body>
    <MiComponenteReact />
  </body>
</html>

Astro prerenderiza el HTML y solo hidrata el JS cuando es necesario, mejorando el rendimiento.

Rutas y páginas

Cada archivo en src/pages se convierte en una ruta:

src/pages/index.astro → /
src/pages/about.astro → /about
src/pages/blog/post.md → /blog/post

Puedes crear rutas dinámicas con [param]:

src/pages/blog/[slug].astro para rutas tipo /blog/mi-post.

Despliegue y optimización

Astro genera sitios estáticos listos para desplegar en cualquier hosting estático (Netlify, Vercel, GitHub Pages).

npm run build

Genera la carpeta dist/ con los archivos listos para producción.

Astro optimiza imágenes, CSS y JavaScript automáticamente.