Logo FPCode

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:

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

  1. ¿Qué es Astro?
  2. Configuración inicial
  3. Estructura del proyecto
  4. Componentes Astro
  5. Markdown y contenido
  6. Integración con frameworks (React, Vue, Svelte)
  7. Rutas y páginas
  8. 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:

Terminal window
# 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).

Terminal window
npm run build

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

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