At present, links shared by many platforms use a Short URL technology, such as Sina’s T.Cn, Telegram’s T.me and Twitter’s T.Co.

These links tend to have very short suffixes, just a few random characters or numbers. It can be set to auto-growth or generated using the Hash algorithm, as long as it is unique. Then in the server database, through the unique random code, find the corresponding URL for redirection.

Therefore, if we need to build our own short link service, we usually need to have a separate server or database. However, someone on GitHub offers an idea to use GitHub Pages to build your own short link service for free.

Step 1

Firstly, a new repository will be created on GitHub as a database to store links. The author named it gh-pages- URL-shortener-db.

Step 2

Fork the link repository, open 404.html, modify the GITHUB_ISSUES_LINK field in the file, and point the value to the gh-pages-url-shortener-db repository I created in the previous step.

// notice that {username} and {dbname} are replaced with your own username and repository
var GITHUB_ISSUES_LINK = "https://api.github.com/repos/{username}/{dbname}/issues/";
Copy the code

Step 3

Finally, go to Settings->GitHub Pages->Source Settings to configure the GitHub Pages branch.

Now put it to the test!

Open an issues in the gh-pages- URL-shortener-DB repository established in the first step, and the title is the long link to be converted.

For example, HERE I use a link with a Chinese translation, which will locate the kobe Bryant entry on Baidu Baike.

Now, you can jump to the baidu Encyclopedia entry by typing the url mayandev.top/link/1 into your browser.

To avoid emails, you are advised to disable the notification function of the warehouse.

Too cumbersome to create issues manually?

GitHub provides a command-line interface (CLI) tool that allows you to manipulate issues from a terminal.

You can also do short chain conversion using a command-line tool I wrote.

The short link conversion is complete with the following Settings.

# Install tools
npm install gh-short-url -g
Set username and domain name
shorten config --database=${repo-name} --user=${username} --pages=${domain}
# shorten it!
shorten https://en.wikipedia.org/wiki/Kobe_Bryant#Basketball_legacy/
Copy the code

I open source the tool in the Gh-short-URL repository on GitHub. Welcome to star 🌟! Thanks to the original Repo authors for the inspiration.

How does this Work?

Why is it possible to implement short links through GitHub Pages? The author of the original Repo mentions:

  1. 404.html handles all requests
  2. Small javascript snippet fetches a JSON representation of the GitHub issue via the JSON API, and redirects to the issue title, as a URL.
  3. Profit?

The real secret lies in 404.html, which interested readers can read for themselves.

After the