Saltearse al contenido
Astro Astro

Instala Astro con el CLI automático

Prerrequisitos

Sección titulada Prerrequisitos
  • Node.js - v18.14.1 o mayor.
  • 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

Sección titulada 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

Sección titulada 1. Ejecuta el Asistente de Configuración

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

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

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 ✨

Sección titulada 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.

Terminal window
npm 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.

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

Sección titulada 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.

Terminal window
# 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>

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

Sección titulada 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.

📚 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 hacer el build y desplegar tu proyecto de Astro en la web con nuestra Guía de despliegue.

📚 Entiende el código base: Aprende más sobre la estructura de proyectos de Astro en nuestra Guía de estructura de proyectos.