Skip to main content
HUGO: Implementando Telemetría Serverless en Hugo con Lyket (Botón de Aplausos) - Featured image

HUGO: Implementando Telemetría Serverless en Hugo con Lyket (Botón de Aplausos)

• Saul Ojeda • 621 words • 3 min

Implementando Telemetría Serverless en Hugo con Lyket

Migrar a un generador de sitios estáticos (SSG) como Hugo ofrece ventajas masivas en seguridad y velocidad al no depender de bases de datos para servir el contenido. Sin embargo, esto presenta un reto cuando queremos integrar interactividad básica, como un contador de “Me gusta” o “Aplausos” en nuestra Knowledge Base.

En lugar de levantar contenedores adicionales o bases de datos solo para registrar clics, la solución más elegante es utilizar un enfoque Serverless desacoplado. Aquí es donde entra Lyket, una API externa que maneja la telemetría transaccional mientras nuestro frontend se mantiene 100% estático.

Requisitos Previos

  • Un sitio funcional generado con Hugo.
  • Una cuenta gratuita en Lyket.dev.
  • Acceso a los archivos de layout de tu tema (específicamente head.html y single.html).

Paso 1: Configuración de la API y Seguridad (CORS)

Lyket utiliza políticas estrictas de Denegación por Defecto (Deny-All) para proteger tu cuota de peticiones. Si simplemente pegas el código, tu navegador bloqueará el tráfico (Error 403 Forbidden).

  1. Ingresa al dashboard de Lyket y copia tu Public API Key (usualmente comienza con pt_).
  2. Navega a la sección de Settings / Allowed Domains.
  3. Añade a la lista blanca (Whitelist) tanto tu entorno local como tu dominio de producción:
    • http://localhost
    • https://mxlit.com <—- Esto dependerá de tu site.

alt text

Paso 2: Inyección Global del Script (head.html)

Para evitar condiciones de carrera (donde el DOM intenta dibujar el botón antes de que el script principal cargue), debemos inyectar el motor de Lyket en la cabecera global de la página.

Localiza el archivo de cabecera de tu tema (por ejemplo, layouts/partials/head.html) y añade la siguiente línea antes del cierre de la etiqueta </head>:

<script src="[https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=TU_PUBLIC_API_KEY_AQUI](https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=TU_PUBLIC_API_KEY_AQUI)"></script>

alt text

Paso 3: Renderizado del Componente y Ajuste Visual (single.html)

El mayor desafío en sitios con internacionalización (i18n) o estructuras de Leaf Bundles es mantener un ID consistente para que el contador sea el mismo sin importar el idioma. En lugar de depender del título o variables inestables, utilizaremos la función nativa de Hugo RelPermalink para extraer un ID limpio.

Localiza tu archivo layouts/_default/single.html y coloca este bloque justo al final del contenido de tu artículo (antes del footer):

{{- if not .Params.noLike }}
<div style="margin-top: 3rem; margin-bottom: 2rem;">
  
  <div 
      data-lyket-type="clap" 
      data-lyket-namespace="mxlit-blog" 
      data-lyket-id="{{ replace (path.Base .RelPermalink) "/" "-" }}" 
      data-lyket-template="simple" 
      data-lyket-color-text="white"
      data-lyket-color-primary="transparent"
      data-lyket-color-secondary="transparent"
      data-lyket-color-icon="#5EEAD4">
  </div>

</div>
{{- end }}

alt text

Desglose Técnico de la Arquitectura Visual:

{{ replace (path.Base .RelPermalink) “/” “-” }}: Esta fórmula toma la URL relativa del post, extrae la base y reemplaza las diagonales por guiones (ej. /es/news-00002/ se convierte en un ID plano news-00002). Esto garantiza que la API siempre reciba un identificador válido.

data-lyket-color-primary=“transparent” y secondary=“transparent”: Elimina el fondo sólido por defecto de la plantilla para que el widget se funda con el tema oscuro (Dark Mode).

data-lyket-color-icon="#5EEAD4": Fuerza el ícono a utilizar el color de acento principal del sitio.

Validación

Inicia tu servidor local de Hugo (hugo server -D).

Pausa temporalmente cualquier Ad-Blocker o filtro DNS (como Pi-hole), ya que suelen bloquear el tráfico hacia api.lyket.dev en entornos locales.

Abre cualquier post, dale clic al botón y verifica en la pestaña Network de tu navegador (F12) que la petición POST regrese un código 200 OK.

Tu dashboard de Lyket ahora debería registrar los clics mapeados al ID exacto de tu artículo.

alt text

Conclusión

Implementar telemetría en un sitio estático no tiene por qué comprometer los principios de una arquitectura Zero-Touch. Al delegar el procesamiento transaccional a una API externa y Serverless como Lyket, logramos mantener nuestro VPS libre de bases de datos innecesarias, preservando la velocidad extrema y la seguridad de los archivos HTML puros. El resultado es una base de conocimiento interactiva que nos permite medir el impacto y el valor de nuestro contenido en la comunidad, sin sacrificar rendimiento.