Actualizando el blog: De Nuxt 2 a Astro

Finalmente, decidí actualizar mi blog a algo más reciente. Con el tiempo, fui observando cómo se iba quedando obsoleto: tecnologías viejas, problemas de estilos y fallos en el diseño responsive. De hecho, cuando me dio por retomar el proyecto, ni siquiera podía correrlo localmente. Para entender el cambio, te doy un poco de contexto de cuando lo creé. 🏗️

El origen

El diseño de este blog lo realicé al principio de mi carrera como developer, allá por el 2019, cuando aún me encontraba en una pasantía. Mi idea era que, como todo recién egresado, el mayor obstáculo para conseguir el primer trabajo sería la falta de experiencia. Para compensarlo, pensaba diseñar y maquetar el blog para mostrar mis habilidades a los reclutadores.

Con esa poca experiencia, abrí Figma y empecé a diseñar cómo me imaginaba mi sitio personal. Recuerdo que busqué algunas inspiraciones y, finalmente, di con el diseño que ves en la portada de este artículo.

Podrás observar que no ha cambiado tanto, solo está un poco más refinado. Teniendo un diseño que me gustaba, tocaba realizar la maquetación. Para ese entonces, yo era un fanático absoluto de Vue.js. ¡Qué tiempos! 👴🏼

Luego de haber realizado algunos proyectos de la universidad con jQuery, me aventuré a aprender Vue y la respuesta a qué tecnología utilizar era clara. Pero existía un problema: el SEO. Usar solo Vue.js implicaba una SPA (Single Page Application). Investigando un poco, di con que un paso más arriba estaba Nuxt.js, que ya venía con Generación de Páginas Estáticas (SSG) y renderizado del servidor (SSR). Me sonó perfecto para el blog; lo único que necesitaría eran las páginas estáticas.

El stack original

Ya en mi pasantía aprendí Stylus. Me gustó cómo con este preprocesador no era necesario escribir las llaves {}, solo mantener la tabulación correcta; tampoco eran necesarios los puntos y coma ; e incluso venía con variables, cosa que en ese entonces CSS no tenía nativamente. Todo sonaba como una situación win-win para mí. Buscando algo parecido para el HTML, di con el motor de plantillas Pug.js. La idea era la misma: escribir etiquetas HTML sin tener que cerrarlas, basándose en la tabulación.

Con eso, definí el conjunto de tecnologías que utilizaría:

• Nuxt.js (v2)
• Stylus
• Pug.js

En su momento cumplió su objetivo. De hecho, recuerdo que ya tenía la maquetación realizada y funcional cuando quise traerlo a colación en una entrevista de trabajo. El entrevistador preguntó: “¿Dónde puedo verlo?”. Yo todavía no había encontrado dónde desplegarlo. Siendo un egresado sin trabajo, no me podía dar el lujo de costear un servicio de pago, por muy barato que fuera.

Luego de rebuscar, me enteré de que podía desplegarlo directamente en GitHub Pages; mientras fueran páginas estáticas, podrían visitarse perfectamente. Así que compré mi primer dominio, abdielmartinez.com, y procedí al deploy. 🚀

Para la siguiente entrevista ya lo tenía en línea. Pude mostrárselo al entrevistador y tuvo buenos resultados, pues conseguí ese primer empleo que andaba buscando.

El abandono y el intento fallido (2024)

Y así dejé abandonado el blog por unos 5 años… 📉 Lo único que hice en ese tiempo fue cambiar el dominio: en el 2021 pasó de llamarse abdielmartinez.com a abdiel.dev, debido a que me gustó mucho más este nuevo dominio; corto y a la vez indicaba con el .dev que era contenido de desarrollo.

Ya para octubre de 2024 quise retomarlo, esta vez por hobby.

Cuánto había cambiado yo para ese entonces. No había vuelto a tocar Vue.js en años; Stylus y Pug.js no habían llegado a ser trending y muy pocos los utilizaban. Para ese momento, mi perfil era más de React.js (no es que me dejara de gustar Vue, simplemente el mercado demandaba más React).

Habiéndome bajado el proyecto de nuevo para escribir un nuevo artículo, mi problema era que no podía siquiera correrlo: daba errores por todos lados. Supuse que era la versión de Node.js, así que empecé a bajar de versión: probé con la v20 (nada), v18 (nada), hasta que conseguí hacerlo funcionar en la v16. 💀

Me dio por revisar si podía actualizar Nuxt.js. Hoy estamos en la versión 3 y yo estaba en la 2, y lamentablemente no había una migración sencilla. Para no perder más tiempo y por fin empezar a escribir, dejé de lado la migración, solventé un par de issues de CSS, escribí el artículo y publiqué.

Pero la idea de migrar el blog se me quedó grabada en la mente.

La Migración: Astro + Google Antigravity

Así pasó casi otro año sin volver a escribir. Medité si migrarlo a Next.js, ahora completamente en el entorno de React, pero finalmente di con Astro, que era perfecto para la generación de páginas estáticas y el rendimiento. Además, en realidad yo quería probar una tecnología nueva.

Aun habiendo establecido que lo haría con Astro, lo fui posponiendo, hasta que llegó Google Antigravity, el nuevo IDE de Google orientado a agentes de AI. Ya tenía otra excusa para realizar la migración: probar Astro, probar Antigravity y darle al blog el upgrade que de veras necesitaba.

Así que este viernes 28 de noviembre, finalmente empecé con la migración. Ya me había pasado algunos días hojeando la documentación de Astro y tenía una buena idea de cómo funcionaba, así que creé un nuevo proyecto, lo puse junto al viejo y lo abrí en el nuevo IDE. 🤖

Tenía claro varias cosas que quería cambiar en la arquitectura:

• 🎨 Adiós Stylus: En lugar de CSS escrito en Stylus y metodología BEM, migraría a Tailwind CSS.
• ⚛️ JSX sobre Pug: Ya no más Pug.js, ahora utilizaría sintaxis JSX/TSX.
• 🐍 Reemplazo de dependencias: Para ver el progreso de lectura estaba utilizando vue-cobra. Al no usar Vue, tocaría migrarlo a otra dependencia o implementarlo vanilla.
• 🌙 Dark Mode Only: Retiraría el tema claro del blog. Solo mantendría el tema oscuro.
• 🇺🇸 No más Spanglish: Redacté en el prompt que todos los nombres de variables, comentarios y componentes debían escribirse en inglés. En el código original escribía en spanglish (no me juzguen, era muy junior en ese entonces).
• ts TypeScript: Otro detalle importante es que en su momento yo era hater de TypeScript; sentía que este me frenaba y lo hice completamente en JS vanilla. Ahora reconozco los beneficios de TypeScript y quería el blog correctamente tipado.

El resultado

Gracias a Antigravity, luego de varias iteraciones que me habrán tomado 1 o 2 horas, había migrado razonablemente bien el grueso del blog. Hubo únicamente un par de estilos que no estaban funcionando correctamente y algunos ajustes que quise realizar a mano.

Para que se den una idea del cambio, así se veía el componente de las etiquetas en el blog original:

Nuxt 2 con Pug.js y Stylus

<template lang="pug">
  .tags
    nuxt-link( v-for='(tag, index) of tags' :to='`/tag/${tag.toLowerCase()}`' :key='index') {{tag}}
</template>
<script>
export default {
  props: {
    tags: { type: Array, required: true },
  },
};
</script>

<style lang="stylus">
.tags
    display flex
    flex-wrap wrap
    gap 5px
.tags a
    color white !important
    padding 2px 12px
    text-decoration none
    background linear-gradient(144.56deg, #00E27B 4.62%, #00A6BE 137.38%)
    border-radius: 13px
</style>

Y así quedó luego de la migración a Astro y Tailwind CSS:

Astro con JSX y Tailwind CSS

---
interface Props {
  tags: string[];
}

const { tags } = Astro.props;
---

<div class="flex flex-wrap gap-[5px]">
  {
    tags.map((tag) => (
      <a
        href={`/tag/${tag.toLowerCase()}`}
        class="text-white px-[12px] py-[2px] no-underline rounded-[13px] bg-gradient-to-r from-accent-green to-accent-blue"
      >
        {tag}
      </a>
    ))
  }
</div>

Es curioso como ni siquiera el syntax highlighting consigue resaltar la sintaxis de Pug.js y Stylus correctamente. 😅

El último ajuste fue agregar Umami para llevar un seguimiento de las interacciones y visitas de forma respetuosa con la privacidad.

Y así estoy relanzando el blog: con una imagen más refinada, mejor rendimiento, tecnología nueva y, sobre todo, con el aprendizaje que me llevo del proceso. ✨

Ahora es tu turno: ¿Cuál ha sido la migración más drástica que has hecho? ¿También te costó soltar tecnologías antiguas como Pug.js o jQuery? Te leo en los comentarios.