Create Your Own Super Simple URL Shortener

How I Gave A Modern Look For HackerNews Feed

In this article, we will see how to create a simple URL shortener. We will be using Netlify Redirects and a package called netlify-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 -

hashnode.com/series/how-i-made-a-markdown-editor-with-ability-to-embed-youtube-videos-codepens-etc-cke6g1y2x00afxms17vp30803

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.

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.

Take a look at some of the shortened links that I frequently use.

Link	Description
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
pbt.im/hn	My Hashnide Profile
pbt.im/site	My Personal Website
pbt.im/resume	My Resume
pbt.im/blog	My Personal Blog
pbt.im/projects	My Personal Projects
pbt.im/new	When I want to write a new blog
pbt.im/drafts	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.

Bookmarks

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 /bookmarks)

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.

Netlify Redirects

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.

In a _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
/home              /
/blog/my-post.php  /blog/my-post
/news              /blog
/cuties            https://www.petsofnetlify.com

This is the bare minimum that you need to create your own URL shortener. - Create an empty project with a single file called _redirects. - 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

mkdir url-shortener
cd url-shortener

Step 2: Initialize it as npm project

npm init -y

Step 3: Create a `_redirects` file and add the following content.

# fallback/*       https://your-website.com

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)

{
  "homepage": "https://pbt.im",
  "scripts": {
    "shorten": "netlify-shortener"
  }
}

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

The 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 _redirects file 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 https://

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

TL; DR

Checkout netlify-shortener

Checkout demo at kcd.im/shortener

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: