Instala Astro con el CLI automático

Prerrequisitos

Node.js - v18.17.1 o v20.3.0 o superior. (La v19 no es soportada).
Editor de código - Recomendamos VS Code con nuestra extensión oficial de Astro.
Terminal - Astro es usado a través de la interfaz de línea de comandos (CLI).

Instalación

create astro es la forma más rápida y fácil de comenzar un nuevo proyecto en Astro. Serás guiado paso a paso para configurar tu nuevo proyecto de Astro. Podrás elegir entre algunas plantillas de inicio oficiales o puedes usar cualquier proyecto existente en GitHub con el argumento --template.

1. Ejecuta el Asistente de Configuración

Ejecuta el siguiente comando en tu terminal para iniciar el asistente de instalación:

# crea un nuevo proyecto con npm
npm create astro@latest

# crea un nuevo proyecto con pnpm
pnpm create astro@latest

# crea un nuevo proyecto con yarn
yarn create astro

Puedes ejecutar create astro en cualquier carpeta de tu computadora, así que no es necesario crear un directorio vacío antes de inicializar tu proyecto. Si aún no tienes un directorio designado para tu nuevo proyecto, el asistente creará uno por ti.

Si todo ha salido bien, deberías ver un mensaje “Liftoff confirmed. Explore your project!” seguido de algunas recomendaciones de próximos pasos, “Next steps”. Entra en el nuevo directorio de tu proyecto usando cd y empieza a utilizar Astro.

Si has omitido el paso de npm install durante el asistente CLI, asegúrate de instalar las dependencias antes de continuar.

2. Inicia Astro ✨

Astro posee un servidor de desarrollo que tiene todo lo que necesitas para desarrollar tu proyecto. El comando astro dev iniciará el servidor de desarrollo local para que veas tu nuevo proyecto en acción por primera vez.

Cada plantilla de inicio posee un script preconfigurado que ejecutará astro dev por ti. Utiliza tu gestor de paquetes favorito para ejecutar este comando e iniciar el servidor de desarrollo de Astro.

npm run dev

pnpm run dev

yarn run dev

¡Si todo marcha bien, Astro deberá servir tu proyecto localmente en http://localhost:4321!

Astro escuchará cualquier cambio en la carpeta src/ y actualizará automáticamente tu proyecto. De esta forma, no será necesario reiniciar el servidor local durante el desarrollo.

Cuando visualices tu sitio en el navegador, tendrás acceso a la barra de herramientas de desarrollo de Astro. A medida que construyas, te ayudará a inspeccionar tus islas, detectar problemas de accesibilidad y mucho más.

Si no es posible abrir el proyecto en el navegador, regresa a la terminal donde has ejecutado el comando dev y chequea si ha ocurrido algún error o si tu proyecto está siendo servido en una URL diferente a la mencionada anteriormente.

Plantillas de Inicio

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

# crea un nuevo proyecto a partir de un ejemplo oficial
npm create astro@latest -- --template <example-name>

# crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
npm create astro@latest -- --template <github-username>/<github-repo>

# crea un nuevo proyecto a partir de un ejemplo oficial
pnpm create astro@latest --template <example-name>

# crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
pnpm create astro@latest --template <github-username>/<github-repo>

# crea un nuevo proyecto a partir de un ejemplo oficial
yarn create astro --template <example-name>

# crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHub
yarn create astro --template <github-username>/<github-repo>

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

Explora nuestros temas y proyectos de inicio donde puedes navegar por temas para blogs, portafolios, documentación, páginas de inicio y más. ¡O, busca en GitHub para más proyectos de inicio!

Siguientes pasos

¡Felicidades! ¡Estás listo para empezar a desarrollar con Astro! 🥳

Estos son algunos temas que recomendamos explorar luego. Puedes leerlos en el orden que más te guste. También puedes dejar la documentación a un lado e ir a jugar un poco con el código de tu nuevo proyecto Astro y volver cuando tengas algún problema o alguna duda.

Entiende tu base de código Aprende más sobre la estructura de archivos de Astro en nuestra Guía de Estructura del Proyecto.

Añade un framework Aprende cómo extender Astro con soporte para React, Svelte, Tailwind y más, usando npx astro add en nuestra Guía de integraciones

Despliega tu sitio Aprende cómo construir y desplegar tu proyecto de Astro en la web con nuestra Guía de despliegue.

Edita esta página Translate