Logo de HUGO

Como ya os había comentado en la anterior entrada he decidido para esta nueva etapa del blog emplear el framework web HUGO.

Instalar Hugo es muy fácil y puede hacerse de múltiples formas en mi caso lo que hice fue dejarme de tonterías de instaladores de consolas para Windows y descargarme el binario directamente de su repositorio. A continuación solo tuve que añadir el path donde descomprimí la carpeta del binario al path las variables de entorno.

Una vez hecho eso ya podía invocar Hugo desde el terminal. Algunos de los comandos que podemos ejecutar por ejemplo son:

  • hugo config : muestra la configuración del sitio web donde estemos situados en el terminal
  • hugo help : comando de ayuda
  • hugo new : permite crear nuevo contenido para el blog
  • hugo server : arranca un servidor local
  • hugo version : muestra la versión de Hugo

Crear una nueva web con Hugo es tan sencillo como ejecutar el siguiente comando:

hugo new site my-web

Con eso ya tenemos la estrucutra básica del nuevo sitio web. El primer fichero que habrá que tocar es config.toml que es el que contiene la configuración de la web y donde también meteremos configuraciones adicionales que pueden pertecener al tema que elijamos usar (en mi caso yo usé uno recomendado de la propia web como es tailwind).

Lo siguiente importante a tocar es en la carpeta archetypes crear una plantilla (o modificar la default que existe) con la estructura que queremos tengan nuestras páginas nada más crearlas. En mi caso creé la plantilla post.md con este contenido:

title: '{{ replace .File.ContentBaseName "-" " " | title }}'

date: {{ .Date }}

draft: true

tags: []

categories: []

series: []

toc: false

description: ""

Recuerda añadir — antes y después de los datos de tu plantilla.

Una vez tengas tu plantilla simplemente hace falta ejecutar este comando:

hugo new post/2023/2023-12-17-balance-friki-del-año-2023.md

Yo he decidido usar subcarpetas dentro de post y luego la numeración de la fecha para mantener las entradas ordenadas pero en verdad podríais usar la estructura que más os apetezca.

Una vez queráis arrancar el servidor se usa el comando

hugo server -D

Con esto arrancamos el proyecto en localhost con el puerto 1313 (en la propia consola al arrancar nos lo recordará).

Al usar fichero markdown es cierto que tenemos algunas limitaciones/incomodidades para crear cierto contenido que en html puro (o por supuesto usando un CMS tipo Wordpress) pero se va superando fácilmente.

Por ejemplo para insertar un enlace, una imagen o un iframe (los tres casos que he necesitado yo) hará falta crear en los shortcodes un fichero html para cada tipo de elemento. Por ejemplo a los enlaces los he metido en link.html del subdirectorio shortcodes con el siguiente contenido:

{{ $href := .Get "href" }}{{ $text := .Get "text" | default $href }}{{ $target := .Get "target" }}<a href="{{ $href }}" target="{{ $target }}" >{{ $text }}</a>

Y luego para usarlos debo poner lo siguiente dentro de los ficheros .md (eliminando el espacio entre las llaves pero para que saliera en el artículo sin resolverme el enlace he tenido que ponerlo separado):

{ {< link href="https://gohugo.io/" target="_blank" text="HUGO" >} }

Y finalmente cuando estamos listos para generar nuestro sitio web para desplegarlo simplemente tenemos que ejecutar hugo desde la raíz del sitio. Eso compilará todo el proyecto dentro de la carpeta public que es lo que deberemos subir a nuestro alojamiento. Y recordar poner el campo de la metadata draft a false antes de compilar o no se subirán los artículos.

Actualmente yo despliego subiendo por ftp pero tengo que estudiar un par de alternativas que me sugirieron para que los desplieges pudieran ser automáticos.

Y esto sería lo más básico para empezar. Yo he subido el blog así tal cual y ya lo estáis pudiendo leer. Os voy a dejar por aquí las mejoras que quiero hacerle durante los próximos días:

  • Habilitar un RSS para quien quiera seguir el blog así.
  • Habilitar comentarios (he leído de refilón que se puede integrar disqus dentro de Hugo)
  • Añadir iconos a redes sociales en el footer (supuestamente la plantilla trae la funcionalidad para ello pero no he logrado configurarlo correctamente en el primer intento)
  • Suscripción mediante boletín (esto probablemente no tenga nada que ver con Hugo salvo meter un enlace)