Set Up Analytics with Hugo

In this post, I’ll walk you through how I set up an analytics solution for my Hugo-based blog. I wanted to avoid using Google Analytics or other invasive services that collect excessive data, so I opted for a simple, self-hosted alternative.

After some research, I discovered Shynet. It’s easy to set up, and it collects only the most relevant data, ensuring a more privacy-conscious approach to analytics.

Setting Up Shynet

You can easily set up Shynet using Docker.

  1. Create a Docker Compose file with the following content (see documentation for more details).

compose.yaml

services:

  frontend:
    image: milesmcc/shynet:latest
    container_name: analytics
    environment:
      DB_NAME: analytics
      DB_USER: analytics
      DB_PASSWORD: analytics
      DB_HOST: db
      DB_PORT: 5432
      DJANGO_SECRET_KEY: abc
      ALLOWED_HOSTS: localhost
      CSRF_TRUSTED_ORIGINS: http://localhost
      LANGUAGE_CODE: en-us
      ACCOUNT_SIGNUPS_ENABLED: 'True'
      ACCOUNT_EMAIL_VERIFICATION: none
      TIME_ZONE: Europe/Zurich
      SCRIPT_USE_HTTPS: 'True'
      SCRIPT_HEARTBEAT_FREQUENCY: 5000
      SESSION_MEMORY_TIMEOUT: 1800
      ONLY_SUPERUSERS_CREATE: 'True'
      PERFORM_CHECKS_AND_SETUP: 'True'
      PORT: 8080
      SHOW_SHYNET_VERSION: 'True'
      SHOW_THIRD_PARTY_ICONS: 'True'
      BLOCK_ALL_IPS: 'False'
      AGGRESSIVE_HASH_SALTING: 'True'
      LOCATION_URL: https://www.openstreetmap.org/?mlat=$$LATITUDE&mlon=$$LONGITUDE
      DASHBOARD_PAGE_SIZE: 5
      USE_RELATIVE_MAX_IN_BAR_VISUALIZATION: 'True'
    depends_on:
      - db
    ports:
      - 8080:8080

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: analytics
      POSTGRES_PASSWORD: analytics
      POSTGRES_DB: analytics
  1. Start Shynet by running the command: docker compose up. The first time you start it, you might encounter an issue with the frontend since the database needs to initialize. If that happens, just cancel with Ctrl + C and run it again—everything should work on the second attempt.
  2. Create the admin account by running the following command: docker exec -it analytics ./manage.py registeradmin mail@domain.ch. The password will be printend in the output.
  3. You should now be able to access the Shynet admin interface at http://localhost:8080/admin/ and log in using the account you just created.

Embedding Shynet

To integrate Shynet into your Hugo site, add the following code:

{{ if hugo.IsProduction }}
<noscript>
    <img src="https://statistics.patrickuhlmann.ch/ingress/9dde838d-4110-44cc-a23b-0ae96d3ef9cd/pixel.gif">
</noscript>
<script defer src="https://statistics.patrickuhlmann.ch/ingress/9dde838d-4110-44cc-a23b-0ae96d3ef9cd/script.js"></script>
{{ end }}

Depending on the theme you are using, this code should be placed in different locations. If you’ve set up your site using the default Ananke theme (see Quickstart), follow these steps:

  1. Copy the file themes/gohugo-theme-ananke/layouts/partials/site-footer.html to layouts/partials/site-footer.html in your Hugo project. This will overwrite default footer file from the theme with your version.
  2. Add the Shynet code at the beginning of this file.