GitHub+JSDelivr+PicGo+Typora Create GitHub repository 2. Use jsDelivr for CDN acceleration 3. Upload pictures using PicGo 4. Typora configure PicGo upload

GitHub+JSDelivr+PicGo+Typora free white whoring high-speed stable map bed

Purpose 0.

Usually writing articles, often need to insert pictures, inevitably need to use map bed tools to convert local pictures into links. There are a lot of bed mapping tools out there, but many of them cost money, and some are free and potentially unstable. GitHub as the world’s largest “gay dating website”, not only high stability, and easy to use, the key can also be free whoring! Here’s how to make GitHub a better use of your bed.

1. Create the GitHub repository

Sign up/log in to GitHub and create a new public repository with any name. Then upload the image to the repository. Here I directly use the browser to upload, or you can use Git to upload.

  • Click in the repository you createdUpload files.

  • Select the uploaded image and submit it.

  • After submission, you can address https://raw.githubusercontent.com/ via the browser your user name/your warehouse name/main/file path to access the uploaded pictures.

    Such as: raw.githubusercontent.com/yifeng-talk…

  • Use this link later when inserting images into your blog.

2. Use jsDelivr for CDN acceleration

Previously, GitHub warehouse has been used to realize the graph bed function, but as we all know, GitHub is very slow to access in China, and even often can not be opened, so our pictures have the problem of slow loading, what to do? JsDelivr solves this problem by dramatically improving the responsiveness of image access and is open source and free! JsDelivr – A free, fast, and reliable CDN for Open Source.

Method of use is also very simple, directly in the browser through your user name/address https://cdn.jsdelivr.net/gh/ warehouse name @ released version number/file path can access the picture on the lot, and the response speed is very fast! One @ release version number can be omitted, the default load the latest version, which can be abbreviated to https://cdn.jsdelivr.net/gh/ directly your user name/your warehouse name/file path

Such as: cdn.jsdelivr.net/gh/yifeng-t…

3. Upload pictures using PicGo

Previously implemented GitHub repository as graph bed, jsDelivr accelerates images. However, every time we need to use Git tools or upload pictures in GitHub warehouse, and we need to join the picture address by ourselves, which is very troublesome. Is there a faster and simpler way? This is where the PicGo artifact comes in handy, also open source and free!

PicGo is a tool for quickly uploading images and getting URL links to images. It supports multiple map beds, including the GitHub map bed. It also supports Windows, macOS and Linux platforms. Molunerfinn/PicGo: A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder (github.com)

Here take Windows as an example to explain how to use PicGo.

  • Download and install PicGo, github.com/Molunerfinn…

  • Open PicGo software, find GitHub map bed in map bed Settings, and fill in the relevant information.

    • Set warehouse name [required] : Fill in your username/your warehouse name, such as my Yifen-Talking/Pictures

    • Set branch name [Required] : Enter main

    • Set Token [required] : Click on your profile picture on Github homepage, and then go to [Settings] -> [Developer Settings] -> [Personal Access Tokens] -> [Generate New Token]. Fill in the description of the Note. Set Expiration time as never Expiration No Expiration, check [repo], then click [Generate Token] below to Generate a token, this token will be displayed only once, save, and copy to PicGo.

    • Specify storage path [optional] : Fill in the path where the images will be stored, such as “images/”. This will create a folder named “images” under the repository. The images will be stored in this folder.

    • Set the name of the custom domain To upload pictures, PicGo will according to the custom domain name + upload pictures name 】 【 way to generate the access links, on the clipboard, because we want to use jsDeliver speeding, so here is set to https://cdn.jsdelivr.net/gh/, your user name/your warehouse For example, I set to * * cdn.jsdelivr.net/gh/yifeng-t… **

  • You can then upload your own image in the upload area, or even upload a screenshot of the clipboard directly, and then copy the link directly to the clipboard, so you can copy it directly to your blog (MarkDown editor).

  • In PicGo Settings, you can customize some Settings, such as pre-upload renaming, timestamp renaming, etc.

4. Typora configures PicGo upload

The PicGo tool is used to quickly upload images and obtain image URL links, which is much more convenient, but each time you need to upload in PicGo first, and then copy the links from the clipboard to the MarkDown editor. Is there a more elegant and convenient way to combine the two steps into one? The answer is Typera+PicGo.

Typera — a Markdown Editor, Markdown Reader Typora — a Markdown Editor, Markdown Reader Typora — a Markdown Editor, Markdown Reader Typora — a Markdown Editor, Markdown Reader Typora — a Markdown Editor, Markdown Reader

Here is the introduction of Typora combined with PicGo to achieve upload function.

  • Download Typora from Typora — a Markdown Editor, Markdown Reader.

  • Open PicGo, click “Set Server” in PicGo Settings, and change the listening port to 36677

  • Open Typera, click [File] -> [Preferences] -> [Image], and then configure the following, where the PicGo path is your PicGo installation path.

  • When writing articles in Typera, images will be automatically uploaded and displayed in articles when inserting pictures (or directly copying screenshots), which is very convenient. Of course, you can also choose not to upload the image when inserting the image, that is, the image is not automatically uploaded, you can manually right-click the image to upload the image.

GitHub + jsDelivr + PicGo + TyPora to build a free stable map bed.