GitHub + jsDelivr + PicGo + Imagine create a stable, fast, efficient free map bed

preface

Why use a map bed?

When publishing the same article on different platforms, the most painful point is the problem of picture storage. The file storage methods of different platforms are different, so it cannot be solved by pressing Ctrl + C directly. In order to solve this problem, MarkDown + graph bed is used to write the article. Place images in a single place and introduce image links throughout your text. Graph bed is a way of storing images in a third-party static repository that returns you a URL to retrieve the images. MarkDown supports displaying images using urls, which I think is one of the reasons programmers prefer it. As a programmer, you will find that many forums and communities now support MarkDown. If you share the same article without using A graph bed, you will have to edit and type it again and upload the image again on different platforms. With the chart bed, the situation is different, Ctrl+C is done, there is no need to Check the content of the article again.

The choice of drawing bed?

  1. Weibo figure bed: More people used to use it, but since April 2019, the anti-theft chain has been opened to cool the air
  2. SM.MS: Operation for more than four years, but also becoming slower and slower, at night directly can not open the picture, the speed is worrying
  3. Other niche map beds: Risk of death at any time
  4. Imgur and other foreign graphic bed: The speed of domestic visits is too slow, and there is a risk of being walled at any time
  5. Large factory storage service: Such as qiniuyun, Youpaiyun, Tencent Cloud COS, Ali cloud OSS, etc., the operation is cumbersome, and the real-name authentication is also the domain name record, troublesome, but also have to spend money (rich and not afraid of trouble when I did not say)
  6. Making figure bed: Free, but slow domestic access (but no matter, usejsDelivrFree CDN acceleration is enough)

Using the process

  1. Create a GitHub repository
  2. Generate a Token
  3. Configure PicGo and use JsdeliVR as CDN acceleration
  4. Use Imagine for image compression
  5. Upload images to PicGo and use the graph bed

Create a GitHub repository

  • Log in/register for GitHub
  • Create a new warehouse and fill in the name of the warehouse
  • Warehouse described
  • Set permissions topublic
  • Choose whether to initialize one for the warehouse based on your requirementsREADME.mdDescription file

Generate a Token

  1. Go to User profile picture -> SelectSettings

  1. Click on theDeveloper settings

  1. Click on thePersonal access tokens

  1. Click on theGenerate new token

  1. Fill in theTokenDescription, checkrepoAnd then clickGenerate tokenTo generate aToken

  1. To obtainTokenThe key

Note that this Token is displayed only once, save it for yourself or close the page after PicGo is configured

Configure PicGo and use JsdeliVR as CDN acceleration

Go ahead and download PicGo (click Download). Once installed, start configuring the map bed

  • Set warehouse name: according toUsername/map bed repository nameFill in the format of
  • Set the branch name:master
  • Set Token: Paste previously generatedToken
  • Specify storage path: Specify the desired storage path, for exampleimg/, which creates a name under the repositoryimg“, where the images will be stored
  • Set the custom field name: this is what PicGo will do after the image is uploadedCustom domain name + uploaded image nameGenerate access links in a way that puts them on the paste board as we use themjsDelivrAccelerated access, so it can be set toWarehouse name https://cdn.jsdelivr.net/gh/ username/images 

Q: What is Jsdelivr? A: jsDelivr offers free public CDN acceleration service for developersCopy the code

Use Imagine for image compression

Usually, the image size is over 200KB, so the page load is very slow, we usually compress the image, here I recommend Imagine (click download) support for all platforms.

Imagine uses lossy compression, so those who mind can skip this step

I recommend a website for lossless compression: tinypng.com/

Upload images to PicGo and use the graph bed

Once PicGo is configured, we can create efficiently. Drag and drop the compressed image into the upload area, and the access link will be automatically uploaded and copied. Paste the link into the blog post, and access will be fast

In addition, PicGo has album function, you can delete the uploaded pictures, modify links and other quick operations, PicGo can also generate different formats of links, support batch upload, shortcut key upload, custom link format, upload before renaming, etc., more functions to explore yourself!

Welcome to my personal blog: sitoi.cn