Introducción a Astro: El Framework Web del Futuro

¿Buscas un framework web moderno, rápido y fácil de usar?
¡Astro es la revolución que estabas esperando!

¿Qué es Astro?

Astro es un framework web de nueva generación que permite crear sitios y aplicaciones ultrarrápidas. Su principal ventaja es que solo envía el JavaScript necesario al navegador, lo que mejora el rendimiento y la experiencia de usuario.

Rápido por defecto: Genera HTML estático y solo hidrata lo necesario.
Multi-framework: Puedes usar React, Vue, Svelte, Solid, e incluso componentes de todos juntos.
Sencillo: Sintaxis clara, archivos .astro fáciles de entender.
SEO friendly: Perfecto para blogs, landing pages y sitios de contenido.

¿Por qué elegir Astro?

Carga instantánea: Tus páginas cargan en milisegundos.
Sin JavaScript innecesario: Solo se envía lo que realmente usas.
Integración con cualquier librería: Usa componentes de React, Vue, Svelte, etc., en el mismo proyecto.
Ideal para contenido: Blogs, portafolios, docs y más.

Instalación de Astro

1. Requisitos previos

Node.js 16.12 o superior (descargar aquí)
npm o yarn

2. Crear un nuevo proyecto

npm create astro@latest

Sigue el asistente y elige las opciones que prefieras (puedes empezar con una plantilla básica).

3. Instala dependencias y ejecuta el servidor

cd nombre-de-tu-proyecto
npm install
npm run dev

Abre http://localhost:4321 y verás tu sitio Astro funcionando.

Estructura básica de un proyecto Astro

mi-astro/
├── public/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── astro.config.mjs
├── package.json
└── ...

public/: Archivos estáticos (imágenes, favicon, etc.)
src/pages/: Cada archivo es una ruta (por ejemplo, index.astro es /)
src/components/: Componentes reutilizables
src/layouts/: Layouts para páginas

Tu primera página en Astro

Crea un archivo src/pages/index.astro:

---
// Puedes usar frontmatter para lógica o props
---
<html>
  <head>
    <title>Mi primer sitio con Astro</title>
  </head>
  <body>
    <h1>¡Hola, Astro!</h1>
    <p>Este es mi primer sitio web ultrarrápido 🚀</p>
  </body>
</html>

Guarda y recarga tu navegador. ¡Listo!

Usando componentes de React, Vue o Svelte en Astro

Astro te permite importar y usar componentes de otros frameworks fácilmente:

---
import MiBoton from '../components/MiBoton.jsx';
---
<MiBoton client:load />

Usa client:load, client:visible o client:idle para controlar cuándo se hidrata el componente.

Ejemplo práctico: Blog simple con Astro

Crea una página src/pages/blog.astro:

---
const posts = [
  { title: 'Primer post', excerpt: 'Mi primer post en Astro', url: '/blog/primer-post' },
  { title: 'Segundo post', excerpt: 'Aprendiendo Astro paso a paso', url: '/blog/segundo-post' },
];
---
<html>
  <body>
    <h1>Blog</h1>
    <ul>
      {posts.map(post => (
        <li>
          <a href={post.url}><strong>{post.title}</strong></a>
          <p>{post.excerpt}</p>
        </li>
      ))}
    </ul>
  </body>
</html>

Crea las páginas individuales en src/pages/blog/primer-post.astro y src/pages/blog/segundo-post.astro.

Despliegue de tu sitio Astro

Astro puede desplegarse fácilmente en Vercel, Netlify, GitHub Pages y más. Solo genera el sitio estático:

npm run build

Y sube la carpeta dist/ al hosting de tu preferencia.

Recursos útiles

¿Listo para crear el futuro de la web?
¡Con Astro, tu sitio será más rápido, moderno y fácil de mantener que nunca!