Como Estratega Digital, mi trabajo es optimizar los ecosistemas de venta de mis clientes para que funcionen como máquinas de reloj suizo. Pero cuando decidí montar mi propio blog usando Hugo (un generador de sitios estáticos ultrarrápido), me di cuenta de que hasta los estrategas necesitamos ensuciarnos las manos con el código de vez en cuando.
El objetivo era claro: quería un blog que cargara en milisegundos, alojado de forma gratuita y que mantuviera mi diseño premium con animaciones GSAP, todo integrado dentro de mi web principal en GitHub Pages.
Sonaba fácil. La realidad fue otra.
Aquí te comparto los grandes errores que cometí en el proceso y cómo logré superarlos, por si estás pensando en montar tu propio ecosistema con Hugo.
Error 1: La pesadilla de las rutas y el “baseURL”
Mi web principal ya vivía felizmente en un repositorio de GitHub, dentro de una ruta específica. Mi idea inicial fue simplemente meter la carpeta generada por Hugo allí y listo.
El resultado: Un desastre total. Los estilos no cargaban, la pantalla se veía en blanco y los enlaces me llevaban a páginas de error 404.
La solución: Hugo es extremadamente estricto con las rutas relativas. Tuve que configurar la orden exacta de dónde iba a vivir en su archivo maestro hugo.toml, asignándole el baseURL correcto. Eso hizo que todos los enlaces internos funcionaran a la perfección.
Error 2: Pelear contra la consola de Git
Soy estratega, no administrador de sistemas. Al principio intenté subir los archivos usando la terminal de comandos. Me encontré con errores pidiéndome credenciales y diciéndome que no estaba en un repositorio.
La solución: Dejar el ego técnico a un lado y usar herramientas visuales. Descargué GitHub Desktop, cloné mi repositorio en mi PC, pegué los archivos generados y, con dos clics (Commit y Push), el blog estaba online. Simple y sin estrés.
Error 3: Romper la experiencia de usuario (UX)
Al principio, logré subir el blog, pero parecía un “Frankenstein” al mezclar mi diseño con el tema que traía Hugo por defecto (PaperMod). Los menús de navegación te dejaban atrapado y el footer no existía.
La solución: Despedir al tema prefabricado y unificar el código en mi propio archivo baseof.html. Integré mi paleta de colores corporativa, mi textura de ruido y reconstruí la navegación. Ahora la experiencia es fluida y 100% coherente con mi marca.
Error 4: El asesino silencioso del texto plano
Cuando por fin logré que la página cargara con mi diseño, mi flamante primer artículo se veía horrible: texto plano sin formato, títulos rotos y la fecha marcaba un error extraño.
El resultado: Hugo no reconocía el archivo y lo escupía de cualquier manera.
La solución: Al copiar y pegar el borrador del texto, se habían añadido “caracteres de escape” (unas barras invertidas \) justo antes de los guiones de configuración inicial (---) y de las negritas. Esas barras le decían a Hugo: “Ignora el código y muéstralo como texto literal”. Fue borrar esas barras, dejar el archivo limpio, y la magia del diseño premium apareció al instante.
Conclusión
Montar un ecosistema digital robusto requiere paciencia. Hugo es una herramienta increíblemente potente y gratuita, pero no te perdona errores de estructura.
Hoy, este blog es una realidad. Carga a la velocidad del rayo, no depende de bases de datos lentas y me da el control absoluto sobre mi contenido.
“Un buen sistema no es el que se monta rápido, es el que no se cae cuando empiezas a escalar.”
Si necesitas auditar la velocidad y conversión de tu propio ecosistema digital, ya sabes dónde encontrarme.