Cómo instalar Astro paso a paso: Guía 2025 | Ecosistema DEV

Astro es uno de los frameworks web más rápidos para crear sitios de contenido como blogs, portfolios, landing pages y tiendas online.

Aquí te explico cómo instalarlo fácilmente en tu equipo, ya sea con el asistente oficial o de forma manual.

Requisitos previos

Antes de instalar Astro, asegúrate de tener:

Node.js: v18.20.8 o v20.3.0, v22.0.0 o superior (v19 y v21 no son compatibles).
Editor de texto: VS Code recomendado con la extensión oficial de Astro.
Terminal: para ejecutar los comandos CLI.

Instalación rápida con el asistente CLI

El método más sencillo es usar el comando create astro que te guiará paso a paso.

Saber Más..

1. Crear un nuevo proyecto

npm create astro@latest

Puedes usar también pnpm create astro@latest o yarn create astro@latest.

Este asistente te preguntará:

Nombre del proyecto.
Plantilla inicial (blog, portfolio, landing, etc.).
Si quieres instalar dependencias de inmediato.
Opciones adicionales como inicializar Git.

2. Entrar en la carpeta del proyecto

cd nombre-del-proyecto

3. Instalar dependencias (si no lo hiciste antes)

npm install

4. Iniciar el servidor de desarrollo

npm run dev

Tu sitio estará disponible en `http://localhost:4321` con recarga en vivo.

Usar integraciones y plantillas

Puedes crear un proyecto con integraciones oficiales o de la comunidad desde el principio:

npm create astro@latest -- --add react --add partytown

O basarte en una plantilla oficial o repositorio de GitHub:

npm create astro@latest -- --template blog
npm create astro@latest -- --template usuario/repositorio

Instalación manual

Si no quieres usar el asistente, también puedes hacerlo a mano.

1. Crear carpeta y `package.json`

mkdir mi-proyecto-astro
cd mi-proyecto-astro
npm init --yes

2. Instalar Astro localmente

npm install astro

3. Configurar scripts en `package.json`

"scripts": {
  "dev": "astro dev",
  "build": "astro build",
  "preview": "astro preview"
}

4. Crear tu primera página

Archivo: src/pages/index.astro

---
console.log('Esto se ejecuta en el servidor, no en el navegador');
---
<html>
  <body>
    <h1>¡Hola, Astro!</h1>
  </body>
</html>
<style>
  h1 { color: orange; }
</style>

5. Añadir recursos estáticos

Archivo: public/robots.txt

User-agent: *
Allow: /

6. Crear configuración básica

Archivo: astro.config.mjs

import { defineConfig } from "astro/config";
export default defineConfig({});

7. Añadir soporte TypeScript (opcional pero recomendado)

Archivo: tsconfig.json

{
  "extends": "astro/tsconfigs/base"
}

Estructura final del proyecto

mi-proyecto-astro/
│── node_modules/
│── public/
│   └── robots.txt
│── src/
│   └── pages/
│       └── index.astro
│── astro.config.mjs
│── package.json
│── tsconfig.json

Conclusión

Si ya tienes Astro listo para crear un sitio rápido, optimizado y fácil de mantener.

Puedes comenzar desde una plantilla, añadir integraciones y construir páginas con HTML, Markdown y cualquier framework de UI que te guste.

CONSEJO: Cuanto antes configures tu proyecto con buenas prácticas de rendimiento (imágenes optimizadas, cero JS innecesario), antes empezarás a destacar en Google.