Crear mi primer Página Web en AstroJS

Clase 3 de 14 • Curso de Desarrollo Web rápido con Astro

Clase anteriorSiguiente clase

Resumen

Para iniciar con éxito un proyecto en Astro, debes contar con herramientas clave instaladas: una versión de Node.js, un navegador como Google Chrome, Visual Studio Code como editor de código y una terminal adecuada. A partir de ahí, explorarás cómo organizar tus carpetas, instalar Astro y configurar tu proyecto para crear una tienda en línea usando este potente framework.

¿Qué herramientas necesitas para comenzar?

  • Node.js: Asegúrate de instalar la versión más reciente.
  • Navegador: Google Chrome u otro de tu preferencia.
  • Editor de código: Visual Studio Code es ideal.
  • Terminal: Usa una terminal que te resulte cómoda, como Warp.

Con estas herramientas instaladas, estarás listo para comenzar tu proyecto.

¿Cómo instalar Astro y configurar el entorno?

  1. Visita el sitio oficial de Astro:
    • Ve a Astro.build para obtener el comando de instalación.
  2. Organiza tus carpetas:
    • Crea una carpeta específica para tus proyectos, por ejemplo, laboratorios.
    • Dentro, crea subcarpetas según el proyecto: mkdir cursos y accede con cd cursos.
  3. Instala Astro:
    • Copia el comando desde el sitio oficial y pégalo en tu terminal.
    • Asigna un nombre a tu proyecto, por ejemplo, ladrillos.club.

¿Cómo configurar tu proyecto en Astro?

  1. Responde las opciones de configuración:
    • Selecciona archivos base para tu proyecto.
    • Habilita TypeScript para mayor robustez (opcional).
    • Escoge una configuración recomendada para mantener buenas prácticas.
  2. Inicializa el repositorio Git:
    • Asegúrate de inicializar tu proyecto con Git, incluso si no planeas subirlo a la nube de inmediato.

¿Cómo ejecutar tu entorno de desarrollo local?

  1. Instala las dependencias:
    • Astro descargará automáticamente los paquetes necesarios.
  2. Ejecuta el entorno local:
    • Usa el comando npm run dev para iniciar un servidor local.
    • Accede al proyecto en tu navegador, en una dirección como http://localhost:4321.

¿Qué pasos seguir para comenzar a construir?

  • Abre tu proyecto en Visual Studio Code con el comando code ..
  • Explora la estructura de carpetas y archivos.
  • Realiza tus primeros cambios en los archivos base.
  • Utiliza el entorno de desarrollo local para visualizar y depurar en tiempo real.