Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

CÓMO DESPLEGAR APLICACIONES EN HEROKU CON HUGO

November 28, 2025

Introducción al despliegue de aplicaciones con Hugo en Heroku

Hugo es un generador de sitios estáticos escrito en Go, conocido por su velocidad y flexibilidad, ideal para crear sitios web de programación y noticias de tecnología. Heroku, por su parte, es una plataforma como servicio (PaaS) que simplifica el despliegue y la gestión de aplicaciones en la nube, soportando múltiples lenguajes de programación. Este tutorial explica cómo combinar Hugo y Heroku para desplegar un sitio web de manera eficiente, con pasos detallados y ejemplos prácticos. Aprenderás a configurar tu entorno, preparar un proyecto Hugo, integrarlo con Heroku y automatizar el despliegue, optimizando el proceso para proyectos tecnológicos.

Requisitos previos para el despliegue

Antes de comenzar, asegúrate de cumplir con los siguientes requisitos. Necesitarás una cuenta en Heroku, que puedes crear de forma gratuita en su sitio oficial. También requerirás Git instalado en tu máquina para gestionar el control de versiones. Hugo debe estar instalado; la versión más reciente se recomienda para compatibilidad con las últimas funcionalidades. Además, necesitarás la Heroku CLI (interfaz de línea de comandos) para interactuar con la plataforma desde la terminal. Por último, conocimientos básicos de Markdown y terminal serán útiles para seguir los pasos.

Para verificar que Hugo está instalado, ejecuta el siguiente comando:

hugo version

La salida debería mostrar algo como:

hugo v0.136.5-7dc387a1 linux/amd64 BuildDate=2025-11-15T10:22:34Z

Para instalar la Heroku CLI en sistemas basados en Linux, usa:

curl https://cli-assets.heroku.com/install.sh | sh

Verifica la instalación con:

heroku --version

Creación de un proyecto Hugo

Comienza creando un nuevo proyecto Hugo. Abre una terminal y ejecuta el comando para generar un sitio base:

hugo new site mi-sitio-tecnologia

Esto creará una estructura de directorios como la siguiente:

mi-sitio-tecnologia/
├── archetypes/
│   └── default.md
├── content/
├── data/
├── layouts/
├── public/
├── static/
├── themes/
└── config.toml

El archivo config.toml contiene la configuración básica del sitio. Edítalo para establecer el título y un tema. Por ejemplo:

baseURL = "http://example.com/"
languageCode = "es"
title = "Sitio de Tecnología"
theme = "ananke"

Para este tutorial, usaremos el tema Ananke. Descárgalo e instálalo:

git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Crea un nuevo post para probar el contenido:

hugo new posts/primer-articulo.md

Edita el archivo generado en content/posts/primer-articulo.md y agrega contenido en Markdown:

---
title: "Primer Artículo"
date: 2025-11-30T22:35:00-06:00
draft: false
---

Este es un artículo sobre **tecnologías emergentes** en 2025.

Para previsualizar el sitio localmente, ejecuta:

hugo server

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

Configuración de Git para control de versiones

El control de versiones es esencial para gestionar cambios y desplegar en Heroku. Inicializa un repositorio Git en el directorio del proyecto:

cd mi-sitio-tecnologia
git init

Crea un archivo .gitignore para excluir archivos generados:

/public/
/resources/

Agrega los archivos al repositorio y realiza el primer commit:

git add .
git commit -m "Inicialización del proyecto Hugo"

Vincula el repositorio a un remoto en GitHub (opcional, pero recomendado para backups):

git remote add origin https://github.com/tu-usuario/mi-sitio-tecnologia.git
git push -u origin main

Creación de una aplicación en Heroku

Inicia sesión en Heroku desde la terminal:

heroku login

Crea una nueva aplicación en Heroku:

heroku create mi-sitio-tecnologia

La salida será similar a:

Creating mi-sitio-tecnologia... done
https://mi-sitio-tecnologia.herokuapp.com/ | https://git.heroku.com/mi-sitio-tecnologia.git

Esto configura un repositorio remoto en Heroku. Verifica los remotos con:

git remote -v

Configuración del buildpack para Hugo

Heroku usa buildpacks para compilar aplicaciones. Para Hugo, utiliza el buildpack oficial. Configúralo con:

heroku buildpacks:set https://github.com/heroku/heroku-buildpack-hugo.git

Especifica la versión de Hugo en un archivo hugo.json en la raíz del proyecto:

{
    "version": "0.136.5"
}

Esto asegura que Heroku use la misma versión de Hugo que en tu entorno local, evitando problemas de compatibilidad.

Configuración del despliegue en Heroku

Heroku necesita saber cómo ejecutar la aplicación. Crea un archivo Procfile en la raíz del proyecto:

web: hugo server --bind 0.0.0.0 --port $PORT

El $PORT es una variable de entorno proporcionada por Heroku. Además, crea un archivo static.json para indicar que el sitio es estático:

{
    "root": "public"
}

Genera los archivos estáticos del sitio:

hugo

Esto crea la carpeta public/ con los archivos HTML, CSS y JavaScript listos para servir.

Despliegue del sitio en Heroku

Confirma los cambios en Git:

git add .
git commit -m "Configuración para despliegue en Heroku"

Despliega el código a Heroku:

git push heroku main

Heroku compilará el sitio usando el buildpack de Hugo. La salida mostrará el progreso:

remote: Compressing source files... done.
remote: Building source:
remote: -----> Hugo app detected
remote: -----> Installing Hugo 0.136.5
remote: -----> Building site
remote: Hugo Static Site Generator v0.136.5
remote: Total in 12 ms
remote: -----> Deploying to Heroku
remote: Verifying deploy... done.
To https://git.heroku.com/mi-sitio-tecnologia.git
 * [new branch]      main -> main

Accede al sitio en la URL proporcionada, como https://mi-sitio-tecnologia.herokuapp.com.

Automatización del despliegue con GitHub

Para automatizar los despliegues, conecta tu repositorio de GitHub a Heroku. En el panel de control de Heroku, ve a la pestaña “Deploy” y selecciona GitHub como método de despliegue. Busca tu repositorio y habilita el despliegue automático para la rama main.

Cada vez que hagas un git push a GitHub, Heroku detectará los cambios y redeplegará el sitio. Esto es ideal para flujos de trabajo continuos en equipos de desarrollo.

Escalado y gestión de recursos

Heroku usa contenedores llamados dynos para ejecutar aplicaciones. El plan gratuito incluye un dyno que entra en modo suspensión tras 30 minutos de inactividad, lo que puede causar un retraso en la primera carga. Para escalar la aplicación, ajusta el número de dynos:

heroku ps:scale web=1

Para un sitio con mayor tráfico, considera un plan de pago que ofrezca dynos permanentes y más recursos. Verifica el estado de los dynos con:

heroku ps

Integración de bases de datos

Aunque Hugo genera sitios estáticos, puedes integrar bases de datos para funcionalidades dinámicas mediante APIs. Heroku ofrece complementos como Heroku Postgres. Instálalo con:

heroku addons:create heroku-postgresql:hobby-dev

Configura una API en otro proyecto Heroku (por ejemplo, en Node.js) para interactuar con la base de datos. Un ejemplo de conexión en Node.js:

const { Pool } = require("pg");

const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
    ssl: { rejectUnauthorized: false },
});

async function getData() {
    const client = await pool.connect();
    const result = await client.query("SELECT * FROM noticias");
    client.release();
    return result.rows;
}

El frontend en Hugo puede consumir esta API mediante JavaScript.

Monitoreo y mantenimiento

Heroku proporciona herramientas para monitorear el rendimiento. Usa el comando logs para ver los registros en tiempo real:

heroku logs --tail

Para actualizaciones, modifica los archivos Markdown en la carpeta content/, genera el sitio con hugo, y despliega los cambios:

git add .
git commit -m "Actualización de contenido"
git push heroku main

Si encuentras errores, revisa los logs o verifica la configuración del buildpack. Los problemas comunes incluyen versiones de Hugo incompatibles o archivos faltantes en el repositorio.

Optimización para sitios de tecnología

Para un sitio de programación y noticias de tecnología, optimiza el rendimiento y la experiencia del usuario. Usa un tema responsivo como Ananke y habilita la compresión de activos en config.toml:

[params]
  enableCompression = true

Incluye un sistema de comentarios estático, como Disqus, configurándolo en el tema. Agrega Google Analytics para rastrear el tráfico, editando el archivo de configuración del tema:

googleAnalytics = "UA-XXXXX-Y"

Seguridad en el despliegue

Asegúrate de que tu sitio use HTTPS, que Heroku habilita por defecto. Protege las claves de API y variables de entorno con:

heroku config:set API_KEY=tu_clave_secreta

Accede a estas variables en tu código, por ejemplo, en JavaScript:

const apiKey = process.env.API_KEY;

Evita incluir credenciales en el repositorio Git para mantener la seguridad del proyecto.

Personalización avanzada del sitio

Personaliza el tema Ananke editando los archivos en themes/ananke/layouts/. Por ejemplo, para agregar una barra lateral, modifica index.html:

<aside>
    <h3>Últimas Noticias</h3>
    {{ range first 5 (where .Site.RegularPages "Section" "posts") }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
</aside>

Genera vistas previas de los cambios localmente con hugo server antes de desplegar.

Migración a otros servicios

Si decides migrar de Heroku, Hugo facilita la transición a servicios como Netlify o GitHub Pages. Exporta el contenido de la carpeta public/ y configúralo en la nueva plataforma. Por ejemplo, en Netlify, sube la carpeta public/ o conecta el repositorio Git para despliegues automáticos.

Conclusiones

Desplegar un sitio Hugo en Heroku combina la simplicidad de un generador de sitios estáticos con la potencia de una plataforma como servicio. Este tutorial cubrió la creación de un proyecto Hugo, la configuración de Git y Heroku, el despliegue automatizado, y la optimización para sitios de tecnología. Con Heroku, puedes escalar tu aplicación según las necesidades, integrar bases de datos, y mantener un flujo de trabajo eficiente. La flexibilidad de Hugo permite personalizar el sitio y migrarlo a otras plataformas si es necesario, haciendo de esta combinación una solución robusta para publicar contenido tecnológico en 2025.