Apuntes mientras aprendo sobre software y computadoras.

diseño web

Cómo empezar con el generador de sitios estáticos Hugo en Linux

En este nuevo apunte práctico vamos a revisar el generador de sitios estáticos Hugo. Y vamos a hacerlo dentro de nuestra computadora con un sistema operativo Linux.

Pelican, Hugo y Jekyll. Tres herramientas distintas, un sueño de sitios estáticos.

Ya con anterioridad escribí sobre dos de esas herramientas:

Como no quiero dejar de esta serie de apuntes sin terminar, hoy voy a ocuparme de hacer una pequeña introducción sobre Hugo.

Otra cosa interesante que me motiva a completar esta rápida entrada: Pelican se encuentra escrito en Python, Jekyll fue creado con el lenguaje Ruby y Hugo se encuentra escrito con el lenguaje de programación Golang.

Requisitos previos

Todo lo que sigue lo hice guiándome con la documentación oficial de Hugo.

Antes de empezar vamos a necesitar algunos programas extras en la computadora para que todo funcione bien. Estoy utilizando Linux mint al escribir esto, algunos comandos se pueden ajustar para otras distribuciones.

Instalar Git

Git nos va a permitir hacer varias cosas, por ejemplo conseguir el código fuente de Hugo.

Si tengo el administrador de paquetes apt en el sistema puedo conseguir Git con el comando:

sudo apt install git-all

Instalar Go

Necesitamos también el compilador y las librerías de Golang para poder usar el código de Hugo.

Todo lo que sigue supone que no tenemos Go en la computadora. En caso de tenerlo, vamos a necesitar remover el directorio:

/usr/local/go

Tener varias instalaciones de Go en la misma máquina es un tema aparte. Pero en este caso estamos empezando desde cero, por lo que eso no es inconveniente.

Me dirijo a este sitio de descarga oficial de Go y descargo la última versión del lenguaje.

En este caso por ejemplo la última versión es:

go1.23.4.linux-amd64

Entonces descargo ese nuevo archivo “tar.gz” y lo llevo hasta el directorio “/usr/local/”. Voy a necesitar permiso de administración/sudo para hacerlo.

Muevo la terminal hasta el directorio “/usr/local/” donde ahora se encuentra el archivo y luego ejecuto el siguiente comando:

sudo tar -C /usr/local -xzf go1.23.4.linux-amd64.tar.gz

Eso crea el nuevo directorio “Go” con todo lo que necesita el lenguaje para funcionar.

Acto seguido agrego ese nuevo directorio al camino de los archivos ejecutables del sistema con:

export PATH=$PATH:/usr/local/go/bin

Puedo hacer una prueba para comprobar que todo funcionó correctamente con el comando:

go version

Instalar Snap

Para simplificar este y el siguiente paso vamos a necesitar el administrador de paquetes Snap en el equipo.

Si es que no lo tenemos en el sistema, agregamos Snap de esta forma.

En Linux Mint primero tenemos que usar el comando:

sudo mv /etc/apt/preferenc/es.d/nosnap.pref ~/Documents/nosnap.backup

Para mover el archivo “nosnap.pref” que viene dentro del sistema. Esto va a habilitar que podamos usar el programa.

Luego actualizamos con:

sudo apt update

Y terminamos con:

sudo apt install snapd

Y con eso ya tenemos Snap en el equipo.

Si intentamos instalar Snap directamente por medio de “apt” saltando el paso de mover el archivo “nosnap.pref”, vamos a recibir el error:

Package snapd is not available, but is referred to by another package. This may mean that the package is missing, has been obsoleted, or is only available from another source E: Package ‘snapd’ has no installation candidate

Instalar Dart Sass

Entiendo que este lenguaje le permite a Hugo realizar varias tareas dedicadas al estilo CSS mediante el lenguaje Dart.

La instalación de Dart Sass varía un poco dependiendo si lo estamos usando para desarrollar Hugo de forma local, o si lo vamos a usar directamente para producción.

Siendo que ahora estamos haciendo una instalación orientada al desarrollo dentro de nuestra máquina, podemos conseguir Dart Sass con este comando:

sudo snap install dart-sass

Cómo instalar Hugo en un sistema Linux

Con todos los requisitos anteriores cumplidos finalmente podemos agregar Hugo a nuestro equipo.

Ahora bien, existen tres versiones de Hugo: Standard, Extendida y “Extendida para producción”.

Sin detenernos demasiado en los detalles de cada una, vamos a conseguir la versión extendida. Parece una buena opción para nuestro objetivo de hacer desarrollo de forma local.

Hacemos una vez más uso de Snap y utilizamos el comando:

sudo snap install hugo

Y con eso finalmente ya puedo empezar a desarrollar con Hugo.

Puedo conocer la versión con:

hugo version

Cómo crear un primer sitio en Hugo dentro de nuestra máquina

De una forma similar a como ocurre con Pelican y Jekyll, con Hugo podemos tomar un archivo escrito en Markdown para convertirlo rápidamente en un sitio estático.

Por supuesto lo anterior es una simplificación, y cubrir todo el tema desde esta entrada rápida sería muy difícil.

Pero para no terminar este apunte sin tener algo terminado, esto es lo que podemos hacer para crear un primer sitio dentro de nuestra computadora con una de las muchas planillas que este programa ofrece.

Voy a hacer un directorio dedicado dentro de Home para guardar mis proyectos. En ese nueva carpeta hago:

hugo new site nuevo-blog

Mi sitio en este caso se llama “nuevo-blog”, y Hugo va a crear un nuevo árbol de directorios dentro de esa carpeta con todo lo necesario para más tarde exportar el sitio terminado.

Ahora entro en la carpeta del proyecto con:

cd nuevo-blog

E inicio un repositorio de Git:

init git

Aunque podemos elegir un tema para nuestro sitio de entre las múltiples opciones ya disponibles, pero la documentación recomienda empezar con el tema “Ananke”.

Para eso utilizamos este comando:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Acto seguido modificados el documento “hugo.toml”, que encontramos en el directorio de nuestro proyecto. Dentro de ese documento agregamos esta linea para establecer el tema Ananke como el predeterminado.

Lo hacemos con este comando:

echo "theme = 'ananke'" >> hugo.toml

Solamente nos falta comenzar el server de desarrollo para poder visitar el sitio desde nuestro equipo. Para eso utilizamos el comando:

hugo server --buildDrafts

Y podemos entrar al sitio poniendo en el navegador esta dirección:

http://localhost:1313/

Para terminar presionamos “Ctrl+C” en la terminal, y de esa forma dejamos de servir el sitio.

Siguiendo estos pasos podemos cambiar el tema e iniciar nuevos proyectos, solamente nos falta agregar nuevas páginas y entradas.

Conclusión

Con esto termina este apunte revisando cómo empezar con el generador de sitios estáticos Hugo en Linux

En mi breve experiencia probando Jekyll, Pelican y Hugo, creo que de las tres opciones prefiero Pelican. Pero creo que es solamente porque se encuentra escrito en Python, y estoy un poco más acostumbrado a ese lenguaje.

¿Encontraste algún error en la publicación? ¿Encontraste algo que puedo mejorar? Me gustaría conocer tu opinion, escribime un mensaje o un correo electrónico sobre el tema.

La seguimos en el próximo apunte.

Leave a Reply