Astro es un nuevo framework que se puede usar específicamente para sitios web orientados al contenido (content-driven). Este tipo de sitio web puede ser un blog, un **e-commerce o cualquier monstruo de frankenstein que se le ocurra a marketing… espera, esto ya lo viví… 🏝️

Una de las características de Astro que le ha ayudado a adquirir mucha fama es su propuesta de las islas en la arquitectura del frontend, que reduce la complejidad y el tamaño del JS en comparación con otros frameworks. ⚡️

Los creadores de Astro dicen: si necesitas un sitio web que cargue rápido con un excelente SEO, Astro es para ti.

Astro posee un CLI muy interesante. Vamos a crear un nuevo proyecto con Astro para mirarlo más de cerca y conocer a Houston. 🤖

Recuerda que para seguir este tutorial, necesitas tener instalado Node.js en tu terminal y claro, no tenerle miedo. Aquí te dejo un video para que personalices tu terminal.

Ahora, vamos a utilizar el comando create astro para iniciar el CLI.

npm create astro@latest

Ahora que has seleccionado tus preferencias, deberíamos entrar al proyecto con cd probando-astro (utiliza el nombre de tu proyecto) y si no se han instalado las dependencias, no olvides correr npm i.

🖥️ Levantando el servidor

Ahora que tenemos un nuevo proyecto Astro, veamos que nos ofrece por default.

Levantaremos el servidor con el comando npm run dev que a su vez ejecuta astro dev.

Esto creará un servidor de desarrollo y podremos visitar: http://localhost:4321/

Podrás notar que cuando miras tu sitio web en el navegador, tienes acceso a la barra de desarrollo de Astro (dev toolbar). Esta barra nos ayudará a inspeccionar tus islas y a capturar problemas de accesibilidad más adelante.

📂 Estructura del proyecto

Podemos observar que tenemos lo mínimo esperado, nuestro par de archivos de configuración tanto de TS como de Astro mismo, utilizando el mismo pattern que Vite (de hecho, puedes pasarle configuración a Vite).

También encontraremos un par de carpetas public y src, donde colocaremos nuestros assets y nuestro código respectivamente.

Vamos a cambiar la página de bienvenida que se encuentra dentro de src/pages/index.astro.

// src/pages/index.astro

// ...

<h1>Hola  <span class="text-gradient">Blissmo! 🤓</span></h1>

// ...

Cambia el contenido del <h1> por lo que prefieras, y mira el cambio en el navegador. 👀

☄️ Otras formas de comenzar con Astro

Esta, claro, ¡no es la única manera de comenzar con este increíble framework! Puedes comenzar tu proyecto Astro con alguno de los muchos templates oficiales que te dejo aquí.

npm create astro@latest -- --template <github-username>/<github-repo>

Checa esta lista de templates que seguro alguno te va a encantar:

https://astro.build/themes/.

En esta ocasión, no iremos más profundo con Astro, pues solo estamos explorando superficialmente. Si te gustaría que creara más contenido sobre Astro o que aplicara algún theme, no dejes de decírmelo en los comentarios para escribírtelo. 😉

Abrazo. Bliss. 🤓

Enlaces Relacionados

Personaliza tu terminal

Astro templates