DanLevy.net

Lecciones aprendidas al actualizar mi blog

¡Astro, Tailwind, MDX, Pagefind y más!

Recientemente, me embarqué en una travesía para actualizar mi sitio Gatsby v1 de más de 8 años.

Esta publicación compartirá algunas lecciones que aprendí durante el proceso y las tecnologías divertidas que exploré.

Tabla de contenidos

Requisitos del proyecto

Antes de sumergirme en la actualización, definí un conjunto de requisitos:

Dado que mi blog recibe un número de visitas diario muy variable, consideré que un sitio estáticamente pre‑generado ofrecería el rendimiento que buscaba sin añadir complejidad extra.

Además, necesitaba conservar el contenido y las funcionalidades existentes del sitio, incluyendo:

Eligiendo la pila tecnológica adecuada

A lo largo de los años he trabajado con muchas herramientas de sitios estáticos, desde Jekyll, Hugo, Slate y Gatsby. Así como con numerosos frameworks front‑end: Ember, Knockout, Angular, Vue y, por supuesto, React.

Así que, tengo literalmente demasiadas opciones, que finalmente reduje a Remix, Next.js y Astro,

Podría escribir una serie completa de blogs sobre mi proceso de evaluación, pero lo resumiré aquí:

Elegí Astro porque me permite hacer cosas significativas rápidamente.

Su diseño de API es refrescantemente simple. Es un gran equilibrio entre flexibilidad y buenas opiniones de diseño.

Resultó tranquilizador que Astro no tenga una inclinación evidente hacia la nube ni una agenda de framework.

Astro no fue la única tecnología que utilicé, aquí tienes un desglose completo de la pila:

Astro: Curva de aprendizaje y características clave

Astro se convirtió rápidamente en la piedra angular de mi actualización.

Aquí tienes algunas características clave que encontré particularmente útiles:

Algunas cosas resultaron un poco inesperadas, como el estilo alrededor del marcado inyectado por Astro y el efecto de display:contents.

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

Comparando .astro vs. Componentes Cliente

Los componentes de Astro son básicamente plantillas HTML con un potente patrón de componentes y props. Pueden obtener datos en tiempo de compilación, acceder a recursos de backend y mantener cierta información sensible oculta.

La mejor manera de entender los componentes .astro de Astro es compararlos y contrastarlos con los componentes del lado del cliente (React, Vue, Svelte, etc.).

¿Qué necesitas hacer?Componente .astroComponente Cliente
Generar HTML con patrón potente de plantilla+componente✅❌
Obtener datos en tiempo de compilación✅❌
Acceder a recursos de backend (directamente)✅❌
Mantener información sensible oculta (tokens de acceso, claves API, etc.)✅❌
Reducir JavaScript del lado del cliente✅❌
Usar componentes cliente (React, Vue, Svelte, etc.)✅✅
Añadir interactividad y escuchas de eventos (onClick(), onChange(), etc.)❌✅
Usar Estado y Efectos de Ciclo de Vida (useState(), useReducer(), useEffect(), etc.)❌✅
Usar APIs solo del navegador❌✅
Usar hooks personalizados que dependan de estado, efectos o APIs solo del navegador❌✅

CSS Moderno: ¡Guau!

Volviendo al desarrollo frontend, me entusiasmaron los avances en CSS nativo:

Búsqueda: Pagefind

Implementar una búsqueda en el sitio sin servicios de terceros ni alojamiento de bases de datos parecía un reto divertido. Después de todo, no es como si tuviera 10 000 publicaciones que indexar (todavía).

Mientras exploraba las integraciones de la comunidad de Astro me topé con una herramienta fantástica que desearía haber conocido antes: Pagefind.

Pocas herramientas resuelven un problema tan bien como Pagefind resuelve la búsqueda local en un sitio.

La simplicidad de implementar Pagefind es un placer. Puede integrarse con CUALQUIER contenido estático, y puedes decidir si usar una UI predeterminada o construir algo totalmente personalizado.

Resolvió de manera limpia todo lo que necesitaba. Sólo tomó minutos integrarlo, y la mayor parte del trabajo consistió en añadir una etiqueta <div id="search"></div> y algo de estilo.

Comentarios: Utterances

Desafortunadamente, tuve que despedirme de Disqus y de los comentarios que había acumulado durante muchos años.

Quería tener un mayor control y visibilidad sobre los scripts de terceros que se ejecutan en mi sitio.

Además, necesitaba que fuera algo simple y fácil de mantener.

Esto me llevó a elegir el fantástico servicio Utterances. Su sistema de comentarios basado en GitHub (issues) encaja bien con mi audiencia. Además, es fácil de configurar y gratuito.

Tailwind: Lamentos

Hay un único componente tecnológico del que cada vez me arrepiento más: Tailwind.

Con el tiempo, percibo la diferencia de coste entre escribir y mantener. Tailwind permite escribir rápidamente, pero una vez que la hoja de estilos se vuelve lo suficientemente compleja, puede resultar tedioso de leer y ampliar.

Conclusión

Actualizar mi antiguo sitio Gatsby v1 a una pila moderna construida alrededor de Astro fue una experiencia divertida. 10/10 lo recomendaría.

Si estás pensando en actualizar un sitio antiguo o en crear uno nuevo estático (o híbrido), recomiendo encarecidamente que le eches un vistazo a Astro. La curva de aprendizaje puede ser pronunciada en algunos momentos, pero los beneficios en términos de rendimiento, experiencia del desarrollador y futuro‑prueba del proyecto valen totalmente el esfuerzo.

Loading comments...