方寸之间

A few days ago, I accidentally discovered an interesting project on GitHub that allows you to build a URL shortening service without relying on your own server or database. I tried it myself and found it quite simple. Here, I will document the process of building it for reference, and interested friends can try it themselves.

Prerequisites#

1. Create two GitHub repositories, one for server storage and service (url_shortener), and one for database storage (url_shortener_db).
2. Register a domain name (optional). If you don't have one, you can use the GitHub Pages domain (username.github.io) directly. However, I used my own registered domain: blog.johan.zone.

Obtaining and Configuring the Source Code#

First, you need to obtain the source code for this service. You can directly fork this source code repository, or you are also welcome to fork my code repository.

Then, clone your repository to your local machine (or you can directly operate on the GitHub website). Modify the GITHUB_ISSUES_LINK field in the 404.html file to point to your url_shortener_db repository. The issues in this repository will serve as the database for storing your links:

var GITHUB_ISSUES_LINK =
"https://api.github.com/repos/username/repo-name/issues/";

Note: Replace username and repo-name above with your own username and repository name. Also, do not forget the final /, as it is crucial for retrieving the links.

Configuring GitHub Pages#

Next, configure GitHub Pages, which is also quite simple.

Click on the Settings option in your repository, find the GitHub Pages section, and configure the branch in the Source:

Choose the following options based on your needs:

If you don't use your own domain#

1. Delete the CNAME file in the repository.
2. Change var PATH_SEGMENTS_TO_SKIP = 0; to var PATH_SEGMENTS_TO_SKIP = 1; in the 404.html file.
3. With this, you can proceed to the next section.

If you use your own domain#

1. Go to your domain name service provider and add a CNAME record, pointing the domain to username.github.io. Replace username with your own GitHub username.

2. Wait for a few minutes (domain name resolution takes time, so it's better to do it in advance), then go back to the GitHub Pages section, enter your own domain name, preferably check Enforce HTTPS, and click Save. Refresh the page, and you will see the following content:

   

3. Change the domain in the CNAME file to the domain you configured.

4. With this, the configuration is complete, and you can proceed to testing.

Testing the Effect#

1. Create an issue in your GitHub repository that serves as the database. The title of the issue will be the link you want to shorten. You don't need to do anything else, just submit it.

2. Wait for a while, then query the link in your browser: https://<your-domain>/<issue-no>. For example: https://tldr.plus/2. Clicking on this link will redirect you to my blog. In this case, tldr.plus is my domain, and 1 represents the floor number of the issue.

Summary#

If you find it troublesome, you can also use the service I have set up. You can click here to provide a link.

Someone provided a good explanation here, which you can refer to.

Reference#