Instala Astro

El comando de la CLI create astro es la forma más rápida de iniciar un nuevo proyecto Astro desde cero. Te guiará paso a paso por la configuración de tu nuevo proyecto Astro y te permitirá elegir entre varias plantillas oficiales de inicio.

También puedes ejecutar el comando de la CLI con el parámetro template para iniciar tu proyecto usando cualquier tema o plantilla inicial ya existente. ¡Echa un vistazo a nuestra galería de temas y plantillas iniciales, donde podrás explorar temas para blogs, portafolios, sitios de documentación, páginas de destino y mucho más!

Para instalar Astro manualmente, consulta nuestra guía de instalación manual paso a paso.

Prerrequisitos

Node.js - v22.12.0 o superior. No se admiten las versiones impares, como v23.
Editor de texto - Recomendamos VS Code junto con nuestra extensión oficial de Astro.
Terminal - Astro se ejecuta a través de su interfaz de línea de comandos (CLI).

Compatibilidad con navegadores

Astro está desarrollado con Vite, que está pensado para navegadores que admiten JavaScript moderno de forma predeterminada. Para obtener información completa, puedes consultar la lista de versiones de navegadores soportados actualmente en Vite.

Instala desde el asistente CLI

Puedes ejecutar create astro en cualquier lugar de tu máquina, por lo que no es necesario crear un nuevo directorio vacío para tu proyecto antes de empezar. Si aún no tienes un directorio vacío para tu nuevo proyecto, el asistente te ayudará a crear uno automáticamente.

Ejecuta el siguiente comando en tu terminal para iniciar el asistente de instalación:
- npm
- pnpm
- Yarn
Terminal window
# crea un nuevo proyecto con npm npm create astro@latest
Terminal window
# crea un nuevo proyecto con pnpm pnpm create astro@latest
Terminal window
# crea un nuevo proyecto con yarn yarn create astro
Si todo va bien, verás un mensaje de éxito seguido de siguientes pasos recomendados.
Ahora que tu proyecto ha sido creado, puedes navegar usando cd a tu nueva carpeta para comenzar a usar Astro.
Si te has saltado el paso “¿Instalar dependencias?” durante el asistente de la CLI, asegúrate de instalar las dependencias antes de continuar.
- npm
- pnpm
- Yarn
Terminal window
npm install
Terminal window
pnpm install
Terminal window
yarn install
Ahora puedes iniciar el servidor de desarrollo de Astro y ¡ver una vista previa en vivo de tu proyecto mientras lo construyes!

Opciones de instalación de CLI

Puedes ejecutar el comando create astro con opciones adicionales para personalizar el proceso de configuración (p. ej., responder “yes” a todas las preguntas, omitir la animación de Houston) o tu nuevo proyecto (p. ej., instalar Git o no, añadir integraciones).

Consulta todas las opciones disponibles del comando create astro.

Agregar integraciones

Puedes iniciar un nuevo proyecto Astro e instalar al mismo tiempo cualquier integración oficial (EN) o integración de la comunidad que admita el comando astro add, pasando el argumento --add al comando create astro.

Ejecuta el siguiente comando en tu terminal, sustituyendo cualquier integración que admita el comando astro add:

# crea un nuevo proyecto con React y Partytown
npm create astro@latest -- --add react --add partytown

# crea un nuevo proyecto con React y Partytown
pnpm create astro@latest --add react --add partytown

# crea un nuevo proyecto con React y Partytownn
yarn create astro --add react --add partytown

Usa un tema o una plantilla de inicial

Puedes iniciar un nuevo proyecto Astro basado en un ejemplo oficial o en la rama main de cualquier repositorio de GitHub, pasando el argumento --template al comando create astro.

Ejecuta el siguiente comando en tu terminal, sustituyendo el nombre de la plantilla oficial de Astro para principiantes, o el nombre de usuario de GitHub y el repositorio del tema que quieras utilizar:

# crea un nuevo proyecto con un ejemplo oficial
npm create astro@latest -- --template <nombre-ejemplo>

# crea un nuevo proyecto basado en la rama principal de un repositorio de GitHub
npm create astro@latest -- --template <usuario-github>/<repositorio-github>

# crea un nuevo proyecto con un ejemplo oficial
pnpm create astro@latest --template <nombre-ejemplo>

# crea un nuevo proyecto basado en la rama principal de un repositorio de GitHub
pnpm create astro@latest --template <usuario-github>/<repositorio-github>

# crea un nuevo proyecto con un ejemplo oficial
yarn create astro --template <nombre-ejemplo>

# crea un nuevo proyecto basado en la rama principal de un repositorio de GitHub
yarn create astro --template <usuario-github>/<repositorio-github>

Por defecto, este comando usará la plantilla de la rama main del repositorio. Para usar el nombre de otra rama, indícalo como parte del argumento --template: <usuario-github>/<repositorio-github>#<rama>.

Configuración manual

Esta guía te explicará paso a paso cómo instalar y configurar manualmente un nuevo proyecto Astro.

