Crear un proyecto en Astro desde cero te permite controlar cada configuración, integración y archivo sin depender de un template preexistente. Aquí aprenderás a inicializar astrobuild.tips, un proyecto colaborativo construido con el framework Astro, ideal para quienes quieren dominar el desarrollo web moderno con TypeScript y Tailwind.

Qué es astrobuild.tips y por qué construirlo en Astro

El proyecto astrobuild.tips es un sitio web colaborativo donde la comunidad comparte tips, mejoras y snippets de código relacionados con desarrollo web. La idea es que cada estudiante aporte contenido o mejoras, y al final el sitio se despliegue en producción para que cualquier persona aprenda Astro a través de aportes reales.

¿Qué es Astro? Es un framework web orientado al contenido que genera sitios rápidos por defecto, con soporte nativo para componentes, rutas basadas en archivos e integraciones como Tailwind o TypeScript.

La gracia de partir desde cero está en que vas tocando cada pieza: el enrutamiento, los layouts, los componentes y la configuración global. Nada de magia escondida. [0:45]

Cómo inicializo un proyecto Astro desde la terminal

Antes de escribir código, necesitas una carpeta contenedora. En el ejemplo, todo vive dentro de una carpeta llamada Develop, que funciona como espacio común para varios proyectos. [1:38]

Desde la terminal, ejecuta el comando de creación apuntando a una versión específica del CLI:

bash npm create astro@2.0.2 astrobuild.tips

Este comando hace dos cosas importantes:

• Crea la carpeta astrobuild.tips con la estructura base.
• Lanza el asistente interactivo de Astro para configurar el proyecto.

No se pasa ningún flag adicional, lo que significa que el asistente te preguntará paso a paso qué quieres incluir. [2:10]

Qué opciones elegir en el asistente de Astro

Durante la inicialización, el CLI te ofrece varias decisiones. Estas son las recomendadas para seguir el proyecto:

• Elegir la opción recomendada como punto de partida (proyecto vacío con buenas prácticas).
• Aceptar la instalación automática de dependencias.
• Activar el repositorio de Git desde el inicio.
• Usar TypeScript con la configuración recomendada.

¿Por qué activar TypeScript desde el inicio? Porque te da autocompletado, validación de tipos y menos errores en tiempo de ejecución, sobre todo cuando el proyecto crece con múltiples componentes y rutas.

Es probable que veas un warning sobre la API experimental Fetch en versiones recientes de Node. No afecta la instalación, así que puedes continuar tranquilo. [2:55]

Cómo levanto el entorno de desarrollo local

Una vez creado el proyecto, entra a la carpeta y abre tu editor:

bash cd astrobuild.tips code .

Luego inicia el servidor de desarrollo:

bash npm run dev

Esto habilita el espacio de trabajo en localhost:3000, donde verás la página base que Astro genera por defecto, con accesos a documentación, integraciones, comunidad y templates. [4:20]

Qué estructura tiene un proyecto Astro recién creado

Al abrir la carpeta src en tu editor, vas a notar que el proyecto está casi vacío comparado con uno que parte de un template. La estructura inicial incluye:

• Un archivo index que actúa como única ruta.
• Un único layout base.
• Un solo componente, normalmente llamado Card.
• El archivo astro.config, donde se activan plugins e integraciones.
• La configuración de TypeScript lista para usar.

El archivo astro.config es la pieza central de personalización. Ahí defines integraciones como Tailwind, comportamientos de build y plugins que extienden lo que Astro puede hacer. [4:55]

Por qué tu Visual Studio Code se ve diferente

Si notas que tu editor no muestra los iconos de archivos .astro o no los reconoce visualmente, la respuesta está en la carpeta .vscode del proyecto. Dentro vive un archivo llamado extensions.json que recomienda las extensiones necesarias para trabajar con Astro.

¿Para qué sirve la carpeta .vscode en un proyecto? Comparte configuraciones y recomendaciones de extensiones entre todos los colaboradores, asegurando que cualquiera que clone el repositorio tenga el mismo entorno visual y funcional.

Instalar la extensión recomendada te permite ver el icono de Astro, sintaxis resaltada y soporte completo de los archivos .astro. Por eso es una buena práctica versionar esa carpeta junto con el resto del proyecto. [5:40]

Qué viene después en astrobuild.tips

Con el proyecto inicializado y corriendo en local, el siguiente paso es sumar la primera integración: Tailwind CSS. Esto te permite manejar estilos sin escribir CSS desde cero y enfocarte en la lógica del sitio, el contenido y el enrutamiento.

A partir de aquí, el proyecto irá ganando secciones, rutas dinámicas, componentes reutilizables y, eventualmente, despliegue a producción.

¿Qué tip o sección te gustaría que existiera en astrobuild.tips? Cuéntalo en los comentarios para que la comunidad lo construya contigo.