Hugo Deck 2026

Computing, Hugo
Hugo Deck 2026

No se si será la última, lo que es seguro que es la más sencilla y potente forma que hasta ahora he utilizado para actualizar el contenido de mi blog.

Tengo mi blog desarrollado en Hugo y alojado en Github desde hace varios años. Hace también unos cuantos que uso Emacs para la creación de los artículos con un flujo de trabajo muy optimizado. El único problema con el que me encuentro durante la creación de los artículos es el tiempo que pierdo en comprobar que se van a renderizar correctamente. A Github lo cuesta casi 2 minutos desplegarlo por lo que hace un tiempo preparé un contenedor para hacer un despliegue local antes de subirlo al repositorio. La verdad es que funcionaba, pero seguía teniendo el problema de escribir en un lado y mirar en otro el resultado.

Sin duda alguna yo solo no podría haberlo conseguido, gracias a la ayuda de Gemini y Antigravity he sido capaz de empezar el desarrollo de Hugo Deck. Antes de expicarte lo que hace creo que es mejor que lo veas por tus propios ojos.

image-01

Efectivamente, un entorno de escritura para Hugo con todas estas características.

  • Interfaz Glassmorphic Moderna: Panel de control web elegante con diseño oscuro, animaciones fluidas y soporte completo para vistas responsive.
  • Asistente de Creación (Paso a Paso): Creación de nuevos artículos en 3 pasos interactivos:
    1. Introducción del título.
    2. Selección múltiple de categorías existentes en el repo (o añadir nuevas sobre la marcha).
    3. Selección múltiple de etiquetas existentes (o añadir nuevas).
  • Editor en Pantalla Dividida (Split-Screen): Interfaz de pantalla dividida al 50% que permite editar tus posts en Markdown de un lado y ver la previsualización en vivo en el otro.
    • Inserción de Imágenes: Un botón integrado en el pie del editor lateral te permite incorporar capturas de pantalla o fotos al instante.
    • Inserción de Enlaces — Botón en el pie del editor que abre un modal buscable con todos los artículos del repo.
    • Eliminación de Artículos (Delete) — con confirmación y redireccionamiento a la raíz
    • Mover Artículos (Move) — con árbol de directorios limitado a content/
    • Auto-guardado: Guardado automático inteligente en segundo plano mientras escribes, con un retardo de silencio (debounce) de 1.2 segundos para evitar sobrecargar el compilador.
    • Autorrefresco en Vivo (Live Reload): Hugo detecta automáticamente los cambios guardados y actualiza la previsualización en el navegador al instante.
    • Sincronización de Scroll: Desplazamiento milimétrico sincronizado entre el editor de texto y la vista previa del iframe.
  • Previsualización Responsive Integrada: Botones rápidos en la barra superior para cambiar el tamaño del visor al instante entre Móvil (375px), Tablet (768px) o Escritorio (100%).
  • Estadísticas de Compilación: Visualización en vivo en la cabecera de las páginas generadas, archivos estáticos procesados y el tiempo exacto del último build.
  • Listado de Borradores y Futuros: Sidebar lateral que agrupa cronológicamente todos tus borradores (draft: true) y posts con fechas futuras programadas.
  • Auto-Apagado Inteligente: Detiene de forma automática el proceso de Hugo en segundo plano tras 15 minutos de inactividad para ahorrar el 100% de CPU y RAM de tu servidor (se reactiva al instante cuando vuelves a abrir la pestaña).
  • Visor de Logs con LED Inteligente: Consola interactiva para depurar errores que incluye un indicador LED inteligente en la cabecera (verde si compila bien, rojo pulsante si detecta un fallo en los logs).
  • One-Click Push: Sube tus modificaciones locales a GitHub con un solo clic. El Token Personal de Acceso (PAT) se guarda automáticamente de forma segura en tu archivo .env en la primera subida para no tener que volver a escribirlo.

Aquí tienes una guía súper ligera, clara y directa paso a paso para que cualquier otro usuario pueda desplegar e integrar Hugo Deck en su propio servidor en menos de 5 minutos:

Cómo incorporar Hugo Deck a tu Servidor

Hugo Deck te permite gestionar, escribir y previsualizar tu blog de Hugo desde un panel web interactivo de pantalla partida. Todo funciona aislado en Docker.

Requisitos Previos

  • Tener Docker y Docker Compose instalados en el servidor.
  • Tener tu blog de Hugo subido a un repositorio de GitHub (público o privado).

Paso 1: Descargar Hugo Deck

Copia la carpeta del proyecto Hugo Deck en el directorio que prefieras de tu servidor (por ejemplo, /home/usuario/hugo-deck).

Paso 2: Configurar las Variables (.env)

En la raíz de la carpeta del proyecto, crea un archivo llamado .env y define la dirección de tu blog:

REPO_URL=https://github.com/tu-usuario/nombre-de-tu-blog.git
# Opcional (para poder subir cambios a GitHub con un solo clic):
GITHUB_TOKEN=tu_token_pat_de_github

Paso 3: Levantar el Contenedor

Entra en la carpeta del proyecto por terminal y arranca el contenedor de Docker:

docker compose up -d

El sistema clonará tu repositorio automáticamente dentro de la carpeta repo/ e iniciará los puertos.

Paso 4: Modificar plantilla (Edición de artículos y activar el Scroll Sincronizado)

Para que sea posible la edición de artículos y el scroll de tu editor lateral se sincronice milimétricamente con la vista previa del blog, edita la plantilla de tu blog de Hugo (habitualmente ubicada en layouts/_default/baseof.html dentro de tu repositorio) e introduce este pequeño script antes de cerrar la etiqueta </body>:

{{ if hugo.IsServer }}
<script>
  if (window.self !== window.top) {
      // Notifica navegación interna al panel
      window.parent.postMessage({ type: 'hugo-deck-navigate', path: window.location.pathname }, '*');
      // Sincroniza el scroll
      window.addEventListener('message', function(e) {
          if (e.data && e.data.type === 'hugo-deck-scroll') {
              const h = document.documentElement.scrollHeight - window.innerHeight;
              window.scrollTo({ top: h * e.data.percentage, behavior: 'auto' });
          }
      });
  }
</script>
{{ end }}

¡Listo para Usar!

Abre tu navegador web e ingresa a: http://<IP_DE_TU_SERVIDOR>:1314

Ya tendrás acceso a tu panel premium con auto-guardado en segundo plano, listado dinámico de borradores e inserción directa de capturas de pantalla/archivos de imagen.