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

Today, I will talk to you about how to create a graph bed with PicGo+GitHub. Many people may not know much about it. In order to let you know more, Xiaobian summarizes the following contents for you. I hope you can gain something according to this article.

PicGo

This is a tool for uploading pictures. It currently supports SM.MS picture beds, Weibo picture beds, Qiniu picture beds, Tencent Cloud COS, Alibaba Cloud OSS, Imgur, Youpai Cloud, GitHub and other picture beds. More picture beds will be supported in the future.

The idea to solve the problem is to send the local file, or screenshot above the clipboard, to the image bed, and then generate a link to the online image, so that the Markdown document can fly up, where you can use it???

Among the many graphical beds, I chose the GitHub graphical bed, which can be customized.

Create your own GitHub graph bed

1. To create a GitHub graph bed, you need to register/log in to a GitHub account 2. Creating a Repository

Click on the "New repository" button

Step 4: repository initializes README file, optional.gitignore adds ignore folder, optional open source protocol, optional

3. Generate a Token for operating the GitHub repository

Go back to the home page and click the Settings button

After entering the page, click on the "Developer settings" button

Click on the "Personal access tokens" button

Create a new Token

Fill in the description, select "repo" permission, then click "Generate token", at least select repo item

Note: After successful creation, a string of tokens will be generated. This string of tokens will not be displayed again. Therefore, when you first see it, you can create a text file to save it. You forget that you can only regenerate it. Each time is different.

GitHub

Github is undoubtedly playing the role of a "repository" in the graph bed.

Now review the next steps:

In the settings section of your personal account, find Developer settings at the bottom left. Find Personal access tokens. Click Generate new token on the right.

The name can be written freely here, and the scope behind it can be checked by repo. Write it down to generate a good token. The goal of this step is to generate a token that represents your identity and hand it to picgo so that it can upload images for you without the hassle of git commit.

In your repository, click releases. Then click Draft New Release next to it, and finally click Publish release. This step means releasing a version that our jsDelivr will use.

jsDelivr This is a service for cdn acceleration, and the amazing thing is that you don't have to configure anything for it--contrast, we go straight to vs picgo.

PicGo

This itself is a handy GUI tool to upload on a graph bed, but I recommend using its vs code plugin version here.

In VS Code, search for PicGo plugins and install them.

Open VS Code settings and search for picGo.

Just change the drop-down option for current to github

Change Github: branch to master

Change Github: Custom Url here to the repository address distributed using jsDelivr. That is https://cdn.jsdelivr.net/gh/your github username/the repository name just built, so that we can speed up the access to images in the future!

Change Github: Repo to github username/repository name

Change Github: Token to token just recorded on Github

Configure PicGo1. Download PicGo.

macOS users please download the latest version of dmg file, windows users please download the latest version of exe file, linux users please download AppImage file.

How to use AppImage files?»the portal

2. configuration chart bed

After that, you can configure it according to this configuration format!

When setting the warehouse name, fill in the format of "Account Name/Warehouse Name"

Branch name uniformly fill in master

Paste the previous Token here

The path to the store can be written as I do, creating a folder "xxx/xxx/xxxxx/" under repository, of course, you can define your own folder name.

The function of custom domain name is that PicGo will place the access link generated by "custom domain name + uploaded image name" on the clipboard https://cdn.jsdelivr.net/gh/ username/ RepositoryName /branch name after the image is uploaded successfully. Custom domain name needs to be filled in as follows

3. Shortcuts and related configurations

Support shortcut keys command+shift+p (macOS) or control+shift+p (windows\linux) to support quick upload of pictures (the first one) in the clipboard.

PicGo supports custom shortcut keys. See the configuration manual for instructions.

Note: You can set the shortcut keys to ctrl+shift+c.

4. other relevant

vs-picgo: VSCode version of picgo.

After setting up the above steps, you can make your Markdown document fly up. After each screenshot, you can press ctrl+shift+c, which will convert the screenshot above the clipboard into an online network image link. It's not too cool!

After reading the above, do you know more about how to create a graph bed with PicGo+GitHub? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

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.