Introducción

¿Quieres iniciar un blog pero te preocupan los costos de alojamiento y dominio? La combinación de GitHub Pages y Hugo ofrece la solución perfecta. GitHub Pages proporciona alojamiento web gratuito, mientras que Hugo es un generador de sitios estáticos ultrarrápido. Juntos, te permiten tener un blog de calidad profesional a costo cero.

Esta guía te lleva por todo el proceso de configuración, desde instalar Hugo hasta desplegar tu sitio en GitHub Pages.

¿Qué es Hugo?

Hugo es un generador de sitios estáticos escrito en Go. Escribes contenido en Markdown, y Hugo genera archivos HTML con un solo comando. A diferencia de WordPress, no se necesita base de datos — solo sube los archivos HTML generados y tu sitio está en línea.

Características clave de Hugo:

• Compilación rápida: Sitios con cientos de páginas se generan en segundos
• Rico ecosistema de temas: Más de 300 temas disponibles en el sitio oficial
• i18n integrado: Crea fácilmente sitios multilingües (ej. japonés + inglés)
• Altamente personalizable: Lenguaje de plantillas simple pero potente

¿Qué es GitHub Pages?

GitHub Pages es un servicio de alojamiento web gratuito proporcionado por GitHub. Sube archivos HTML a un repositorio y se publican automáticamente como un sitio web. Soporta dominios personalizados y proporciona certificados HTTPS gratuitos.

Pasos de configuración

1. Instalar Hugo

Instala Hugo en tu máquina local.

macOS:

brew install hugo

Windows:

winget install Hugo.Hugo

Verificar:

hugo version

2. Crear un nuevo sitio

hugo new site my-blog
cd my-blog

3. Añadir un tema

Elige un tema y agrégalo. Aquí hay un ejemplo usando el popular tema PaperMod.

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Habilita el tema agregándolo a hugo.toml:

theme = "PaperMod"

4. Crear tu primer artículo

hugo new content posts/first-post.md

El front matter se inserta automáticamente. Cambia draft: true a draft: false para publicar.

5. Vista previa local

hugo server -D

Abre http://localhost:1313 en tu navegador para ver tu sitio.

Desplegar en GitHub Pages

1. Crear un repositorio en GitHub

Crea un nuevo repositorio en GitHub. Nómbrarlo <usuario>.github.io lo hace accesible directamente en esa URL.

2. Configurar el flujo de trabajo de despliegue

Crea .github/workflows/hugo.yaml con el siguiente contenido para habilitar el despliegue automático mediante GitHub Actions.

name: Deploy Hugo site to Pages
on:
  push:
    branches: ["main"]
  workflow_dispatch:
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: peaceiris/actions-hugo@v3
      - run: hugo --minify
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

3. Subir y publicar

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/usuario/repositorio.git
git push -u origin main

Después de subir, GitHub Actions construye y despliega tu sitio automáticamente. En minutos, estará en vivo en https://usuario.github.io/repositorio/.

Configuración de dominio personalizado (opcional)

Si tienes un dominio personalizado, configúralo en GitHub Pages.

1. Ve a Configuración del repositorio → Pages → Dominio personalizado
2. Agrega los siguientes registros A a tu DNS:
   • 185.199.108.153
   • 185.199.109.153
   • 185.199.110.153
   • 185.199.111.153
3. O configura un registro CNAME apuntando a <usuario>.github.io

GitHub emite y gestiona certificados HTTPS automáticamente.

Conclusión

La combinación de GitHub Pages y Hugo es una de las mejores maneras de tener un blog completo a costo cero. Sin necesidad de mantenimiento de servidor y con escritura basada en Markdown, puedes concentrarte completamente en crear contenido. ¿Por qué no empezar tu propio blog hoy?