Instalación y primer proyecto Astro

Configura tu entorno y crea tu primer proyecto Astro con una estructura limpia desde el inicio.

Una buena instalación evita problemas invisibles más adelante: versiones, scripts y estructura importan.

Vamos a crear un proyecto base con comandos oficiales para tener un punto de partida robusto.

También verás qué archivos mirar primero para entender cómo está montado Astro por dentro.

No vamos a correr: instalar bien una vez te ahorra horas de debugging después.

  • Sigue una secuencia clara y repetible.
  • Usa Node LTS estable.
  • Acepta plantilla mínima para aprender estructura real.
  • Confirma que el servidor levanta en local sin errores.
  • Antes de programar, ubícate.

Pasos de instalación recomendados

Sigue una secuencia clara y repetible.

  • Usa Node LTS estable.
  • Acepta plantilla mínima para aprender estructura real.
  • Confirma que el servidor levanta en local sin errores.

Carpetas que debes conocer

Antes de programar, ubícate.

  • src/pages: rutas del sitio.
  • src/components: componentes reutilizables.
  • public: archivos estáticos.
  • astro.config.*: configuración del proyecto.
Astro
02

Instalación y primer proyecto Astro

Configura tu entorno y crea tu primer proyecto Astro con una estructura limpia desde el inicio.

Código del tema: Componentes Astro + render hibrido

📘 Teoría

Pasos de instalación recomendados

Sigue una secuencia clara y repetible.

  • Usa Node LTS estable.
  • Acepta plantilla mínima para aprender estructura real.
  • Confirma que el servidor levanta en local sin errores.
Comandos base
npm create astro@latest
cd mi-proyecto-astro
npm install
npm run dev

Carpetas que debes conocer

Antes de programar, ubícate.

  • src/pages: rutas del sitio.
  • src/components: componentes reutilizables.
  • public: archivos estáticos.
  • astro.config.*: configuración del proyecto.

🧪 Aprende probando

Ejemplo Scripts típicos de package.json Comandos de trabajo más usados en fase inicial.

🏁 Retos

Reto Reto: flujo mínimo de arranque Escribe los comandos necesarios para crear y levantar Astro.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .