This content originally appeared on DEV Community and was authored by Sunny Golovine
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
This content originally appeared on DEV Community and was authored by Sunny Golovine
Sunny Golovine | Sciencx (2021-06-11T14:12:52+00:00) Roll your own URL shortener using Netlify Redirects.. Retrieved from https://www.scien.cx/2021/06/11/roll-your-own-url-shortener-using-netlify-redirects/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.