Saltearse al contenido

Instala Astro con el CLI automático

  • 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).

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:

Ventana de terminal
# 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.

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.

Ventana de terminal
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.

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.

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.

Ventana de terminal
# 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!

¡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.

Contribute

¿Qué tienes en mente?

Community