Crear tu primer proyecto en Astro es más sencillo de lo que parece cuando entiendes la estructura base que este framework propone. Aquí descubrirás cómo preparar tu entorno, qué carpetas componen un proyecto y cómo levantar tu portafolio en pocos minutos.

¿Qué necesitas para empezar a trabajar con Astro?

Antes de escribir una sola línea de código, conviene tener listas las herramientas mínimas que te darán fluidez durante todo el desarrollo.

• Un editor de código como Visual Studio Code o el que prefieras.
• Manejo básico de la terminal o Bash para moverte entre carpetas y ejecutar comandos.
• Un navegador como Google Chrome para visualizar tu entorno de desarrollo local.

Con estas tres piezas en su lugar, ya puedes ejecutar el cliente de línea de comandos que Astro ofrece para generar un proyecto totalmente configurado, sin tener que crear desde cero la carpeta, inicializar Git ni montar dependencias manualmente [01:38].

¿Cómo está organizada la estructura de un proyecto en Astro?

La estructura que entrega Astro es predecible y modular. En la raíz encontrarás archivos de configuración fundamentales que definen cómo se ejecuta, compila y despliega tu sitio.

• gitignore para indicar qué archivos no se suben al repositorio.
• astro.config con la configuración principal del framework.
• package.json y package-lock.json para gestionar dependencias.
• README y la configuración base de TypeScript.

Dos carpetas aparecen en tono distinto porque están siendo ignoradas: .astro y node_modules. Esto sucede porque están listadas en el archivo .gitignore y no deben enviarse al repositorio [02:50].

¿Por qué node_modules no se sube al repositorio? Porque contiene todas las dependencias instaladas y se regenera con npm install. Subirla haría tu repositorio innecesariamente pesado.

¿Para qué sirve la carpeta public?

La carpeta public aloja archivos que se copian directamente a la carpeta de distribución cuando preparas tu proyecto para producción. Aquí viven imágenes, el archivo robots.txt y el sitemap en XML, fundamentales para cumplir con buenas prácticas de SEO y exponer el índice completo de páginas de tu aplicación [04:20].

Cuando alguien escriba tusitio.com/robots.txt, accederá a esos archivos porque son completamente públicos.

¿Qué contiene la carpeta src en Astro?

La carpeta src es donde vive todo el código fuente. Allí crearás componentes, layouts, páginas y estilos, separando cada elemento por su responsabilidad [05:10].

También verás carpetas con punto al inicio, como .vscode o .astro. En sistemas GNU/Linux ese punto indica archivos ocultos. La carpeta .vscode, por ejemplo, guarda configuraciones del editor que puedes compartir con tu equipo, incluyendo plugins recomendados que se sugerirán a quien abra el proyecto por primera vez [05:45].

¿Cómo se modulariza el código fuente dentro de src?

El desarrollo web moderno apuesta por dividir responsabilidades. Astro abraza esa filosofía y te da carpetas específicas para cada pieza.

• components: bloques reutilizables como header, footer o tarjetas. Más adelante conectarán con el patrón Astro Islands.
• content: archivos Markdown o MDX que funcionan como contenido sin necesidad de un backend o CMS.
• layouts: plantillas que envuelven páginas y permiten reutilizar estructura común.
• pages: secciones del sitio como la raíz, un 404 o About, con soporte para enrutamiento dinámico basado en el contenido.
• styles: hojas de estilo separadas por componente, plantilla o página.

Esta separación te permite que cada archivo cumpla una sola tarea. Sí, podrías hacer todo con HTML y CSS planos, pero perderías el performance, el empaquetado óptimo y la escalabilidad que aporta un framework como Astro [08:30].

¿Qué diferencia hay entre layouts y pages? Los layouts son plantillas reutilizables que definen estructura común. Las pages son las rutas reales del sitio y pueden usar uno o varios layouts.

¿Cómo crear tu primer proyecto Astro desde la terminal?

Abre tu terminal y ejecuta el comando que inicializa el scaffolding completo:

bash npm create astro@2.0.2 -- --template portfolio gnx.me

Este comando descarga el paquete create-astro en su versión 2.0.2, aplica el template portfolio y crea una carpeta llamada gnx.me. La nomenclatura de versiones sigue el estándar SemVer, que organiza los cambios en major, minor y patch para reflejar mejoras y correcciones [11:50].

Durante el proceso, el asistente te hará varias preguntas clave:

1. Instalar dependencias: responde sí para que descargue todo lo necesario en node_modules.
2. Inicializar repositorio Git: acepta siempre, incluso en proyectos de prueba. Versionar tu código es una práctica profesional indispensable.
3. Configurar TypeScript: elige strict para trabajar con la configuración recomendada. TypeScript se ha convertido en estándar dentro del desarrollo de software actual.

Una vez terminada la instalación, entra a la carpeta con cd gnx.me y abre el editor con code . para visualizar todo el árbol del proyecto [14:20].

¿Qué scripts trae el package.json y cómo levantar el servidor local?

Dentro de package.json encontrarás los comandos que usarás todos los días:

• dev: inicia el entorno de desarrollo local con Astro dev.
• build: compila el proyecto para producción con Astro build.
• preview: muestra una vista previa del sitio ya compilado.
• astro: ejecuta tareas específicas del CLI.

Los dos que más usarás son dev para desarrollar y build para preparar producción. La versión instalada es Astro 2.0.7 [15:40].

Para ver tu sitio, ejecuta:

bash npm run dev

El entorno se inicializa en cuestión de milisegundos y expone tu proyecto en localhost:3000. Abre esa ruta en tu navegador y verás la plantilla del portafolio lista para personalizar [16:30].

Este será tu reto al cerrar el curso: regresar a esta base, adaptarla con todo lo aprendido y publicar un portafolio que te abra puertas en el ecosistema del desarrollo. ¿Qué nombre le pondrás a tu carpeta de proyecto? Cuéntalo en los comentarios.