# Primeros pasos con Astro: Instalación y configuración básica

> Aprende cómo instalar y configurar Astro para crear sitios web rápidos y eficientes con cero JavaScript por defecto.

- URL canónica: https://www.martagonzalez.dev/blog/primeros-pasos-con-astro-instalacion-y-configuracion-basica/
- Fecha de publicación: 2025-03-02T12:33:57
- Última actualización: 2025-11-05T18:16:41

---

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.
 
![Guía paso a paso sobre cómo instalar y configurar Astro, ideal para desarrolladores web que inician con este framework moderno](https://martagonzalez.dev/wp/wp-content/uploads/2025/03/primeros-pasos-con-astro.avif)
 
## ¿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](https://nodejs.org/).
 
### 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:
 
--- --- Mi primera página en Astro ¡Hola, Astro! 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](https://vercel.com/), [Netlify](https://www.netlify.com/) y [GitHub Pages](https://martagonzalez.dev/blog/desplegar-proyecto-en-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.