Lecciones Aprendidas al Actualizar Mi Blog
¡Astro, Tailwind, MDX, Pagefind y más!
Recientemente, me embarqué en un viaje para actualizar mi sitio Gatsby v1 de más de 8 años.
Este artículo compartirá algunas lecciones que aprendí durante este proceso y las interesantes tecnologías que exploré.
Table of Contents
- Project Requirements
- Choosing my Right Technology Stack
- Astro: Learning Curve and Key Features
- Modern CSS: Wow
- Search: Pagefind
- Comments: Utterances
- Tailwind: Regrets
- Conclusion
Project Requirements
Antes de sumergirme en la actualización, establecí un conjunto de requisitos:
Dado que mi blog recibe un número muy variable de visitas diarias, pensé que un sitio generado estáticamente me daría el rendimiento que buscaba sin complejidad adicional.
Además, necesitaba mantener el contenido y las características existentes de este sitio, incluyendo:
- Resaltado de código
- Comentarios
- Búsqueda en el sitio
- Componentes React preexistentes: Quiz UI, Gist embeds
- Formulario de contacto
- Imágenes responsivas
- Tiempo de carga inferior a 1 segundo
- Compatibilidad con navegadores: 2018+
- Despliegues automatizados + basados en PR
Choosing my Right Technology Stack
A lo largo de los años he trabajado con muchas herramientas de sitios estáticos, desde Jekyll, Hugo, Slate y Gatsby. Así como muchos frameworks front-end: Ember, Knockout, Angular, Vue y por supuesto React.
Así que tengo precisamente demasiadas opciones, que finalmente reduje a Remix, Next.js y Astro,
Podría escribir una serie completa de artículos sobre mi proceso de evaluación, pero lo resumiré aquí:
Elegí Astro por la rapidez con la que podía hacer cosas significativas.
El diseño de su API es refrescantemente simple. Es un gran equilibrio entre flexibilidad y buenas opiniones de diseño.
Fue un poco reconfortante que Astro carezca de cualquier sesgo obvio hacia la nube o agenda de framework.
Astro no fue la única tecnología que usé, aquí está el desglose completo del stack:
- Astro: Un generador de sitios estáticos moderno.
- ShadcnUI: Una colección de componentes reutilizables.
- Tailwind CSS: Un framework CSS utility-first.
- MDX: Contenido Markdown + componentes en línea.
- Pagefind: Biblioteca de búsqueda de sitios rápida, estática y sin conexión. ¡No hay necesidad de Algolia!
- Utterances: Sistema de comentarios basado en issues de GitHub.
- Netlify: Despliegues automatizados, formulario de contacto con captcha.
Astro: Learning Curve and Key Features
Astro se convirtió rápidamente en la piedra angular de mi actualización.
Estas son algunas características clave que encontré particularmente útiles:
- Archivos
.astro: A primera vista, los componentes Astro pueden parecer componentes React JSX, sin embargo son bastante diferentes y sirven a un conjunto diferente de objetivos. (Ver tabla comparativa abajo.) - Impulsado por sus propias herramientas de compilación en Golang y Vite: simplemente funciona. Maneja sin problemas ESM/CJS, TypeScript, empaquetado de código, estilos, imágenes, etc.
- Sin sesgo de framework ni sesgo de nube. (Tos Next.js, OpenNext)
- Renderizado estático vs. híbrido: Astro proporciona flexibilidad para apuntar a la mayoría de las plataformas cloud: AWS, GCP, Firebase, Netlify, Vercel, Cloudflare Pages, Azure, Fly.io, y muchas otras.
- Colecciones de contenido: La API
getCollectionsimplifica trabajar con archivos de contenido como fuente de datos. - Enrutamiento basado en archivos: El sistema de enrutamiento basado en archivos de Astro, combinado con
getStaticPaths, facilita la generación de páginas. - SEO: Astro no se interpone en tu camino, y solo emite una cantidad mínima de
detritusboilerplate (astro-island) cuando es necesario.
Algunas cosas fueron un poco sorprendentes, como el estilo alrededor del markup inyectado por Astro, y el efecto de display:contents.
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>Comparando componentes .astro vs. Client Components
Los componentes Astro son básicamente plantillas HTML con un potente patrón de componente y props. Pueden obtener datos en tiempo de compilación, acceder a recursos backend y mantener cierta información sensible oculta.
La mejor manera de entender los componentes .astro de Astro es comparar y contrastar con componentes del lado del cliente. (React, Vue, Svelte, etc.)
| ¿Qué necesitas hacer? | Componente .astro | Componente Cliente |
|---|---|---|
| Generar HTML con un potente patrón template+componente | ✅ | ❌ |
| Obtener datos en tiempo de compilación | ✅ | ❌ |
| Acceder a recursos 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 listeners de eventos (onClick(), onChange(), etc) | ❌ | ✅ |
Usar State y Lifecycle Effects (useState(), useReducer(), useEffect(), etc) | ❌ | ✅ |
| Usar APIs exclusivas del navegador | ❌ | ✅ |
| Usar custom hooks que dependen de state, effects, o APIs exclusivas del navegador | ❌ | ✅ |
Modern CSS: Wow
Al volver al desarrollo frontend, me deleitaron los avances en CSS nativo:
- Variables CSS: Disponibles desde hace un tiempo, y bastante estables entre navegadores desde 202*.
- Anidamiento: Finalmente en la especificación, y sin la sintaxis incómoda anterior. Ahora es similar a Less o SCSS.
- Nuevos selectores:
:is(),:where(), y:has()ofrecen un direccionamiento más preciso de elementos. - Unidades modernas como
ch,vw, y funciones comoclamp()proporcionan mejor control sobre layouts y tipografía. - Establecer espaciado de forma más natural con atributos
-inliney-block. Establecer padding o margin en el eje horizontal o vertical. En lugar demargin: 0 1rem 0 1rem→margin-inline: 1rem. - Layouts avanzados: Reaprendiendo CSS Grid. Vaya, hay un montón de cosas ahí. Puede ser abrumador con formas aparentemente infinitas de usarlo. Ten en cuenta que puedes arreglártelas descubriendo 1 o 2 formas. Consulta estos grandes recursos que me ayudaron a hacer trucos con grid: video de Kevin Powell: Learn CSS Grid the easy way, Responsive sin media queries, Diez layouts modernos en una línea de CSS.
Search: Pagefind
Implementar una búsqueda en el sitio sin servicios de terceros ni hosting de bases de datos parecía un desafío divertido. Después de todo, no es como si tuviera 10,000 artículos para indexar (todavía.)
Mientras navegaba por las integraciones de la comunidad de Astro me topé con una herramienta fantástica que desearía haber conocido antes: Pagefind.
Pocas herramientas resuelven cualquier problema tan bien como Pagefind resuelve la búsqueda local de sitios.
La simplicidad de implementar Pagefind es una delicia. Puede integrarse con CUALQUIER contenido de sitio estático, y puedes elegir si quieres una UI por defecto, o puedes construir cualquier cosa personalizada si lo prefieres.
Resolvió elegantemente todo lo que quería. Tomó solo minutos integrarlo, y la mayor parte del trabajo implicó añadir una etiqueta <div id="search"></div> y algo de estilo!
Comments: Utterances
Desafortunadamente, tuve que decir adiós a Disqus y a los comentarios que había acumulado durante muchos años.
Quería mejor control/visibilidad sobre los scripts de terceros en mi sitio.
Además, necesita ser simple y mantenible.
Esto me llevó a elegir el fantástico servicio Utterances. Su sistema de comentarios basado en GitHub se alinea bien con mi audiencia. Además, es fácil de configurar y gratuito.
Tailwind: Regrets
Solo hay una tecnología que lamento cada vez más haber usado: Tailwind.
Con el tiempo, puedo sentir la diferencia de costo entre escribir y mantener. Tailwind es tan rápido de escribir, sin embargo una vez que es lo suficientemente complejo, puede volverse tedioso de leer y extender.
Conclusion
Actualizar mi antiguo sitio Gatsby v1 a un stack moderno construido alrededor de Astro fue una experiencia divertida. 10/10 lo recomendaría.
Si estás considerando actualizar un sitio antiguo o construir un nuevo sitio estático (o híbrido), te recomiendo encarecidamente que mires Astro. La curva de aprendizaje puede ser empinada a veces, pero los beneficios en términos de rendimiento, experiencia de desarrollador y preparación futura de tu proyecto valen bien el esfuerzo.