Saltearse al contenido

Crea tu primer proyecto en Astro

Prepárate para...

  • Ejecutar el asistente de configuración create astro para crear un nuevo proyecto Astro
  • Iniciar el servidor Astro en modo de desarrollo (dev)
  • Ver una vista previa en directo de tu sitio web en tu navegador

Inicia el asistente de configuración de Astro

Sección titulada Inicia el asistente de configuración de Astro

La forma preferida de crear un nuevo sitio Astro es a través de nuestro asistente de configuración create astro.

  1. En la línea de comandos de tu terminal, ejecuta el siguiente comando utilizando tu gestor de paquetes preferido:

    Ventana de terminal
    # crear un nuevo proyecto con npm
    npm create astro@latest

  2. Confirma y para instalar create-astro.

  3. Cuando la instrucción te pregunte “Where would you like to create your new project?”, escribe el nombre de una carpeta para crear un nuevo directorio para tu proyecto, por ejemplo ./tutorial

  4. Verás una pequeña lista de plantillas de inicio entre las que puedes elegir. Utiliza las teclas de flecha (arriba y abajo) para navegar hasta la plantilla “Empty” y luego presiona la tecla de retorno (Enter) para enviar tu elección.

  5. Cuando la instrucción te pregunte si planeas escribir TypeScript, escribe n.

  6. Cuando aparezca la pregunta “Would you like to install dependencies?”, escribe y.

  7. Cuando la instrucción te pregunte: “Would you like to initialize a new git repository?”, escribe y.

Cuando finalice el asistente de instalación, ya no necesitarás esta terminal. Ahora puedes abrir VS Code para continuar.

Abre tu proyecto en VS Code

Sección titulada Abre tu proyecto en VS Code

  1. Abre VS Code. Se te pedirá que abra una carpeta. Elige la carpeta que creaste durante el asistente de instalación.

  2. Si es la primera vez que abres un proyecto de Astro, deberías ver una notificación preguntándote si deseas instalar las extensiones recomendadas. Haz clic para ver las extensiones recomendadas y elige Astro language support extension. Esto proporcionará resaltado de sintaxis y autocompletado para tu código Astro.

  3. Asegúrate de que el terminal esté visible y que puedas ver el símbolo del sistema, por ejemplo:

    Ventana de terminal
    user@machine:~/tutorial$

Ahora puedes utilizar el terminal integrada en esta ventana, en lugar de la aplicación Terminal de tu ordenador, para el resto de este tutorial.

Ejecuta Astro en modo desarrollo

Sección titulada Ejecuta Astro en modo desarrollo

Para poder previsualizar los archivos de tu proyecto como un sitio web mientras trabajas, necesitarás que Astro se ejecute en modo desarrollo (dev).

Inicia el servidor de desarrollo

Sección titulada Inicia el servidor de desarrollo

  1. Ejecuta el comando para iniciar el servidor Astro dev escribiendo en el terminal de VS Code:

    Ventana de terminal
    npm run dev

    Ahora deberías ver la confirmación en el terminal que Astro está siendo ejecutando en modo dev. 🚀

Visualiza una vista previa de tu sitio web

Sección titulada Visualiza una vista previa de tu sitio web

Tus archivos de proyecto contienen todo el código necesario para mostrar un sitio web de Astro, pero el navegador es el responsable de mostrar tu código como páginas web.

  1. Haz clic en el enlace localhost en la terminal para ver una vista previa en directo de tu nuevo sitio web de Astro.

    (Astro utiliza http://localhost:4321 por defecto si el puerto 4321 está disponible).

    Este es el aspecto que debería tener el sitio web de inicio del “Proyecto vacío” de Astro en la vista previa del navegador:

    Una página en blanco con la palabra Astro en la parte superior.

Checklist

Sección titulada Checklist

Recursos

Sección titulada Recursos