BeginnerAstro45 min10 jun 2026

Lanza tu primer sitio Astro

De cero a un sitio estático desplegado en 45 minutos — content collections, islands y el modelo mental que hace que Astro encaje.

Por qué Astro

Astro entrega cero JavaScript por defecto. Tu contenido se renderiza a HTML plano en el servidor, y las islas interactivas solo se hidratan donde tú lo pides. Para un sitio personal cargado de contenido — blog, research, galerías — es exactamente el trato que quieres.

El camino de 45 minutos

  1. npm create astro@latest — elige la plantilla de blog, TypeScript strict.
  2. Define una content collection en src/content.config.ts con un schema zod.
  3. Escribe tu primer post .mdx — el frontmatter se valida en tiempo de build.
  4. Añade una página [slug].astro con getStaticPaths() + render().
  5. Despliega: astro build produce un dist/ totalmente estático que puedes alojar en cualquier parte.

Islands: la parte que la gente pasa por alto

<Hero client:load />        <!-- se hidrata inmediatamente -->
<Chart client:visible />    <!-- se hidrata al hacer scroll hasta él -->
<Comments client:idle />    <!-- se hidrata cuando el navegador está ocioso -->

Usa client:visible para todo lo que esté bajo el fold. Tu puntuación de Lighthouse te lo agradecerá.

Qué sigue

Añade i18n con rutas dinámicas [locale] — esa es otra lección.

Tutoriales