Minimalismo web con Hugo

Hoy en día la web está sobrecargada de un exceso de imágenes, javascript y otros elementos intrusivos; me refiero a cosas como anuncios, peticiones de interacción, y muchos otros elementos que sobrecogen a los visitantes en el instante en que accesan cualquier página moderna. Mi filosofía a la hora de presentar un sitio personal es el de hacer énfasis en el contenido escrito; paracería contraproducente para las sensibilidades modernas, pero si lo pensamos, en la mayoría de los casos sólo queremos accesar una información particular, y casi siempre se encuentra en forma de texto.

Recientemente he descubierto una herramienta que me ha acercado mucho más a mi meta minimalista de construir un espacio donde pueda publicar sin complicaciones, tanto en la presentación del contenido como en el software que me ayuda a administrarlo: se trata de Hugo, un generador de sitos web estáticos escrito en Go de código libre.

Aunque había logrado reducir significantemente los elementos intrusivos en la página web anterior que estaba utilizando, estuve pensando que la presentación no es lo único que resulta sobrecargado, sino también el motor detrás de la página; por mucho tiempo he utilizado Wordpress y variantes para publicar todo mi contenido. A pesar de que no tengo problemas administrando sitios que requieran de PHP y una base de datos, me parece excesivo tener que utilizar estos componentes para un simple blog; estaba considerando desde hace bastante tiempo buscar una alternativa que me permitiera no sólo eliminar estos componentes complejos, sino también simplificar el proceso que llebo a cabo para escribir y publicar contenido, lo que me llevó a recurrir a Hugo.

WordPress y sus ridículas controversias

Por otro lado, tampoco ayuda que WordPress se ha visto involucrado en una serie de escándalos recientes que podrían afectar el futuro del proyecto. Incluso sin estos percances, era cada vez más obvio que necesitaba de una plataforma nueva que se adecuara mejor a mis deseos minimalistas.

Como herramienta, el PHP es bastante útil para proyectos que ameritan mucha funcionalidad; cosas como Nextcloud se benefician ampliamente de su uso. Pero el problema está en que requiere de administración constante según cambia de versión, y si no se está utilizando contenedores con software como Docker, hay que balancear todos los servicios que utilizan PHP y que no todos son compatibles con las mismas versiones.

Había escuchado con frecuencia sobre Hugo, y que en lugar de ser un manejador de contenido lleno de funciones, se trataba de un sistema de contenido estático simple escrito en Go; siempre me llamó mucho la atención, pero luego de invertir tanto tiempo y esfuerzo en el ecosistema de WordPress, no tenía mucho deseo de empezar de cero con otra plataforma.

El markdown: una necesidad personal

Pero algo que me tenía insatisfecho con Wordpress, aparte de las controversias antes mencionadas, es que no ha integrado funcionalidad para markdown sin recurrir a plugins u otras soluciones de terceros. La simpleza para trabajar documentos web con ese lenguaje me hacía falta y me pesaba tener que volver al tedioso HTML de WordPress… y ni hablar de Gutenberg, que a mi parecer es el editor de páginas más fastidioso en el planeta; tanto lo detesté, que me llevó a reemplazar WordPress con ClassicPress unos años atrás.

Aún cuando pude escapar de Gutenberg, cada artículo que realizaba se me hacía trabajoso tener que importarlo a markdown y mantener dos versiones paralelas, así que dejé de convertirlos con el tiempo; era discordante, porque todas mis notas están en markdown e interactúo con este lenguaje con frecuencia, excepto cuando utilizaba mi blog.

Eventualmente, decidí convertir todos mis escritos de todas maneras; luego, me puse a experimentar con Hugo a ver si me gustaba y así resultó ser. Admito que me tomó al menos un día completo familiarizarme con el proceso y me perdí una que otra vez al principio (creo que la documentación de Hugo podría ser mejor, resulta un tanto críptica), pero al final logré comprenderlo, y ahora me parece mejor y más ajustado a mi visión minimalista para una web personal.

Instalando Hugo

Una de las confusiones que tenía al principio es que pensaba que era necesario instalarlo en el servidor directamente para poder trabajar en el proyecto, pero resulta que la idea es que mantengas una versión local en tu computadora personal para que apliques y revises los cambios desde ella antes de sincronizarlos con el servidor.

Lo bueno de Hugo es que se puede instalar con un sólo paquete sin dependencias. Hay varias formas de hacerlo, pero como en mi caso yo estoy an Arch Linux, ejecuto:

sudo pacman -S hugo

Una vez instalado, entonces puedes empezar a construir tu sitio desde la computadora que te servirá para desarrollo del proyecto (y que no será el servidor de la página fuera de tu red interna). Para ello, ejecutamos los siguientes comandos:

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

