Logo

Mi Blog con Emacs y Esteroides

Emacs, IA y Linux: Poder y Simplicidad en tu Flujo de Trabajo

mybloggingnotes@gmail.com


22/03/2025

Emacs con Esteroides: Configurar un Contador de Visitantes para el Blog

Emacs con Esteroides: Configurar un Contador de Visitantes para tu Blog

¡Bienvenidos a una nueva entrega de Emacs con Esteroides! Hoy vamos a añadir un toque de funcionalidad a nuestro blog estático generado con Emacs y desplegado en GitHub: un contador de visitantes. Si usas Org Mode para escribir tus posts y un generador de sitios estáticos como Hugo o Jekyll, esto te permitirá saber cuántas personas visitan tu sitio sin complicaciones. ¡Vamos a ello!

Por qué un contador de visitantes

Un contador de visitantes no solo es una curiosidad divertida, sino que también te da una idea de quién está leyendo tu contenido. Para un blog minimalista y sin servidor, necesitamos una solución ligera que no dependa de bases de datos ni scripts pesados. Aquí entra en juego una herramienta externa como Hit Counter o una integración simple con servicios como GitHub Pages.

Paso 1: Elegir un servicio de contador

Para mantenerlo simple, usaremos un servicio gratuito como HitWebCounter o Simple Counter. Alternativamente, si prefieres algo más personalizado, puedes usar una función Lambda en AWS o un script en Cloudflare Workers, pero hoy nos quedaremos con la opción más directa.

  • Visita HitWebCounter o un servicio similar.
  • Registra tu sitio y obtén un fragmento de código HTML (normalmente un `<script>` o una imagen `<img>`).

Por ejemplo, el código podría verse así:

<img src="https://hitwebcounter.com/counter/id=123456" alt="Contador de visitas">

Paso 2: Integrarlo en tu blog con Org Mode

Si usas Hugo con Org Mode, puedes añadir el contador en tu plantilla base o en un archivo específico. Por ejemplo:

  1. Abre tu archivo de plantilla (e.g., themes/mi-tema/layouts/partials/footer.html).
  2. Pega el fragmento HTML donde quieras que aparezca el contador (como el pie de página).

En Org Mode, si prefieres incluirlo directamente en un post o en una página estática, usa un bloque HTML:

EXPORT html
<img src="https://hitwebcounter.com/counter/id=123456" alt="Contador de visitas">
EXPORT

Paso 3: Configurar Emacs para automatizar

¿Por qué no hacer esto más "Emacs"? Crea un snippet en yasnippet para insertar contadores rápidamente. Por ejemplo:

  • Abre tu archivo de snippets (yasnippet-snippets-dir) y crea uno nuevo en org-mode/ llamado contador:
# -*- mode: snippet -*-
# name: contador
# key: contador
# --
#+BEGIN_EXPORT html
<img src="https://hitwebcounter.com/counter/id=${1:123456}" alt="Contador de visitas">
#+END_EXPORT

Ahora, al escribir contador y presionar TAB, tendrás el código listo para personalizar.

Paso 4: Desplegar con GitHub

Una vez que hayas añadido el contador:

  1. Ejecuta tu comando habitual para generar el sitio (e.g., hugo).
  2. Haz commit de los cambios:

    git add .
    git commit -m "Añadir contador de visitantes al blog"
    git push origin main
    
  3. GitHub Pages actualizará tu sitio automáticamente.

Bonus: Monitoreo con Emacs

Si quieres ver estadísticas desde Emacs, considera usar un paquete como request.el para consultar APIs de contadores (si el servicio lo ofrece). Por ejemplo:

(require 'request)
(request
 "https://api.hitwebcounter.com/stats?id=123456"
 :parser 'json-read
 :success (cl-function
           (lambda (&key data &allow-other-keys)
             (message "Visitantes: %s" (alist-get 'visits data)))))

Conclusión

Con unas pocas líneas de código y la potencia de Org Mode, hemos añadido un contador de visitantes a nuestro blog estático. Emacs no solo nos ayuda a escribir, sino también a personalizar y automatizar nuestro flujo de trabajo. ¿Qué más puedes añadir con Emacs a tu blog? ¡Déjame tus ideas en los comentarios (si tu blog los tiene)!

Categoría: blog contador tutorial

Suscribirse al Feed RSS | Mapa del Sitio

© 2025 M.Castillo | Hecho con ❤️ en Emacs y org-static-blog

Visit counter For Websites