El desarrollo web ha avanzado notablemente en los últimos años, y han surgido frameworks modernos que facilitan la creación de sitios eficientes. Uno de los más destacados es Astro. Este framework se caracteriza por su enfoque de cero JavaScript por defecto y por permitir la integración con React, Vue o Svelte. En esta guía aprenderás a instalar y configurar Astro paso a paso.
¿Qué es Astro y por qué deberías instalarlo?
Astro es un framework para desarrollo web centrado en el rendimiento. Su objetivo es generar sitios estáticos ultra rápidos y ofrecer compatibilidad con múltiples tecnologías.
- Cero JavaScript por defecto: velocidad máxima desde el inicio.
- Compatibilidad con frameworks modernos: React, Vue, Svelte, entre otros.
- Ideal para contenido estático y dinámico.
- Sintaxis simple y curva de aprendizaje baja.
Pasos para instalar y configurar Astro
Para comenzar a instalar Astro, asegúrate de tener Node.js en tu equipo. Verifícalo con:
node -v
Si no tienes Node.js instalado, puedes descargarlo desde su sitio oficial.
Creación de un nuevo proyecto Astro
Una vez que tengas Node.js instalado, sigue estos pasos:- Abre una terminal y ejecuta:
npm create astro@latest
- El asistente te guiará a través de la configuración inicial del proyecto.
- Una vez completado, accede a la carpeta del proyecto:
cd mi-proyecto-astro
Instala las dependencias necesarias:
npm install
Configurar Astro después de la instalación
Después de instalar Astro, es momento de configurarlo. La estructura básica del proyecto será:
mi-proyecto-astro/
├── public/
├── src/
│ ├── components/
│ ├── layouts/
│ ├── pages/
├── astro.config.mjs
├── package.json
- public/: Contiene archivos estáticos (imágenes, fuentes, etc.).
- src/: Almacena los componentes, diseños y páginas.
- astro.config.mjs: Archivo de configuración de Astro.
- package.json: Administrador de dependencias del proyecto.
Configuración del archivo astro.config.mjs
Puedes personalizar el archivo astro.config.mjs según tus necesidades. Para agregar Tailwind CSS, por ejemplo, edita el archivo astro.config.mjs así:
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
});
Cómo iniciar el servidor después de configurar Astro
Ejecuta el siguiente comando:
npm run dev
Esto iniciará un servidor en http://localhost:3000/, donde podrás ver tu proyecto en tiempo real.
Cómo crear tu primera página tras configurar Astro
Ve a la carpeta src/pages y crea un archivo llamado index.astro con este contenido:
---
---
<html>
<head>
<title>Mi primera página en Astro</title>
</head>
<body>
<h1>¡Hola, Astro!</h1>
<script>const wprRemoveCPCSS = () => { $elem = document.getElementById( "rocket-critical-css" ); if ( $elem ) { $elem.remove(); } }; if ( window.addEventListener ) { window.addEventListener( "load", wprRemoveCPCSS ); } else if ( window.attachEvent ) { window.attachEvent( "onload", wprRemoveCPCSS ); }</script><script src="//martagonzalez.dev/wp-content/cache/min/1/9a8552f4b2905a4a68ee42dfd6ca8aae.js" data-minify="1" defer></script><noscript><link rel="stylesheet" href="//martagonzalez.dev/wp-content/cache/min/1/798f96ddc4577cb82ade889a83b0d0f3.css" data-minify="1" /></noscript></body>
</html>
Guarda el archivo y recarga tu navegador para ver tu página en acción.
Preguntas frecuentes (FAQs)
¿Es necesario saber JavaScript para usar Astro?
No es obligatorio, pero tener conocimientos de JavaScript te ayudará a aprovechar mejor las integraciones con frameworks como React o Vue.¿Astro es adecuado para proyectos grandes?
Sí, Astro es ideal para sitios estáticos y proyectos que priorizan el rendimiento. Para aplicaciones altamente interactivas, puede ser mejor combinarlo con otros frameworks.¿Se puede desplegar un sitio hecho con Astro en plataformas como Vercel o Netlify?
Sí, Astro es compatible con plataformas como Vercel, Netlify y GitHub Pages, facilitando el despliegue de proyectos.Ya sabes cómo instalar y configurar Astro
Hace no mucho, crear un sitio rápido y fácil de mantener era solo para desarrolladores avanzados. Por suerte, ahora contamos con herramientas como Astro que hacen este proceso más accesible.
Con su enfoque de cero JavaScript por defecto y la flexibilidad para integrar otros frameworks, Astro es una solución moderna, potente y eficiente.
Ahora que ya sabes cómo instalar y configurar Astro, tienes todo lo necesario para dar vida a tu próximo sitio web.
¿Estás listo para empezar a crear con Astro?