Selección De La Herramienta Para El Desarrollo De Este Blog

Introducción

Actualmente existen muchas formas en las que puedes desarrollar blogs y sitios web en general, desde Next.js o Astro, dos de las alternativas más completas que existen y en las cuales tienes la mayor libertad, hasta Wordpress, un CMS que te permite abstraerte de los detalles técnicos para que puedas enfocarte en tu contenido como tal. El objetivo con este artículo es mostrarte como yo concebí este blog para que puedas usar lo que te sirva y se adecúe al tuyo. Vamos a comenzar.

Generador de sitio estático

Como ingeniero de software apasionado que soy por lo que hago me gusta analizar las distintas alternativas y tratar de siempre desarrollar la mejor solución posible para el problema en cuestión. Esto suena bien, pero más de uno estará de acuerdo conmigo en que también es el motivo por el que muchas veces no terminamos los proyectos, y precisamente por esto decidí utilizar un generador de sitios estáticos (SSG) para este blog. Pero, ¿que es un SSG?

Un SSG es una herramienta que genera sitios web completos (HTML, CSS y Javascript) antes de que un usuario lo visite. O sea, a diferencia de como hace, por ejemplo, Wordpress, que tiene los artículos guardados en bases de datos y cada vez que accedes los carga de allí para mostrártelos, estas herramientas ya cargan los artículos a través de ficheros Markdown generalmente y esto junto a los layouts de tu aplicación los convierte en los ficheros estáticos que compondrán tu sitio Web.

Ya que entendemos que son los SSG, veamos que implicaciones tienen:

• Rendimiento. Debido a que los archivos HTML pre generados se sirven instantáneamente a través de una CDN (generalmente), es bastante rápida la velocidad del sitio web
• Seguridad. Debido a que no hay procesamiento de datos del lado del servidor (no aplica al 100% veremos porque más adelante) se reduce drásticamente la superficie de ataque
• Escalabilidad y alojamiento sencillo. Servir archivos estáticos es bastante sencillo por lo general, puedes usar desde servicios como Github Pages hasta Buckets S3 para este fin.

Selección del generador de sitios estáticos

Ya que entendemos que es un SSG, ahora tenemos que proceder a seleccionar alguno, y para esto hay miles de opciones y de puntos a valorar para finalmente escoger cual es el adecuado para ti. En mi caso seleccioné Hugo, un SSG construido con Golang (junto a Typescript mis dos lenguajes de programación favoritos), que hace que desarrollar tus sitios web estáticos sea muy rápido, en gran parte, gracias al gran sistema de plantillas que tienen. En este enlace puedes ver todas las plantillas que tiene el ecosistema de Hugo, que además ofrecen bastante personalización. Yo me decidí a usar esta mayormente porque me gustó mucho el diseño y además entre las distintas personalizaciones e integraciones que provee está lo que necesito (por ahora 😂).

En dependencia de que tecnologías sea con las que más familiarizado estés, puedes valorar Gatsby, un SSG basado en React, o en caso que prefieras Vuejs, puedes usar Nuxt.js o Gridsome, la elección depende de cada cual, solo te recomiendo que pienses en la opción que te permita desarrollar tu blog de la manera más rápida y personalizable posible.

Gracias a mi elección te puedo asegurar que pasaron menos de dos días desde que me decidí a crear el blog hasta que lo desplegué, y esto para este tipo de proyectos que no son complejos, eso es algo muy importante.

Features de la plantilla que seleccioné

Además del diseño, debes valorar el hecho de que la plantilla que selecciones (esto en el caso de Hugo) tenga predefinidas las integraciones que crees necesitar para tu blog. A continuación te menciono algunas de las que yo usé:

• Google Analytics (analíticas del sitio web)
• Gitalk (sistema de comentarios, sección más adelante)

Para que entiendas lo que te comento respecto al tiempo, lo único que tuve que añadir en el fichero de configuración de mi plantilla para que el sitio web se integre a Google Analytics fue el siguiente código:

[params.analytics]
  [params.analytics.google]
    id = "GOOGLE_ANALYTICS_APP_ID"

Posibles limitantes

Hasta ahora todo va bien, pero como siempre digo, nada es perfecto, todo tiene sus pros y contras, por lo tanto aquí te mencionaré las cosas que no me han gustado del todo.

Comentarios

Para mi, es importante que las personas que visiten el blog puedan comentar en el mismo, y este fue precisamente uno de los aspectos que no me gustó del todo, te explico. Como bien sabrás, para poder permitir que los usuarios comenten en cada uno de tus posts, este no puede ser completamente un sitio estático, debido a que estos comentarios deben guardarse en una base de datos y además, cada vez que se renderice un post, estos comentarios igual deben cargarse. Por este motivo, tuve que delegar esta funcionalidad en una de las integraciones que ofrece la plantilla con este fin pero que no me gusta del todo.

Esta integración es Gitalk, una solución que te permite almacenar los comentarios como issues en un repositorio de Github, de esa forma, no necesitas depender de una base de datos que tengas que mantener, pero la desventaja es que para poder comentar, el usuario tendrá que loguearse en su cuenta de Github. Algo que espero que no sea un problema para la mayoría de visitantes, ya que este blog está orientado al desarrollo de software y a la arquitectura en la nube. Es más, si llegaste hasta aquí, deberías dejarme un comentario, créeme que es una de las cosas que más me motiva a seguir compartiendo contenido 😂.

Newsletter

Una de las funcionalidades que quisiera implementar en un futuro no muy lejano, es una newsletter, y cuando sea ese momento tendré que ver que solución adoptaré para no perder la velocidad y diseño que me da esta plantilla pero ofreciendo al usuario una experiencia positiva.

Hasta la próxima

Esto es todo por hoy, en el próximo artículo te mostraré como desplegué este sitio estático usando Buckets S3 y Distribuciones Cloudfront. Si consideras que este contenido puede ser de utilidad a tus colegas, compártelo, de esa forma me ayudas un montón.