Instalar Astro

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

También puedes ejecutar el comando de la CLI con el flag template para comenzar tu proyecto utilizando cualquier tema o plantilla de inicio existente. ¡Explora nuestro catálogo de temas y plantillas de inicio donde puedes buscar temas para blogs, portafolios, sitios de documentación, páginas de destino y más!

Para instalar Astro de forma manual en su lugar, consulta nuestra guía de instalación manual paso a paso.

Requisitos previos

Node.js - v22.12.0 o superior. Las versiones impares como v23 no son compatibles.
Editor de texto - Recomendamos VS Code con nuestra extensión oficial de Astro.
Terminal - Se accede a Astro a través de su interfaz de línea de comandos (CLI).

Compatibilidad con navegadores

Astro está construido con Vite, que por defecto está dirigido a navegadores con soporte moderno de JavaScript. Para una referencia completa, puedes ver la lista de versiones de navegadores compatibles actualmente en Vite.

Instalar con el asistente de la 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 comenzar. 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
Ventana de la terminal
# create a new project with npm npm create astro@latest
Ventana de la terminal
# create a new project with pnpm pnpm create astro@latest
Ventana de la terminal
# create a new project with yarn yarn create astro
Si todo sale bien, verás un mensaje de éxito seguido de algunos pasos siguientes recomendados.
Ahora que se ha creado tu proyecto, puedes usar cd para ingresar al directorio de tu nuevo proyecto y comenzar a usar Astro.
Si te saltaste el paso “¿Instalar dependencias?” durante el asistente de la CLI, asegúrate de instalar tus dependencias antes de continuar.
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install
Ventana de la terminal
pnpm install
Ventana de la terminal
yarn install
¡Ahora puedes iniciar el servidor de desarrollo de Astro y ver una vista previa en vivo de tu proyecto mientras lo construyes!

Flags de instalación de la CLI

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

Consulta todos los flags disponibles del comando create astro.

Añadir integraciones

Puedes iniciar un nuevo proyecto de Astro e instalar cualquier integración oficial o de la comunidad que admita el comando astro add al mismo tiempo 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:

# create a new project with React and Partytown
npm create astro@latest -- --add react --add partytown

# create a new project with React and Partytown
pnpm create astro@latest --add react --add partytown

# create a new project with React and Partytown
yarn create astro --add react --add partytown

Usar un tema o plantilla de inicio

Puedes iniciar un nuevo proyecto de 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 de inicio oficial de Astro, o el usuario y repositorio de GitHub del tema que quieras usar:

# create a new project with an official example
npm create astro@latest -- --template <example-name>

# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template <github-username>/<github-repo>

# create a new project with an official example
pnpm create astro@latest --template <example-name>

# create a new project based on a GitHub repository’s main branch
pnpm create astro@latest --template <github-username>/<github-repo>

# create a new project with an official example
yarn create astro --template <example-name>

# create a new project based on a GitHub repository’s main branch
yarn create astro --template <github-username>/<github-repo>

Por defecto, este comando utilizará la rama main del repositorio de la plantilla. Para utilizar un nombre de rama diferente, pásalo como parte del argumento --template: <github-username>/<github-repo>#<branch>.

Configuración manual

Esta guía te guiará a través de los pasos para instalar y configurar manualmente un nuevo proyecto de Astro.

Si prefieres no utilizar nuestra herramienta automática de CLI create astro, puedes configurar tu proyecto tú mismo siguiendo la guía a continuación.

Crea tu directorio

Crea un directorio vacío con el nombre de tu proyecto y luego navega dentro de él.
Ventana de la terminal
```
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 administrará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
Ventana de la terminal
npm init --yes
Ventana de la terminal
pnpm init
Ventana de la terminal
yarn init --yes
Instalar Astro

Primero, instala las dependencias del proyecto Astro dentro de tu proyecto.

Astro debe instalarse localmente, no de forma global. Asegúrate de no estar ejecutando npm install -g astro, pnpm add -g astro o yarn add global astro.
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install astro
Ventana de la terminal
pnpm add astro
Ventana de la terminal
yarn add astro
Luego, reemplaza cualquier sección de “scripts” de marcador de posición de tu package.json con lo siguiente:
package.json
```
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
}
```
Usarás estos scripts más adelante en la guía para iniciar Astro y ejecutar sus diferentes comandos.

Crea tu primera página

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

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

---
// Welcome to Astro! Everything between these triple-dash code fences
// is your "component frontmatter". It never runs in the browser.
console.log('This runs in your terminal, not the browser!');
---
<!-- Below is your "component template." It's just HTML, but with
    some magic sprinkled in to help you build great templates. -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

Crea tu primer recurso estático

También querrás crear un directorio public/ para almacenar tus recursos estáticos. Astro siempre incluirá estos recursos en tu compilación final, por lo que puedes hacer referencia a ellos de forma segura desde el interior de 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 simple que la mayoría de los sitios incluirán para indicarle a los bots de búsqueda como Google cómo tratar tu sitio.

Para esta guía, copia y pega el siguiente fragmento de código en tu nuevo archivo:
public/robots.txt
```
# Example: Allow all bots to scan and index your site.
# Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```
Crear astro.config.mjs

Astro se configura usando astro.config.mjs. Este archivo es opcional si no necesitas configurar Astro, pero es posible que desees crearlo ahora.

Crea astro.config.mjs en la raíz de tu proyecto y copia el código de abajo en él:
astro.config.mjs
```
import { defineConfig } from "astro/config";

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

Lee la referencia de configuración de la API de Astro para obtener más información.
Añadir soporte de TypeScript

TypeScript se configura mediante tsconfig.json. Incluso si no escribes código TypeScript, este archivo es importante para que herramientas como Astro y VS Code sepan cómo entender tu proyecto. Algunas funciones (como las importaciones de paquetes de npm) no son totalmente compatibles en el editor sin un archivo tsconfig.json.

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

Crea tsconfig.json en la raíz de tu proyecto y copia el código de abajo en él. (Puedes usar base, strict o strictest para tu 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 verse así:
- Directorionode_modules/
  - …
- Directoriopublic/
  - robots.txt
- Directoriosrc/
  - Directoriopages/
    index.astro
- astro.config.mjs
- package-lock.json o 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 vivo de tu proyecto mientras lo construyes!

Contribuir Comunidad Patrocinar