📝 Crear primer sitio Web con Hugo

Llevaba tiempo queriendo escribir una bitácora de desarrollo donde poner las notas que voy recopilando mientras voy desarrollando. Y he intentado varias cosas: poner una página pública en Notion (herramienta que no he conseguido acostumbrarme a usar) o incluso montar otro sitio Web con WordPress. Pero en realidad buscaba una herramienta bastante más sencilla, algo que me permitiera escribir en Markdown y publicar un sitio Web, sin más. WordPress en este caso era matar moscas a cañonazos.

Y llevaba tiempo con ganas de probar un generador de sitios Web estático. Hace tiempo intenté trastear con Jekyll y la verdad es que no lo conseguí funcionar; tampoco le dediqué mucho esfuerzo. Hoy tenía un rato libre y ganas de enredar, y terminé instalándome Hugo, que hace años me lo comentó un compañero de trabajo. Y ha terminado ajustándose bastante bien a lo que buscaba.

No requiere demasiada configuración y por defecto ya me permite escribir posts. El tema que he elegido es bastante sencillo y sobrio, y creo que se lee bien. Se llama Paper. Tiene modo claro y modo oscuro y… ya. Tampoco necesito más.

Os dejo unas notas de cómo he instalado y configurado este sitio Web.

Configurar Hugo

Para configurar Hugo básicamente seguí el Quick Start, eligiendo otro tema en lugar de Ananke. Los pasos 1 a 6 y 8 son comandos a ejecutar en la terminal, en mi caso en macOS. Si utilizas Linux o Windows tendrás que buscar la forma adecuada de instalar Hugo (apt-get o semejante).

1. brew install hugo
2. hugo new site manumateos.dev
3. cd manumateos.dev
4. git init
5. git submodule add (URL del tema)
6. echo theme = \"paper\" >> config.toml¹
7. Configurar el config.toml para ponerle / como baseURL: de esta forma las URL son relativas y no absolutas.
8. hugo -D para generar el primer sitio Web.

Tras hacer todo esto tendrás, en la carpeta public dentro de manumateos.dev (o de la carpeta que hayas especificado) un sitio Web listo para publicar, con su index.html y todo eso.

Repositorios

Estoy usando dos repositorios. Uno privado con la configuración del site y uno público con la carpeta /public que se genera cuando ejecuto hugo -D. Este repositorio público es el que tiene configurado GitHub Pages.

En mi ordenador en realidad el repositorio privado es la carpeta del proyecto completo (digamos ~/manumateos.dev), y luego he creado un segundo repositorio con la parte pública, que va al repositorio público.

La carpeta /public puede estar en el fichero .gitignore del repositorio “no público”. Al final va a estar en el otro repositorio y se puede generar sin ningún problema cada vez que sea necesario con hugo -D.

Para crear el segundo repositorio que a su vez va a ser el sitio Web público:

1. Generar por primera vez el sitio Web con hugo -D en la carpeta del sitio.
2. Navegar a la carpeta: cd public
3. Crear un nuevo repositorio en esta carpeta. git init
4. Añadir el repositorio que va a ser público como remoto. git remote add origin https://github.com/user/repo.git
5. Subirlo. git push. A lo mejor hay que poner las ramas (git push main origin/main o algo parecido).

Luego simplemente configuré GitHub Pages en el repositorio y lo configuré como enseño en la captura.

Por último configuré en mi dominio una entrada CNAME para el subdominio www, con el valor macram.github.io (el de mi nombre de usuario de GitHub). Tras actualizarse los DNS tuve el sitio Web funcionando.

Ahora: cada vez que escribo una nueva nota tengo que:

1. Generar el sitio Web con hugo -D.
2. git add . para añadir los ficheros.
3. Hacer commit y push del submódulo público.
4. Hacer commit y push del submódulo privado (si he tocado la configuración o modificado el tema).