Si deseas, puedes utilizar otro tema de los muchos que tienen disponibles.

Configurando Hugo

De ahora en adelante, puedes accesar a una versión en vivo de tu sitio desde cualquier navegador, mediante la dirección http://localhost:1313, siempre y cuando inicies el servidor con el anterior comando que mencioné, hugo server.

La configuración principal de la página estará contenida en un archivo toml llamado hugo.toml; este es un ejemplo de una configuración básica:

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

Puedes ir ajustando los parámetros a tu gusto, por ejemplo: title = 'Nombre de tu sitio'. Para una explicación más detallada de cada comando, lo mejor es que revises directamente la documentación que provee Hugo.

Creando contenido con Hugo

Ahora lo que nos toca es editar archivos; para esta tarea puedes usar cualquier editor de texto. En mi caso prefiero vim; integrarlo en mi flujo de trabajo para manejar la página es sumamente útil y me permite ser bastante productivo.

Puedes añadir nuevo contenido con el siguiente comando:

hugo new content content/posts/my-first-post.md

Toma en cuenta que no tienes que seguir esa misma estructura de directorios si no lo deseas; puedes utilizar cualquier otra como content/blog, content/articulos, etc.

Se creará un archivo donde indicaste, que contendrá algo similar a:

+++
date = '2025-03-15T15:29:33-04:00'
draft = true
title = 'Título de tu artículo'
+++

De ahí puedes pasar a editarlo utilizando el formato markdown para crear una nueva entrada en tu sitio.

Por defacto, las nuevas entradas se publicarán como borradores y no estarán accesibles al servidor local. Para que podamos verlas, ejecutaremos el mismo comando de otra manera, para indicar que queremos incluir borradores y contenidos aún no publicados:

hugo server -D

Ahora cuando visites http://localhost:1313, se mostrará todo lo que no se haya hecho público; otra gran ventaja es que cada cambio que realices a cualquiera de los archivos será aplicado en tiempo real, y la página se refrescará de inmediato para reflejar esas modificaciones.

Publicando contenido con Hugo

Una vez estés satisfecho con los cambios, puedes pasar a publicarlos con el comando:

hugo

Si no puedes ver tus escritos, recuerda eliminar la condición de borrador en tus artículos cambiando draft = true por draft = false.

Tu sitio será publicado bajo el directorio /public de tu proyecto; como se trata de una web estático, será lo único que necesitarás enviar al servidor que alojará tu página y cualquier cambio futuro debe ser sincronizado desde el mismo directorio.

Hay varias formas de lograrlo, pero a mí me gusta utilizar rsync, puesto que me permite sincronizar entre ambas máquinas de manera remota con claves ssh.

Puedes utilizar un script en bash para automatizar la tarea de sincronización y publicación remota, según indica la documentación oficial. Para ello, necesitamos crear un archivo llamado deploy en la raíz de nuestro proyecto:

vim ~/lugar/de/nuestro/proyecto/deploy

Dentro, colocamos lo siguiente:

#!/bin/sh
USER=mi-usuario
HOST=mi-servidor.com
DIR=directorio/a/mi/página   # el directorio a dónde deberían ir tus archivos

hugo && rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR} # esto eliminará todo en el servidor que no se encuentre también en el directorio local público 

exit 0

Le otorgamos los permisos necesarios con:

chmod +x deploy

Ya esto nos permite sincronizar y publicar todo ejecutando el script:

./deploy

Conclusiones

No entraré en detalle de cómo configurar un servidor web, pero luego de tener estos directorios sincronizados es posible pasar a servir el contenido con apache, nginx, etc. Otro aspecto fantástico es que puedes respaldar tus cambios a un repositorio git remoto con servicios como Gitlab o similares. Si deseas, puedes ver el mío aquí.

Siempre me ha gustado bastante el lenguaje Go, y Hugo demuestra por qué; es limpio, rápido y simple, pero con suficientes funciones para que sea bastante dinámico y configurable. El hecho de no tener que utilizar PHP o bases de datos es la mejor parte.

La desventaja está en que debes ser bastante conocedor de Linux y de la terminal para sacar provecho completo de este flujo de trabajo pero… para mí, vale la pena dada mis circunstancias. Si tu caso requiere de algo más complejo, los manejadores de contenido siguen siendo una opción viable; además, no tienes que quedarte estancado en WordPress cuando existen alternativas como Ghost o Grav.

Por mi parte, me ha encantado Hugo, y he simplificado bastante tanto mi página web, como el proceso de manejarla y publicar contenido; estoy bastante satisfecho hasta ahora con el resultado, y espero disfrutar de esta herramienta por un largo tiempo.