Generador de páginas web estáticas y bitácoras Hugo

En diciembre del 2013 pase de usar Blogger a usar Ocotpress junto con GitHub Pages para el hospedaje. En mayo del 2015 modifiqué mi bitácora para usar en vez de Octopress la herramienta equivalente Hugo, ambas sirven para generar sitios web estáticos formados únicamente por HTML, CSS, imágenes, documentos y JavaScript. Tanto Octopress, Jekyll como Hugo y otros como Pelican son similares, a partir de archivos normalmente en formato markdown genera el HTML de la página web o bitácora junto con los recursos estáticos que necesite. Cada una de estas opciones son adecuadas para páginas de presencia en internet y bitácoras.

Varían en el lenguaje de programación que emplean, Octopress usa Ruby y Hugo usa Go, y el formato de las plantillas que utilizan para personalizar la generación del contenido. La migración desde Blogger a Octopress que hice en 2013 me supuso una gran mejora al editar los artículos. La edición de los artículos se puede hacer con cualquier editor de textos en la computadora local en vez de usar una editor en un navegador mucho más limitado y lento, además de editar el texto la gestión de las imágenes es mucho más simple al tratarse como simples archivos que basta colocar entre el código fuente de la bitácora que usará el generador para producir la página web o bitácora y no menos importante aprovechar la corrección ortográfica de las palabras que en mi caso hago con vim, no me imagino la gran cantidad de errores que tendré en los artículos de Blogger y no me habré dado cuenta a pesar de siempre leer un par de veces cada artículo antes de publicarlo. El cambio de Octopress a Hugo más tarde me permitió otros aspectos importantes a la hora de editar los artículos.

La web está formada por un conjunto de páginas enlazadas, la gestión de los enlaces es un aspecto muy importante en una página web y en una bitácora es igual. Si una página a la que hacíamos referencia cambia de dirección todos los enlaces que tuviésemos quedarán rotos. Hay varias posibilidades para buscar enlaces rotos, encontrados y sustituirlos usando Blogger es complicado ya que hay que usar el lento y poco cómodo editor web, usando Octopress era más sencillo haciendo una búsqueda y reemplazo en los archivos de texto en formato markdown con un buen editor de textos pero con Hugo me resulta mucho más sencillo por la forma en que he organizado el código fuente. Los enlaces comunes que utilizo en múltiples artículos los incluyo en un shortcode y otro para los propios artículos del blog y luego en la página o artículo hago referencia a ellos usando un identificador de forma que si un día cambia una página de dirección o una URL de algún artículo solo he de hacer la sustitución en un único lugar en esos shortcodes. Con Disqus externalizo los comentarios.

• Gestionar los enlaces de una bitácora con Hugo

La gestión de las imágenes es otro aspecto que si no se organiza se acaba con un directorio sin ninguna organización donde es complicado saber que imágenes utiliza cada artículo. Los principales directorios que utilizo son dos uno para imágenes de logotipos y otro para las imágenes de cada artículo con una subcarpeta por año y otra con el identificador del artículo. Hasta hace poco usaba ImageMagick para producir las previsulizaciones de las imágenes y una reducción de las imágenes originales. Recientemente en Hugo se ha incorporado la funcionalidad de aplicar procesado a las imágenes con lo que es posible generar estas previsualizaciones y reducciones sin necesidad de perder las imágenes originales, esto tiene la ventaja de que si un tiempo después hay que hacer algún cambio a un imagen se puede utilizar la original. También podido simplificar la forma de organizar las imágenes, ahora al lado del artículo markdown en que se usan.

Tanto la gestión de enlaces como de los recursos estáticos es algo que no podía hacer con Blogger y fue uno de los principales motivos para migrar a un generador estático de páginas web. Como todo son archivos estáticos lo único que hace falta es un servidor web, hay varias opciones de hospedaje bastante baratas al no necesitar un lenguaje de programación en el servidor como PHP ni una base de datos relacional. Yo utilizo GitHub Pages que es incluso sin coste. Usando algunas de las varias formas para monetizar un blog escribiendo contenido interesante y de forma regular los ingresos por este medio cubren el coste del hospedaje y del dominio.

Con Hugo personalicé completamente el diseño y estilos de de la bitácora pero Hugo dispone de múltiples temas. En la página de documentación de Hugo está el formato a usar en las plantillas, shortcodes y partials así como las variables disponibles y funciones disponibles en las plantillas. Con la guía de inicio rápido es posible tener una página web en unos pocos minutos y la estructura básica de directorios.

Una de las características destacadas de Hugo es que es muy rápido, en unos pocos segundos es capaz de generar la página web completa a partir del código fuente de los archivos. Ya he escrito más de 300 artículos y tarda menos de 3 segundos en generar este blog. Otra que destaco es que solo se necesita un único binario con lo que se evita el infierno de dependencias que en alguna ocasión con Octopress me causó problemas. Usando el servidor web incorporado que posee es posible previsualizar en local el contenido de la página antes de publicarla.