Cómo instalar y configurar Astro desde cero

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:


---
---

    <title>Mi primera página en Astro</title>

    <h1>¡Hola, Astro!</h1>

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.