Instalar y usar Hugo, framework de Go

Hugo es un framework de generación de sitios estáticos, escrito en Go, Open Source y diseñado para ser muy rápido. El theme Zzo lo usé para la primera versión de este blog, puedes encontrar más en esta lista, por si gustan visitarla.

Instalación de Hugo

Para instalar y usar Hugo, yo usé Manjaro Linux y la versión v0.91.2 extended. Para Windows y/o Mac, al parecer (no he probado, pero la documentación lo señala) se debe instalar explícitamente la versión extended, aquí en Manjaro ya lo hace por default.

sudo pacman -S hugo

Con esto ya queda instalado hugo, listo para usar sus comandos e instalar el theme.

Creación del proyecto

Primero hay que crear los archivos de configuración base y descargar el theme desde el repositorio oficial mediante git.

hugo new site miblog
cd miblog
git init
git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo

Con esto ya estamos en condiciones de correr el proyecto, aunque todavía no va a mostrar nada. Todavía tenemos que hacer un par de configuraciones.

Hay que crear el directorio miblog/config/_default y 4 archivos. Estos archivos sirven para mostrar, ocultar o editar algunos elementos que puedes ver en el sitio. Ya podrás jugar con ellos:

1. config.toml
2. languages.toml
3. menus.es.toml (esto me parece una buena práctica, para posibles nuevos idiomas)
4. params.toml

config.toml

Aquí se configuran algunos aspectos generales del blog, por ejemplo el lenguaje por default, el código de Google Analytics, paginación o el nombre del theme.

Aquí esta la documentación.

languages.toml

En este se configuran los lenguajes del sitio. Para este ejemplo, vamos a usar inglés y español:

[es]
  title = "Mi Blog"
  languageName = "Español"
  weight = 1
  languagedir = "ltr"
  contentdir = "content/es"

[en]
  title = "My Blog"
  languageName = "English"
  weight = 2
  languagedir = "ltr"
  contentdir = "content/en"

Dos variables que aclarar languagedir y contentdir. La primera está relacionada a la dirección del texto, de derecha a izquierda o izquierda a derecha. La segunda la estructura de carpetas donde estarán los archivos de los posts y demás páginas.

menus.es.toml

Ese se encarga de gestionar las traducciones del menú del sitio.

[[main]]
  identifier = "acerca"
  name = "acerca"
  url = "acerca"
  weight = 1

[[main]]
  identifier = "posts"
  name = "posts"
  url = "posts"
  weight = 4

params.toml

Es el más largo y con más opciones. Aquí puedes configurar las redes sociales, enlaces, custom css y mostrar u ocultar opciones a lo largo del sitio.

# sidebar
enableBio = false
enableBioImage = true
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
enableHomeSidebarTitles = true
enableListSidebarTitles = true

Documentación completa.

Primer post

Despues de instalar hugo, vamos a crear la siguiente estructura de carpetas: miblog/content/es/posts. Dentro hay que crear un archivo con el nombre hola-mundo.md.

El encabezado luce más o menos como esto:

---
title: "Hola, Mundo"
author: "John Doe"
authorImage: "https://avatars.githubusercontent.com/u/XXXXXXX?v=4"
date: 2022-01-08T23:59:59-07:00
description: Extracto del texto que voy a poner en el artículo.
draft: false
---

date sirve a Hugo para ordenar los posts de manera descendente.
draf establece si el post puede mostrarse o no.

El cuerpo del post queda con el formato Markdown:

Hola, mundo [Hugo](https://gohugo.io/).

**Saludos**

Ejecutar servidor

Con esto ya deberíamos poder ejecutar el proyecto:

hugo server -D

Hugo deberá compilar y generar los archivos, al final dará una salida como http://localhost:38103/ donde podemos ver lo quehemos hecho.

Conclusiones

Este fue un ejercicio rápido para instalar y usar Hugo para hacer un blog. Hay que recordar que las configuraciones están sobre el theme Zzo, aunque implícitamente sea Hugo el que gestione las opciones.

Algún otro theme tendrá sus propias opciones, por ello lo mejor es darse una vuelta por la documentación oficial.