Si prefieres no usar nuestra CLI create astro, puedes configurar tu proyecto tú mismo siguiendo la guía que aparece a continuación.

Create your directory

Crea un directorio vacío con el nombre de tu proyecto y, a continuación, accede a él.
Terminal window
```
mkdir my-astro-project
cd my-astro-project
```
Una vez que estés en tu nuevo directorio, crea el archivo package.json de tu proyecto. Así es como gestionarás las dependencias de tu proyecto, incluido Astro. Si no estás familiarizado con este formato de archivo, ejecuta el siguiente comando para crear uno.
- npm
- pnpm
- Yarn
Terminal window
npm init --yes
Terminal window
pnpm init
Terminal window
yarn init --yes
Instala Astro

En primer lugar, instala las dependencias de Astro en tu proyecto.

Astro debe instalarse localmente, no globalmente. Asegúrate de que no estás ejecutando npm install -g astro, pnpm add -g astro ni yarn add global astro.
- npm
- pnpm
- Yarn
Terminal window
npm install astro
Terminal window
pnpm add astro
Terminal window
yarn add astro
A continuación, sustituye cualquier sección de “scripts” que haya en tu archivo package.json por lo siguiente:
package.json
```
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
}
```
Más adelante en esta guía usarás estos scripts para iniciar Astro y ejecutar sus distintos comandos.

Crea tu primera página

En tu editor de texto, crea un nuevo archivo en el directorio src/pages/index.astro. Esta será tu primera página Astro del proyecto.

Para esta guía, copia y pega el siguiente fragmento de código (incluidos los guiones ---) en tu nuevo archivo:

---
// ¡Bienvenido a Astro! Todo lo que hay entre estas tres barras de código
// Es el "frontmatter del componente". Nunca se ejecuta en el navegador.
console.log('¡Esto se ejecuta en tu terminal, no en el navegador!');
---
<!-- A continuación tienes tu "plantilla de componente". Es simplemente HTML, pero con
    un toque de magia para ayudarte a crear plantillas geniales. -->
<html>
  <body>
    <h1>¡Hola, Mundo!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

Crea tu primer recurso estático

También te conviene crear un directorio public/ para almacenar tus recursos estáticos. Astro siempre incluirá estos recursos en la compilación final, por lo que puedes hacer referencia a ellos con total seguridad desde las plantillas de tus componentes.

En tu editor de texto, crea un nuevo archivo en tu directorio en public/robots.txt. robots.txt es un archivo sencillo que la mayoría de los sitios web incluyen para indicar a los robots de búsqueda, como el de Google, cómo deben tratar tu sitio web.

Para esta guía, copia y pega el siguiente fragmento de código en tu nuevo archivo:
public/robots.txt
```
# Ejemplo: Permite que todos los bots rastreen e indexen tu sitio web.
# Sintaxis completa: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```
Crea astro.config.mjs

Astro se configura mediante el archivo astro.config.mjs. Este archivo es opcional si no necesitas configurar Astro, pero quizá quieras crearlo ahora.

Crea el archivo astro.config.mjs en la raíz de tu proyecto y copia el código que aparece a continuación:
astro.config.mjs
```
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```
Si quieres incluir componentes de framework UI (EN) como React, Svelte, etc., o usar otras herramientas como MDX o Partytown en tu proyecto, aquí es donde podrás importar y configurar manualmente las integraciones (EN).

Consulta la referencia de la API de configuración (EN) de Astro para obtener más información.
Agrega compatibilidad con TypeScript

TypeScript se configura mediante el archivo tsconfig.json. Aunque no escribas código en TypeScript, este archivo es importante para que herramientas como Astro y VS Code sepan cómo interpretar tu proyecto. Algunas funciones (como la importación de paquetes de npm) no son totalmente compatibles con el editor si no se dispone de un archivo tsconfig.json.

Si tienes intención de escribir código en TypeScript, se recomienda utilizar la plantilla strict o strictest de Astro. Puedes consultar y comparar las tres configuraciones de plantilla en astro/tsconfigs/.

Crea el archivo tsconfig.json en la carpeta raíz de tu proyecto y copia en él el código que aparece a continuación. (Puedes utilizar base, strict o strictest como plantilla de TypeScript):
tsconfig.json
```
{
  "extends": "astro/tsconfigs/base"
}
```
Lee la guía de configuración de TypeScript de Astro para obtener más información.
Siguientes pasos

Si has seguido los pasos anteriores, el directorio de tu proyecto debería tener ahora este aspecto:
- Directorionode_modules/
  - …
- Directoriopublic/
  - robots.txt
- Directoriosrc/
  - Directoriopages/
    index.astro
- astro.config.mjs
- package-lock.json or yarn.lock, pnpm-lock.yaml, etc.
- package.json
- tsconfig.json
¡Ahora puedes iniciar el servidor de desarrollo de Astro y ver una vista previa en tiempo real de tu proyecto mientras lo compilas!

Contribuir Comunidad Patrocinador