I felt the need to create my own URL Shortener. I ended up with a template repository for making URL Shorteners with Jekyll and GitHub Pages.

The source code and documentation can be found here:

What?

URL shortening is a technique on the World Wide Web in which a Uniform Resource Locator (URL) may be made substantially shorter and still direct to the required page.

The Jekyll URL Shortener repository is a template for creating your very own URL Shortener:

✂️🔗 This is a template repository for making URL Shorteners with Jekyll and GitHub Pages. Create short URLs that can be easily shared, tweeted, or emailed to friends. Fork this repo to get started.

How?

To create your own URL Shortener, do this:

  1. Buy and configure a (short) domain name
  2. Fork or clone the Jekyll URL Shortener repository
  3. Configure the repository and code to your liking
  4. Create short links with Jekyll pages

Here follows a description of how I created my own URL Shortener…

1. Domain Name

I bought the domain name hlaueriksson.me from a Swedish domain name registrar. I will use this as an apex domain, so I configured A records with my DNS provider:

DNS

2. Fork / Clone

I cloned the Jekyll URL Shortener repository to https://github.com/hlaueriksson/hlaueriksson.me

3. Configure

The _config.yml file, located in the root of the repository, contains configuration for Jekyll.

I modified this file to fit my needs:

The Settings / GitHub Pages of the repository provides configuration for hosting the Jekyll site.

I modified these settings to fit my needs:

GitHub Pages

Short links are created with as Jekyll pages in the root of the repository:

Why?

Why would you create your own URL Shortener?

With Jekyll URL Shortener you could:

  • Have a vanity or branded domain name
  • Create neat custom slugs for the short links
  • Create short links with emoji
  • Track short links with Google Analytics

Credit

The Jekyll URL Shortener is made possible by:

Disclaimer

The redirecting is done with the jekyll-redirect-from plugin.

Redirects are performed by serving an HTML file with an HTTP-REFRESH meta tag which points to your destination.

So, the HTTP status codes 301 (permanent redirect), 302, 303 or 307 (temporary redirect) are not used.