ochobitshacenunbyte

Free Software, GNU y Linux

Hugo: Un generador de sitios estáticos muy rápido

por · 3 septiembre, 2025

Si en nuestra entrada anterior comparábamos los principales generadores de páginas estáticas, hoy nos centramos en Hugo, uno de los más populares y potentes. Su velocidad, flexibilidad y facilidad de uso lo han convertido en la elección de desarrolladores y creadores de contenido que buscan un sitio rápido, seguro y fácil de mantener.

Además, en la segunda mitad de la entrada os hablo como lo he desplegado con Docker, utilizando un fichero YAML con Docker Compose y le he habilitado diferentes temas.

Logo de Hugo

¿Qué es Hugo?

Hugo es un generador de sitios estáticos escrito en Go. A diferencia de CMS tradicionales, no depende de bases de datos ni de un backend complejo: convierte nuestros archivos de contenido (Markdown) y las plantillas en un sitio web completamente estático, listo para publicar en cualquier servidor o servicio de hosting estático.

Velocidad y rendimiento

Una de las principales ventajas de Hugo es su velocidad. Gracias a estar desarrollado en Go y a su motor de plantillas altamente optimizado, puede generar miles de páginas en segundos, algo que otros generadores tardan minutos en hacer. Esto lo hace ideal para sitios grandes con mucho contenido.

Estructura y contenido

Hugo organiza el contenido de forma simple y lógica:

  • Content: Carpeta donde escribes tus artículos en Markdown.
  • Layouts: Plantillas HTML que definen la estructura de tu sitio.
  • Static: Archivos estáticos como imágenes, CSS o JavaScript que se copian tal cual al sitio final.
  • Config: Archivo de configuración (config.toml, config.yaml o config.json) donde defines parámetros globales como el título del sitio, idioma o tema.

Esta estructura clara facilita tanto la creación de nuevos contenidos como el mantenimiento del sitio a largo plazo.

Temas y personalización

Cuenta con una gran cantidad de temas gratuitos y de pago, que se pueden instalar fácilmente y personalizar según nuestras necesidades. Además, su motor de plantillas permite crear diseños completamente a medida, usando variables, shortcodes y funciones avanzadas que convierten lo convierten en un generador muy flexible.

Imagen de muestra del tema Relearn, para Hugo

SEO y funcionalidades integradas

Hugo incluye soporte nativo para muchas funcionalidades importantes:

  • Sitemap y archivos robots.txt automáticos.
  • URLs amigables y personalizables.
  • Integración sencilla con servicios de comentarios y análisis como Disqus o Google Analytics.
  • Soporte para multilenguaje, ideal para proyectos internacionales.

¿Por qué elegir Hugo?

Si buscas un generador de sitios estáticos:

  • Que sea rápido y eficiente incluso con miles de páginas.
  • Que permita alta personalización sin complicaciones.
  • Que tenga una gran comunidad y ecosistema de temas.

Desplegar Hugo con Docker

Vamos a ver cómo desplegar Hugo con Docker, utilizando un fichero YAML de Docker Compose

Hay diferentes imágenes para utilizar, yo me he decantado por la imagen ofrecida por hugomods/hugo

Pero, antes de mirar el tema del YAML. Vamos a crear un script, que llamaremos desde el fichero de despliegue, que se encargará de crear una nueva site, con toda la estructura de carpetas. Lo vamos a llamar «init-hugo.sh«, con este contenido:

#!/bin/sh
if [ ! -f /src/config.toml ]; then
  echo "Inicializando proyecto Hugo en /src..."
  hugo new site /src
fi
 
exec hugo "$@"

Y ahora en el fichero «docker-compose.yaml«, añadimos:

version: "3.8"

services:
  hugo:
    image: hugomods/hugo:latest
    container_name: hugo_server
    entrypoint: ["/bin/sh", "/init-hugo.sh"]
    command: server --bind 0.0.0.0 --baseURL http://localhost --watch --buildDrafts --buildFuture
    ports:
      - "1314:1313"
    volumes:
      - ./site:/src
      - ./init-hugo.sh:/init-hugo.sh
    restart: unless-stopped

De esta manera ya lo podemos desplegar, así:

docker-compose up -d

Antes de continuar, en mi caso, me crea la carpeta «site» con permisos de root, por lo que lo cambio:

sudo chown davidochobits:davidochobits site -R

Accedemos a la carpeta de temas, y descargamos utilizando git, un tema llamado Relearn, bastante popular:

cd  site/themes
sudo apt install git
git init
git submodule add https://github.com/McShelby/hugo-theme-relearn.git hugo-theme-relearn

Cabe decir que este tema es el más actualizado que he encontrado. Había probado con otros temas, como Ananke, pero me daba problemas por compatibilidad.

Ahora debemos modificar el fichero «site/hugo.toml«, con este contenido:

baseURL = "http://localhost/"
languageCode = "es"
title = "Mi sitio Hugo"
theme = "hugo-theme-relearn"

De esta manera ya podemos ver la web, prácticamente sin nada, con el tema cargado.

Si no es así, podemos simplemente reiniciar el contenedor:

docker restart hugo_server

Ahora mismo es un sitio muy espartano. Vamos a añadir una imagen para un primer post.

Las imágenes las guarda en la ruta «/site/static/images/», si no existe esta ruta la creamos.

mkdir -p site/static/images

Dentro de esa ruta he copiado una imagen:

site/static/images/barcelona-portada-hugo.png

Ahora vamos a crear nuestro primer post, que estará en Markdown. Creamos la ruta, si no existe ya:

mkdir -p  site/content/posts

Y añadimos el primer fichero MD

vim site/content/posts/primer-post.md

En mi caso, con este contenido:

---
title: "Mi primer post, desde mi ciudad, Barcelona"
date: 2025-09-03
---
 
Aquí va una imagen en Hugo con Ananke:
 
![Texto alternativo](/images/barcelona-portada-hugo.png)

Una vez añadido solo tenemos que refrescar la web en el navegador con F5, y voilà

Mi primer post

Hugo es, sin duda, una buena opción. Su enfoque minimalista y su potencia lo hacen ideal tanto para blogs personales como para sitios corporativos complejos.

Enlaces consultados

https://docker.hugomods.com/docs/

https://hub.docker.com/r/hugomods/hugo

Etiquetas: