Roll your own URL shortener using Netlify Redirects.

Note: I am not affiliated with Netlify

The Problem

Earlier this week I had a problem. I had just spun a self hosted instance of Plausible Analytics and I wanted to create some campaigns for my personal website to track where users were coming from on the internet, whether clicking on links in my post, social media bio's, etc. The problem is in creating my campaigns, my URL's all ended up looking something like:

https://mydomain.com?utm_source=dev.to&utm_medium=post&utm_campaign=post-click-throughs

Not a great look if the service doesn't shorten the URL's. I wanted a solution where I wasn't reliant on other services to clean up my URL's.

The Solution

What I needed here was a URL shortened that would shorten that hideously long looking URL into a shorter one, I had some spare domain names that were redirecting to my main domain so I decided to take sunny.gg and convert it into a URL shortener.

In my case I wasn't shortening URL's all the time so having a static solution where you couldn't create new URL's on the fly was acceptable, all I needed was the ability to shorten a set of long URL's into pretty short ones, and then share those around.

To achieve this I used Netlify and their redirects ability. Create a project that looks like this:

/app/index.html
/netlify.toml
/package.json

You can populate your /app/index.html as you see fit, it doesn't really matter in this case, just a bare HTML file will do. The netlify.toml file is where things get interesting:

[build]
  base = "/"
  publish = "app/"
  build = "echo 'no build command'"


# Primary redirect
[[ redirects ]]
  from = "/"
  to = "https://yourmainwebsite.com"
  status = 301

# Add as many of these as needed
[[ redirects ]]
  from = "/some-pretty-url"
  to = "https://mydomain.com?utm_source=dev.to&utm_medium=post&utm_campaign=post-click-throughs"
  status = 301

[[ redirects ]]
  from = "/foo"
  to = "https://mydomain.com/bar?utm_source=dev.to&utm_campaign=bar"
  status = 301

Thought somewhat of a crude solution, though I found it to work quite well, you can see it in action with my post footer on this post.

If you like this post, check out some of my other posts on my blog