¿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
.astrofá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@latestSigue 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 devAbre 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.astroes/) - 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:visibleoclient:idlepara 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.astroysrc/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 buildY sube la carpeta dist/ al hosting de tu preferencia.
Recursos útiles
- Documentación oficial de Astro
- Guía de migración desde otros frameworks
- Astro Themes
- Astro Integrations
¿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!
Explorar etiquetas