sábado, 2 de octubre de 2021

¿Cómo Funciona Este Blog? (Edición 2021)

#Blog #Hugo #Markdown #Tailwind #Git #Gitlab #CloudFlare

Varios de los detalles de la versión original de este post quedaron desactualizados desde el 2018 hasta ahora, así que creo que es un buen momento para armar una nueva edición y explicar los detalles de cómo funciona todo esto.

• Hugo — Es un framework para la generación de sitios web estáticos. Para explicarlo de una manera simple: Es una herramienta que a partir de archivos de “contenido” y de “diseño” crea un sitio web en HTML.
• Markdown — Todo el contenido del blog (cada uno de los posts que lo componen) está escrito en formato Markdown. Estos archivos son consumidos por Hugo para generar el sitio web.
• (nuevo!) Tailwind CSS — Todo el diseño del blog está armado usando las bondades de Tailwind para el manejo de estilos. Tailwind es un framework de CSS pensado en utility-first.
• Git — Es para el control de cambios de código, pero además es importante en la coordinación de las demás partes, ya que maneja los cambios que se hacen tanto en los archivos de diseño, como principalmente los archivos de contenido.
• Gitlab — Es la plataforma donde está hosteado el repositorio git de la web. Además es el nexo entre distintas otras herramientas que conectan a partir de acá y ejecutan distintos eventos.
• (nuevo!) Vercel — Es la plataforma donde se buildea y se hostea el sitio web. Por cada commit que se hace en el repositorio git, se lanza un nuevo proceso de build, y el resultado de ese proceso de build queda deployado y disponible automáticamente en la url https://tehuel.blog. La plataforma Vercel tiene otras muchísimas capacidades.
• Cloudflare CDN — La última pieza del rompecabezas es Cloudflare. Es una Content Delivery Network, donde la idea es que los visitantes a la web en cualquier parte del mundo, en lugar de tener que conectarse con el servidor de la web, se puedan conectar a servidores más cercanos a su ubicación geográfica. Para esto, cada uno de esos servidores locales se guarda una copia de la web, para servirla directamente en lugar de ir a buscarla al servidor central.

Con respecto a la versión anterior se cambiaron algunas cosas, y se simplificaron muchas otras.

Usando Hugo Pipes como punto central, se simplificó mucho el proceso de build, ya que ahora toda la construcción y procesamiento de HTML, CSS y JS van directamente a cargo de Hugo.

Usando Vercel también se simplificó el proceso de build y deploy, ya que la plataforma “entiende” de proyectos en Hugo y configura todo automáticamente. Ejemplo.

Y usando Tailwind también se simplificó la estructura del sitio, y se sacó la dependencia de Bulma y Bulmin, que hacian que las actualizaciones fuesen un poco más complicadas.

A nivel diseño sigue siendo algo simple, sin mucho detalle… pero ahora tiene un dark-mode seleccionable 😌.

Por ahora esto es todo. Saludos, y hasta la próxima.