Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use Github+JsDelivr to build a free picture bed". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Text

The contents of this article include:

Create a github repository

Use jsDelivr free CDN to speed up picture access

Create Token

Use PicGo to configure the github chart bed

To create a github warehouse, you can skip the steps of how to sign up for a github account. Anyone who does the technology knows.

1. Log in to your github account and create a new warehouse.

2. Then fill in the information of the warehouse, mainly the name of the warehouse, other general default.

3. After clicking create repository, skip to this page, which means that the creation is successful.

Then you can upload a picture and try it. However, it is possible that you will encounter a situation where the picture you see on github is cracked.

Just add the following code to your computer's hosts file. The hosts file directory under windows is located in C:\ Windows\ System32\ drivers\ etc. (note to open it with administrator privileges) / etc/hosts under mac.

# GitHub Start 52.74.223.119 github.com 192.30.253.119 gist.github.com 54.169.195.247 api.github.com 185.199.111.153 assets-cdn.github.com 151.101.76.133 raw.githubusercontent.com 151.101.108.133 user-images.githubusercontent.com 151.101.76.133 gist.githubusercontent.com 151.101.76.133 cloud.githubusercontent.com 151.101.76.133 camo.githubusercontent.com 151.101.76.133 Avatars0.githubusercontent.com 151.101.76.133 avatars1.githubusercontent.com 151.101.76.133 avatars2.githubusercontent.com 151.101.76.133 avatars3.githubusercontent.com 151.101.76.133 avatars4.githubusercontent.com 151.101.76.133 avatars5.githubusercontent.com 151.101.76.133 avatars6.githubusercontent.com 151.101.76.133 avatars7.githubusercontent.com 151.101.76.133 avatars8.githubusercontent.com

Then go back to your photo warehouse and refresh the page to display the picture normally.

Use jsDelivr for free acceleration

In fact, the pictures in your warehouse can be accessed normally at this time. Here I take the warehouse myImages that I created as an example.

To access the test.png image in the repository, you need to change the blob in the link address to raw. That is, https://github.com/starry-skys/myImages/raw/main/test.png. Or concatenate a raw=true after the address, that is, https://github.com/starry-skys/myImages/blob/main/test.png?raw=true.

However, we found that direct access to pictures through github, the speed is not particularly ideal, after all, the server is abroad.

Therefore, we can use jsDelivr for CDN acceleration. This is completely open source and free.

The method of use is very simple, that is, change the link domain name of the picture address to the domain name of CDN. The format is as follows:

The path of the https://cdn.jsdelivr.net/gh//@/ picture

Take the above test.png image as an example. The warehouse version number directly uses the branch name. Since the main branch name of github is now called main, the version number is written as main. The image path is the relative path in the warehouse, because I'm here in the root directory, so it's test.png.

The final address is https://cdn.jsdelivr.net/gh/starry-skys/myImages@main/test.png.

For other instructions, please refer to the official website of jsDelivr and jsDelivr.

Configure typora to automatically upload to the github chart bed

Next, if you need to set up automatic upload to the gtihub graph bed in typora, you also need to do some configuration.

First, create a token on github.

1. Click settings on the account in the upper right corner.

2. Click developer settings on the left, click personal access tokens, and then click generate new token.

3. Note is used to explain the purpose of creating token, and then scopes only needs to select all the options of repo.

4. Finally, pull to the bottom, click generate token, and you will succeed.

5. Find a place to write down this string of token, which you will need later. (if you don't remember it, you'll have to regenerate it when you check it again.)

Open the PicGo to configure the github bed

In PicGo, find the drawing bed settings-> GitHub drawing bed.

The warehouse name is your github account / photo warehouse name.

The branch name uses the default main.

Token, just fill in the Token generated by us just now.

If you need to specify a subdirectory, you can fill in the storage path, such as img/. If I don't fill it in here, it will be uploaded to the root directory of my photo warehouse.

For a custom domain name, enter the domain name of jsDelivr, that is, the image access address, excluding the first half of the image path. Here is https://cdn.jsdelivr.net/gh/starry-skys/myImages@main.

Finally, it is set as the default picture bed, and the next time you upload a picture in typora, it will be automatically uploaded to the github picture bed.

This is the end of "how to use Github+JsDelivr to build a free picture bed". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.