Shortened URLs are easier to remember, which enables you to share them with anyone without having to look at your notes or your bookmarks.
They generally solve two main problems. One, you will not have to remember long URLs when you want to share. Other is to reduce the length of your URLs while sending marketing messages.
Suppose I want to share my Twitter profile,
bala.at/twitter would go to
https://twitter.com/vjbalavishnu. Let’s say
in the future if I decided not to use Twitter I can redirect
https://balavishnuvj.com/blog/why-i-left-twitter, explaining why I stopped
It would also help in reducing the length of the URLs, where every character in the message is charged.
Also, the links would look much cleaner. e.g.,
https://example.com/profile/1234. Having your custom domain would improve
credibility when you share URLs
Let’s see how we can build custom URL shortener. You would need
- GitHub Account
- Netlify Account
- Custom Domain (optional)
Netlify provides a simple way to define your redirects, called Netlify redirects.
All you would need to get started is a repo with a file called
This file would have the map between your short URL and actual URL.
We can start by creating a new repo in your GitHub account. I have named it
netlify-redirects. Lets create a file
_redirects with some config.
1/github https://github.com/balavishnuvj2/twitter https://twitter.com/vjbalavishnu3/linkedin https://www.linkedin.com/in/balavishnuvj45/* https://balavishnuvj.com/
The left-hand side would be a short link and the right-hand side would be the full link.
Let’s deploy this repo in netlify. You can do that by going to
Netlify. In the site section, add new site by
New site from Git. If you haven’t authorized netlify before, give
netlify the permission to access your repo. As soon as access is granted, your
work is nearly done.
Once deployed (will not take more than a few seconds ⚡️), you can go back to
Netlify. Under the site section, you would find a
Your “shortener” is working, can test it by going to
<random-text>.netlify.app/github or any other custom links you provided.
Now this isn’t as short as we wanted, Netlify allows us to edit the subdomain
name, so you can do that by going to
Domain Settings -> Options(under <radom-text>) -> Edit Site Name. I had
changed mine from
netlify-redirects.netlify.app. You will not be able to use the same, but you
can pick something that makes sense to you. Maybe
Now we have even shorter domain
takes us to desired page.
Once you have bought the domain, you have to change the domain name server to
what netlify would provide in
Domain Settings -> Add custom domain.
You would have to copy the name servers from Netlify to the domain name provider.
NOTE: It might take few hours for the name servers to get updated
So you might want to wait for a couple of hours if your custom domain doesn’t work.
To make things easier to add new URLs to your repo, Kent has created a package netlify-shortener. It has util to add shortener from your terminal.
1npm run shorten # simply formats your _redirects file2npm run shorten https://yahoo.com # generates a short code and adds it for you3npm run shorten https://github.com gh # adds gh as a short URL for you
From the original documentation of netlify-shortener.
There are few shortcomings with this approach of building a custom URL
shortener. If you want the same URL for all the users you are good to go. e.g.,
bala.at/twitter should go to
https://twitter.com/vjbalavishnu. But what
if you require a unique one for each user? e.g., You want users’ to be able to
share their profile. Let’s see the actual URL would look like
https://example.com/profile/<user-id>. We will not be able to generate unique
URLs for each user. But we can forward URL params to the actual URL. We use
We have prefixed all URLs that have to go to
p. So now
bala.at/p/1234 should take to
Analytics is one of USP for most of the URL shorteners, we won’t be able to do that here, but you can add analytics to your webserver that should handle most of your use cases.
Yup, that’s all. We have our custom domain URL shortener. 🕺
Got a Question? Bala might have the answer. Get them answered on #AskBala
Subscribe Now! Letters from Bala
No spam, just some good stuff! Unsubscribe at any time