Tracking popular posts

Let's implement a self-hosted web analytics system to track my popular posts

5 min read

HEY! This is a DRAFT!

You sneaky little guy, how did you find this?

Well now that you're here... you can read whatevers here if you want, just don't share it around please.


I’ve been reading a lot of blogs lately and have noticed a bunch of my favourite sites have a “popular posts” section on their home page. All the work around this post was building up to this

The architecture

Before we break things down step-by-step, let’s check out a little architecture diagram to get our bearings:

Choosing an analytics service

To have any sort of insight into what’s “popular”, you’re going to need some sort of view tracking on your site aka “web analytics”. You’re also going to need an API or some sort of interface to programmatically request those post stats.

While I’ve had analytics systems in the past, I’ve always found a functional or ethical deal breaker that’s kept me away from them in the past.

Let’s quickly go over the services I’ve used, and the issues I’ve had with them:

It’s been around 6 months since I’ve had any sort of analytics on my site and since Umami was functionally exactly what I wanted, I figured I’d give that another shot. This time, I was going to host it on a server in my house, MoonTurtle.

Setting up Umami Analytics

Thanks to the operating system on the MoonTurtle server, Unraid, setting up Umami was relatively simple. All I needed to do was set up the docker image for Umami, create a database on my MySQL DB and finally update some config in my NGINX proxy manager application…

Creating the Umami database

Before we can set up an umami instance we need to create a database and database user for the umami application to use. Just log in to your MySQL DB of choice and…

-- create a new database
-- create a new user + password
CREATE USER 'umami_admin'@'*' 
IDENTIFIED WITH mysql_native_password 
BY '<some-password-goes-here>';
-- grant the new user all privileges on the umami database
TO 'umami_admin'@'*' WITH GRANT OPTION;

Since I already have a MySQL database setup, I just used that. If you need a database, you can spin one up on Railway with a few clicks, or set up a docker container.

I typically use TablePlus to connect to my home lab DB’s, check them out.

Creating the Umami docker image

Now that we have a database and database user, we have all the credentials required to set up the Umami docker container on our Unraid server:

  1. Login to the Unraid Dashboard
  2. Click the “Docker” tab
  3. Click the “Add Container” button below the list of your current containers
  4. Name the repository “umami” or something similar
  5. Use the following link to their docker repository
  6. Create some environment variables for the container
    1. DATABASE_URL: a MySQL connection string for the DB
    2. DATABASE_TYPE: this should just be mysql
    3. HASH_SALT: the salt used for passwords in the system
  7. Create a port mapping to expose the web port outside the container
    1. this should map the internal port 3000 -> an external port of your choosing
  8. Fill out all your environment variables
  9. Click save and watch the magic happen

After the docker image has been pulled down from the container registry and the application has (hopefully) started up, we should be able to navigate to your umami instance at http://<your-unraid-servers-ip>:<port from step 7>.

The default username and password is admin/umami. Once you’re in I would recommend changing that ASAP.

Updating NGINX

Now that the app is up and running, let’s expose it to the rest of the world. Since I use NGINX Proxy Manager (which is just a web GUI on top of NGINX) adding a new site is pretty dang easy.

See their docs for more info on how to use NGINX proxy manager to add a site. In my case, all I had to do was put in the subdomain I wanted to use ( and select the IP and port of the app reachable from my network.

I could have used any reverse proxy for this (Caddy, Apache, etc.), NGINX is just what I’m familiar with.

Adding Umami to the site

Adding umami to your site is the last step in actually collecting analytics.

Working with the Umami API

Creating a serverless function

Keeping the site up to date

Why not make it dynamic

Netlify build hooks

Setting up a job to rebuild the site

Things to improve

Static + dynamic

Integration in more places

About me

I'm Mykal Machon, I'm a web developer / coffee nerd from British Columbia, Canada. I'm currently working at the University of the Fraser Valley as a Systems Analyst.

Thanks for reading through this post! if you liked it, you can:


Responses on this site are powered by Webmentions!