preface

Because of my good colleague’s got talent (blog) after the partner to work with me as long as there is free time will be to write a blog to summarize the latest knowledge, the Tony got me a little pressure, under his leading, I also began to slowly blogging thank thao elder brother, and so did the lazy me, but in the process of writing a blog discovered how to maintain their own images is a very difficult problem, At first, I used aggregation map bed, but there were limitations. Later, I saw that some friends used the object storage service OSS of Ali Cloud to make map bed, but unfortunately it cost too much money. I set up a map bed of Ali Cloud, but I didn’t have my own domain name, so I worried that it would be invalid one day. Finally, I chose to use Github to make a drawing bed. In this article, I will lead you to build your own Github drawing bed hand in hand with Typora to improve your writing efficiency.

Update 25 June 2021: Create a pit where token permissions are selected to resolve uploading image failures

Build the Github map bed

The first step is to create a Github repository. I recommend naming it Resource because I already have a Resource repository so I’ll use picture as an example.

In the second step, after establishing your warehouse, I suggest you release a release as soon as possible. For some unavoidable reasons, your pictures cannot be directly accessed on Github, so CDN acceleration is required here, and Jsdelivr is used here. This is mainly because it’s free and doesn’t provide much stability if you keep it for a while, but jsdelivr has the disadvantage of being able to accelerate CDN only for files up to 50M.

Click Create a New Release as I did above, jump to the screen shown below, follow steps 1, 2, and 3, don’t ask why master is in 2, I don’t know, but it’s OK, remember it has to be under the main branch, the main branch, Once that’s done, click Publish Release and your bed will be set up.

Once the bed is set up, all that remains is how to access it. Since we are using JsDeliVR for CDN acceleration, we only need to follow

cdn.jsdelivr.net/gh/ [guithub… picture] @main/ [picture address] to access the picture can be

Suppose you now have an image (hello.png) in your repository under the IMG folder

Cdn.jsdelivr.net/gh/ArrayTen…

If you open it up in your browser, you’ll find 66, but I’m just giving you an example, so you can follow the steps above

Using PicGo

Now we have a map bed, but manually uploading pictures by yourself is inevitably a very inefficient way to do, here to recommend the magic device PicGo

You will find that Github map bed can be configured here, so you need to configure it first before using it, I will teach you how to use it

Click the Github map bed on the left to configure the map bed. According to the example 1 in our article, it should be changed to [username] /picture. You can also customize it by yourself. Fifth step to set the custom domain name format according to cdn.jsdelivr.net/gh/ [username] / [storehouse… to set it, as for the third step you need to follow the following steps to obtain:

Open your Github and click Setting to go to Developer Settings

Click Generate new Token to get your Github token. Remember to find a place to save the token otherwise you will have to reset the token. I reset it again because I forgot. After obtaining the token, you can fill in PicGo, and then you can choose Github map bed in the upload area to upload pictures happily.

As a footnote, after you click Generate New Token button, you will be redirected to the page above. Note you can type any Note you like. Click Selecte ScRopes below to select it as shown in my picture.

PicGo combining Typora

Open your Typora selection file to select preferences

Select Images set your upload service to PicGo and you’ll be happy to upload your images efficiently in Typora. You can first insert your local images into Typora, then right click on the image to select Upload images, and then upload your images to Github.

Finish, that’s it. Your efficient bed tool has been set up perfectly, and the total setup time is less than 30 minutes.

Image upload failed pit

Verification Failed to fetch

I directly failed to upload pictures using Typora today, and baidu later found that the problem was the monitoring port of PicGo. I verified the picture uploading on Typora and told me that the current port was 36677, so I opened the PicGo setting and set the monitoring port to 36677, which is to modify the monitoring port as shown in the following figure. After setting, the image was uploaded successfully.