Instala Astro con el CLI automático
Prerrequisitos
Sección titulada Prerrequisitos- Node.js -
v18.17.1ov20.3.0o superior. (Lav19no 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
Sección titulada Instalacióncreate 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ónEjecuta el siguiente comando en tu terminal para iniciar el asistente de instalación:
# crea un nuevo proyecto con npmnpm create astro@latest# crea un nuevo proyecto con pnpmpnpm create astro@latest# crea un nuevo proyecto con yarnyarn create astroPuedes 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.
npm run devpnpm run devyarn 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
Sección titulada Plantillas de InicioPuedes 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 oficialnpm create astro@latest -- --template <example-name>
# crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHubnpm create astro@latest -- --template <github-username>/<github-repo># crea un nuevo proyecto a partir de un ejemplo oficialpnpm create astro@latest --template <example-name>
# crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHubpnpm create astro@latest --template <github-username>/<github-repo># crea un nuevo proyecto a partir de un ejemplo oficialyarn create astro --template <example-name>
# crea un nuevo proyecto basado en la rama `main` de un repositorio de GitHubyarn 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
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.