Create Your Own Super Simple URL Shortener
I have always wanted to create my own URL shortener and use it to shorten all my links. But I always felt like creating it would take a lot of effort, although I never actually gave much thought to it.
But I came across a tweet containing a link to the video which showed how to create a simple URL shortener. This blog post is my attempt to share that approach with you.
Before we see how to create your own URL shortener, let's see why having a URL shortener can be useful.
If you are already convinced that having your own URL shortener can be useful, you can skip this section and directly jump to Creating Your Own URL Shortener section.
Benefits of Shortening Your URLs
It masks the original links.
Masking the URL has many advantages
For example, take this URL -
This URL is the link to the series that I am writing on Hashnode where I am developing a full-featured Markdown editor from scratch. But, the URL is so long and difficult to read and share on platforms like twitter.
Instead, wouldn't it be nice to have a simple short URL like
pbt.im/markdown-series which redirects to the above URL. It's short, crisp, readable, and also equally conveys what one can expect in that link.
Sharing affiliate links.
Other places where URL shortening can be useful is when you want to share or brand an ugly affiliate link, or when the domain of the link that you want to share is very long.
Social Media Profiles
Take a look at some of the shortened links that I frequently use.
|pbt.im/github (or) pbt.im/gh
|My GitHub Profile
|pbt.im/linkedin (or) pbt.im/li
|My LinkedIn Profile
|pbt.im/twitter (or) pbt.im/t
|My Twitter Profile
|My Hashnide Profile
|My Personal Website
|My Personal Blog
|My Personal Projects
|When I want to write a new blog
|When I want to look at my drafts
Sharing the above links is so easy. You don't even have to copy them. You can just type them out yourself. They are short, consistent, readable and can easily be remembered.
Links can change
Another disadvantage of sharing normal links is that the links can potentially change in the future.
If they do change, you can't hunt down every post and every place where you posted or shared that link and then update it. And it might not always be feasible to redirect the old URL to a new URL.
Shortened links can come in very handy in this situation. The shortened link that you share need not change ever. Whereas the URL that the short link should redirect to can change as you wish.
I even started using my URL shortener to create bookmarks. I added a short URL(
/bookmarks) that redirects to a GitHub page which contains all my other short URLs. Then whenever I want to bookmark a very useful URL, instead of bookmarking it normally, I started shortening it, which will automatically add it to my list of short URLs (which means it will also be available at
Now that we saw some of the reasons of how shortened URLs can help us, let's see how to create one yourself.
Creating Your Own URL Shortener
This is the tweet that inspired me to explore and create a URL shortener for shortening my links. I finally ended up using the approach that Kent suggested. I will be explaining the same in this article.
Before we jump into the actual content, let's see what Netlify redirects are. Netlify gives us an easy way to handle redirects for any site that is hosted on the platform. All you have to do is create a
_redirects file and then add the redirect rules in that file.
_redirects file, each redirect rule must be listed on a separate line, with the original path followed by the new path or URL. Any line beginning with # will be ignored as a comment.
Here is an example:
# Redirects from what the browser requests to what we serve
This is the bare minimum that you need to create your own URL shortener.
- Create an empty project with a single file called
- Add your short and complete URLs there.
- Deploy that project to Netlify.
You now have your own simple URL shortener.
Every time you want to add a new URL, you can just add it in the
_redirects file and then deploy it. If using this workflow is good enough for you, you can stop here and use it.
But Kent went a step further and created a package called netlify-shortener which simplifies the workflow of creating short URLs even further.
Follow these steps to start using
netlify-shortener and set up your own URL shortener
Step 1: Create an empty project
Step 2: Initialize it as npm project
npm init -y
Step 3: Create a
_redirects file and add the following content.
your-website.com will act as a fallback when the URL doesn't match any of the available short URLs. Replace it with whatever URL you want to have as a fallback.
Step 4: Add homepage and shorten script to your package.json (Add your own short domain URL to the homepage)
Now, you can run the following commands.
# Formats your _redirects file
npm run shorten
# Generates a short code and adds it for you
npm run shorten https://yahoo.com
# Adds gh as a short URL for https://github.com
npm run shorten https://github.com gh
npm run shorten command
- Generates a shortcode automatically if it is not provided.
- Validates your URL.
- Automatically check for URL collisions and throws an error if there is a collision.
- Adds the URL to the top of the
_redirectsfile and reformats the file properly.
- Pulls the changes from remote, adds the new shortened URL, commits the code, and then pushes the commit to the remote again.
- Automatically copies the short URL to your clipboard.
You don't even have to provide
https://, by default it assumes that the original link is
You can even add it as a global command in your shell using these instructions
My workflow for shortening a URL
Open the terminal and simply write
shorten original-URL short-slug.
For example, to shorten the link to my Github profile, I will run the following command
shorten github.com/pbteja1998 gh
If you have any more questions or want to explore more about this, go to netlify-shortener. The instructions that are in there are very clear, There is also a youtube video explaining this process at kcd.im/shortener
Which URL do you prefer when sharing in social media or with others? Short URL or the original one? Tell me in the comments.
Links and References: