Crea y aloja tu blog gratis con Hugo

Hugo es un generador de sitios estáticos en donde tú escribes en Markdown (un formato de texto muy sencillo) y obtienes un sitio listo para publicar, sin base de datos ni servidor. En este tutorial te enseñaré a instalar Hugo, configurar, cambiar temas, escribir artículos y páginas.

Para el ejemplo usaremos Hublog, un tema minimalista, sin dependencias ni JavaScript, que he creado y es compatible con el binario estándar de Hugo. Puedes verlo en su demo en vivo.

Requisitos

Necesitarás Git: los temas se instalan como submódulos y también lo usaremos para publicar tu blog. Para obtenerlo, solo debes visitar la página oficial de Git o, si lo prefieres, instalarlo mediante la terminal:

winget install Git.Git

brew install git

# Debian / Ubuntu
sudo apt install git

Instalar Hugo

Hugo tiene varias ediciones, pero muchos temas requieren la extended, así que instálala con el comando de tu sistema operativo:

winget install Hugo.Hugo.Extended

brew install hugo

sudo snap install hugo

Cierra la terminal, vuelve a abrirla y comprueba que todo salió bien ejecutando este comando:

hugo version

Si aparece un número de versión, Hugo está instalado.

Nota: en Linux evita sudo apt install hugo, ya que los repositorios suelen traer versiones antiguas. Usa snap, Homebrew o el .deb de la página de versiones.

Crear un nuevo sitio

Ubícate en la carpeta donde quieras guardar tu blog, abre la terminal en esa ubicación y ejecuta:

hugo new site mi-blog

Ahora entra en esa carpeta o ejecuta el siguiente comando para trasladar el terminal a esa ubicación:

cd mi-blog

Dentro encontrarás lo siguiente:

• archetypes/: plantillas para crear contenido.
• assets/: archivos que Hugo procesa, como CSS y JavaScript.
• content/: artículos y páginas en Markdown.
• data/: datos estructurados en JSON, YAML o TOML.
• i18n/: traducciones para sitios multidioma.
• layouts/: plantillas para generar las páginas.
• static/: archivos estáticos, como imágenes y favicon.
• themes/: temas que proporcionan el diseño del sitio.
• hugo.toml: configuración del sitio.

Si vas a instalar un tema, no necesitas utilizar todas estas carpetas ya que Hugo las utilizará desde el tema cuando corresponda, por lo tanto puedes conservar solo content/, static/, themes/ y hugo.toml, ya que son los elementos principales para crear y configurar tu blog. Puedes crear las demás carpetas más adelante, cuando las necesites.

Instalar tema

Aunque puedes instalar un tema descargando su ZIP y descomprimiéndolo en themes/, lo más recomendable es usar Git y añadirlo como submódulo, así podrás actualizarlo fácilmente.

Para este tutorial vamos a instalar Hublog. Primero convierte tu carpeta en un repositorio de Git ejecutando el siguiente comando en tu terminal:

git init

Luego añade el tema como submódulo ejecutando el siguiente comando:

git submodule add https://github.com/zkreations/hublog.git themes/hublog

Configurar el sitio

Abre el archivo hugo.toml con tu editor de texto, borra su contenido y pega esta configuración básica:

baseURL = 'https://example.org/'
title = 'Mi Blog'
theme = 'hublog'

[menus]
  [[menus.main]]
    name = 'Inicio'
    pageRef = '/'
    weight = 1

[params]
  description = 'Un blog personal sobre lo que me apasiona.'
  author = 'Tu nombre'

• baseURL: la dirección de tu sitio. Cámbiala por tu dominio real cuando lo publiques.
• title: el nombre de tu blog.
• theme: el nombre de la carpeta del tema dentro de themes/.
• [[menus.main]]: cada bloque es un enlace del menú y weight define el orden.
• [params]: opciones propias del tema.

Cada tema tiene sus propios parámetros, así que revisa su documentación para conocerlos. En el caso de Hublog, puedes copiar la configuración de ejemplo completa y ajustar los valores a tu gusto.

Escribir artículos y páginas

En Hugo, los artículos y las páginas se guardan dentro de content/. Por convención, los artículos del blog se organizan en posts/, mientras que las páginas independientes se crean directamente en esa carpeta.

Para crearlos, ejecuta estos comandos:

hugo new content posts/mi-primer-articulo.md
hugo new content about.md

Hugo creará ambos archivos en las ubicaciones correspondientes. Ábrelos con tu editor y encontrarás primero el front matter, donde se definen los datos del contenido, y debajo el texto que escribirás en Markdown.

+++
title = 'Mi primer artículo'
date = 2026-11-08T18:51:53-05:00
draft = false
description = 'Una breve descripción del artículo.'
tags = ['hugo', 'blog']
+++

Este es el primer párrafo de mi artículo.

## Un subtítulo

