Hugo: generador de sitios estáticos, ediciones y velocidad

¿Qué es Hugo?

Hugo es un generador de sitios estáticos (static site generator) de código abierto escrito en Go. Lee contenido en Markdown, plantillas y un archivo de configuración, y escribe una carpeta con HTML, CSS y JavaScript simples que cualquier servidor web o CDN puede servir. Se distribuye como un único ejecutable y, según su propio sitio, renderiza un sitio grande en segundos, a menudo menos.

Hugo pertenece a la familia de la generación de sitios estáticos: las páginas se construyen una vez, por adelantado, en lugar de en cada petición. Eso lo sitúa junto a Astro en la caja de herramientas Jamstack, con otro compromiso: Hugo usa plantillas de Go sin entorno de ejecución de JavaScript, mientras que Astro usa un modelo de componentes en JavaScript.

Cómo funciona un sitio Hugo

Un proyecto es una carpeta con algunos directorios convencionales (según la documentación de Hugo):

my-site/
  archetypes/   plantillas para contenido nuevo
  assets/       CSS, Sass, JS e imágenes para el pipeline de assets
  content/      páginas en Markdown
  data/         archivos de datos (JSON, TOML, YAML, XML)
  i18n/         tablas de traducción
  layouts/      plantillas
  static/       se copia tal cual a public/
  themes/       temas opcionales
  hugo.toml     configuración del sitio
  public/       sitio generado (lo crea la compilación)

Escribes una página en Markdown con el front matter al principio:

+++
title = 'Mi primer artículo'
date = 2026-10-23
draft = false
+++

Hola, **Hugo**. Este Markdown se convierte en una página HTML al compilar.

Una plantilla en layouts/ envuelve ese contenido en el HTML de tu sitio. Dos comandos cubren casi todo el trabajo diario:

hugo server -D    # servidor local de desarrollo, con borradores
hugo --minify     # compila el sitio en public/

El contenido creado con hugo new content empieza como borrador, así que queda fuera de una compilación normal hasta que pongas draft = false. Hugo también maneja sitios multilingües, taxonomías como las etiquetas, shortcodes, varios formatos de salida (HTML más RSS o JSON) y procesamiento de imágenes como redimensionar y recortar.

Ediciones estándar, extended y deploy

Hugo se publica en varias ediciones. La estándar cubre lo esencial. La extended añade compatibilidad con LibSass para Sass (la documentación marca LibSass como obsoleto y recomienda Dart Sass, que funciona con cualquier edición). La edición deploy añade la subida directa a un bucket de AWS S3, Google Cloud Storage o Azure Storage, y extended/deploy incluye ambas cosas. La documentación recomienda la edición estándar salvo que necesites los extras. Solo necesitas Go para compilar Hugo desde el código fuente o usar Hugo Modules. La guía de instalación lista todas las plataformas.

¿Es Hugo realmente rápido?

La velocidad de compilación es el principal argumento de Hugo, pero conviene leer con cautela las cifras que circulan por ahí. La documentación describe la velocidad en términos cualitativos y no publica ningún benchmark; el tiempo de tu compilación depende del número de páginas, la complejidad de las plantillas, el procesamiento de imágenes y la máquina. Mide tu propia compilación antes de comparar generadores. Y una compilación rápida no hace rápido un sitio: los visitantes solo notan lo que entregas, es decir, HTML, CSS, JavaScript e imágenes.

Ejemplo: un sitio de documentación

Un equipo mantiene 300 páginas en Markdown en Git. Cada push lanza un trabajo de CI que ejecuta hugo --minify y sube public/ a un hosting estático detrás de una CDN. La guía de hosting de Hugo menciona, entre otras opciones, AWS Amplify, Azure Static Web Apps, Cloudflare, Firebase, GitHub Pages, GitLab Pages, Netlify, Render, Vercel, además de rsync o FTP. No hay un servidor de aplicaciones que parchear ni escalar.

Errores comunes

• Versiones de tema sin fijar. Una actualización del tema puede cambiar tu diseño. Fija el commit del tema o la versión del módulo.
• Olvidar los borradores. Si una página no aparece en producción, suele seguir en draft = true.
• Usar funciones solo de extended con el binario estándar. Comprueba qué edición instala tu CI, no solo tu portátil.
• Esperar comportamiento en tiempo de ejecución. Hugo no tiene entorno de servidor. Formularios, búsqueda y comentarios requieren un servicio externo o una función serverless; para renderizar en cada petición conviene el renderizado en el servidor.
• Ignorar la caché de imágenes en CI. Las imágenes procesadas se guardan en el directorio resources. Consérvalo entre compilaciones o la CI repetirá el trabajo cada vez.
• Contenido obsoleto. Los datos quedan congelados al compilar, así que un CMS headless necesita un webhook que dispare una nueva compilación.

Hugo, pruebas de rendimiento y monitorización

La salida estática quita el servidor de aplicaciones del camino de la petición, pero la página aún puede ser lenta por imágenes pesadas, scripts de terceros o una caché mal configurada. Tras cada despliegue, ejecuta una auditoría Lighthouse y sigue las Core Web Vitals. LoadFocus Page Speed Monitoring ejecuta auditorías Lighthouse programadas desde 25 regiones en la nube y te avisa cuando una métrica empeora. Para la configuración, consulta cómo monitorizar las Core Web Vitals con alertas e informes (en inglés) y, para las correcciones, 10 formas de mejorar la velocidad de tu web (en inglés).

Preguntas frecuentes: Hugo

¿Es Hugo gratuito?

Sí. Hugo es de código abierto y solo pagas el lugar donde alojes los archivos generados.

¿Necesito saber Go para usar Hugo?

No necesitas instalar ni escribir Go para construir un sitio. Sí tendrás que aprender la sintaxis de plantillas de Go de Hugo para escribir diseños, que es la parte más empinada de la curva de aprendizaje. Con un tema puedes empezar sin escribir plantillas.

¿Edición estándar o extended?

Empieza con la edición estándar. Pasa a extended solo si un tema o tu pipeline de assets lo necesita, por ejemplo LibSass, y prefiere Dart Sass para trabajo nuevo con Sass.

¿Puede Hugo hacer renderizado en el servidor?

No. Hugo genera archivos en tiempo de compilación. Para páginas dinámicas, añade JavaScript en el cliente o funciones serverless, o elige un framework que renderice en el servidor.

¿Dónde puedo alojar un sitio Hugo?

En cualquier sitio que sirva archivos estáticos: Cloudflare, Netlify, GitHub Pages, GitLab Pages, Vercel, AWS Amplify o tu propio bucket S3 con CDN, entre otros.

¿Hugo admite varios idiomas?

Sí. Hugo incluye compatibilidad multilingüe, con contenido traducido y tablas de traducción en el directorio i18n.