Puedo usar **negritas**, *cursivas* y [enlaces](https://gohugo.io/).

Estos son algunos de los parámetros más habituales del front matter:

Importante: si el archivo trae draft = true, el contenido es un borrador y no se publicará. Cámbialo a false cuando termines de escribirlo.

Previsualizar y compilar

Para ver tu sitio en el navegador mientras escribes, ejecuta este comando:

hugo server -D

Luego abre http://localhost:1313/ y podrás ver tu sitio, que se actualiza cada vez que guardas un cambio. La opción -D incluye los borradores. Para detener el servidor, pulsa Ctrl + C en la terminal.

Cuando termines y quieras generar la versión final, ejecuta:

hugo --gc --minify

Hugo generará el sitio completo dentro de la carpeta public/, optimizando los archivos y eliminando los recursos en desuso. El resultado es un sitio estático que puedes publicar en servicios como GitHub Pages o Netlify, sin necesidad de una base de datos ni un servidor propio.

Personalizar tema

Nunca edites los archivos dentro de themes/, ya que perderías los cambios al actualizar el tema. Para personalizar el diseño o la estructura, Hugo permite extender o sustituir archivos creando la misma ruta en la raíz de tu sitio.

Por ejemplo, Hublog define sus colores y medidas como variables CSS e incluye soporte nativo para estilos personalizados. Solo crea el archivo assets/css/custom.css en tu sitio y redefine lo que necesites sin tocar la hoja de estilos base:

:root {
  --primary: #2563eb;
  --content-width: 70ch;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #93c5fd;
  }
}

También puedes sobrescribir las plantillas del tema. Por ejemplo, para personalizar la cabecera, crea layouts/_partials/header.html y coloca allí tu propia versión de la plantilla, siguiendo estos ejemplos la estructura de tu proyecto quedaría así:

mi-blog/
├── assets/
│   └── css/
│       └── custom.css
├── content/
├── layouts/
│   └── _partials/
│       └── header.html
├── themes/
│   └── hublog/
└── hugo.toml

Actualizar tema

Los submódulos no se actualizan automáticamente cuando el desarrollador publica cambios. Para obtener la última versión del tema, abre la terminal en la carpeta de tu proyecto y ejecuta el siguiente comando:

git submodule update --remote themes/hublog

Esto descargará los últimos cambios de la rama remota configurada. Git registrará la nueva versión del tema en tu proyecto, por lo que también debes guardar ese cambio para mantenerlo sincronizado:

git add themes/hublog
git commit -m "chore: update Hublog theme"

De esta manera, puedes actualizar el tema cuando lo necesites y mantener registrada la versión utilizada por tu proyecto.

Cambiar de tema

El catálogo oficial está en themes.gohugo.io. Antes de instalar uno, revisa lo siguiente:

El proceso es siempre el mismo: lee el README, añade el tema como submódulo en themes/, indica su nombre en hugo.toml, copia su configuración de ejemplo y ejecuta hugo server -D.

Al cambiar de tema, tu contenido no se pierde, pero revisa estas tres cosas: los [params] (cada tema usa los suyos), el nombre del menú (algunos no usan main) y tus sustituciones en layouts/ y assets/, que pueden no ser compatibles con el nuevo tema.

Publicar tu blog gratis

Hasta ahora tu blog solo existe en tu computadora. Para que otras personas puedan verlo, lo publicaremos con GitHub Pages, un servicio gratuito de GitHub. Solo son tres pasos.

Paso 1: Sube tu blog a GitHub

Primero crea el lugar donde se guardará tu proyecto:

1. Crea una cuenta gratuita en github.com.
2. Haz clic en New para crear un repositorio (una carpeta en línea para tu proyecto). Ponle el nombre mi-blog (o el que desees), déjalo en Public y haz clic en Create repository.

Luego, en la terminal, dentro de la carpeta de tu blog, ejecuta estos comandos. Sustituye TU-USUARIO por tu nombre de usuario de GitHub y mi-blog por el nombre que le hayas puesto al repositorio:

git add .
git commit -m "Primer commit"
git branch -M main
git remote add origin https://github.com/TU-USUARIO/mi-blog.git
git push -u origin main

Nota: la primera vez, Git puede pedirte que inicies sesión en GitHub (se abrirá una ventana del navegador) o que configures tu nombre y correo. Si es así, consulta la sección Errores comunes.

Paso 2: Activa la publicación automática

1. En tu repositorio de GitHub, entra a Settings y luego a Pages.
2. En Source, elige GitHub Actions.
3. Busca la sugerencia llamada Hugo y haz clic en Configure.
4. Haz clic en Commit changes para aceptar la configuración que GitHub te propone.

GitHub se encargará de instalar Hugo, compilar tu sitio y ajustar la dirección (baseURL) por ti, así que no necesitas configurar nada más.

Paso 3: Comprueba que funcionó

Ve a la pestaña Actions de tu repositorio. Cuando veas una marca verde (✓), tu blog ya está publicado. Tu dirección será parecida a esta:

https://tu-usuario.github.io/mi-blog/

Si ves una cruz roja (✗) o algo no se ve bien, revisa la sección de Errores comunes.

Actualizar tu blog

Cada vez que escribas un artículo nuevo o cambies algo, guarda los cambios y súbelos a GitHub. GitHub volverá a publicar tu blog automáticamente en un par de minutos:

git pull
git add .
git commit -m "Nuevo artículo"
git push

Importante: ejecuta git pull al menos la primera vez. Al aceptar la configuración en el paso 2, GitHub añadió un archivo nuevo a tu repositorio y tu computadora aún no lo tiene. Sin ese comando, git push te mostrará un error.

Errores comunes

Si ya configuraste tu blog y algo no funciona, revisa estos errores frecuentes:

Conclusión

Con Hugo, crear un blog se reduce a instalar el programa, añadir un tema, ajustar hugo.toml y escribir en Markdown. Lo aprendido con Hublog sirve para cualquier otro tema: leer su README, comprobar la versión que exige y adaptar su configuración de ejemplo. Si tienes dudas, deja tu comentario abajo.