PicGo introduction

This is a picture uploading tool, currently support SM.MS picture bed, Weibo picture bed, seven niu picture bed, Tencent Cloud COS, Ali cloud OSS, Imgur, Youbiyun, GitHub and other picture bed, will support more picture bed in the future.

The idea is to send a screenshot from a local file or clipboard to the map bed, and then create a link to an online image. This will make the Markdown document fly and use 😊 wherever you go.

Among the many graphic beds, I chose the GitHub graphic bed, which can be extended for customization.

Create your own GitHub map bed

1. Before creating a GitHub bed, you need to register/log in to GitHub

2. Create the Repository

Click the “New Repository “button

Step 4: Repository initializes the README file, optional. Gitignore adds ignore folder, optional Open source protocol, optional

3. Generate a Token to operate GitHub Repository

Go back to the home page and click the “Settings” button

After entering the page, click the “Developer Settings “button

Click the “Personal Access Tokens “button

Creating a New Token

Fill in the description, select the “repo” permission, and then click “Generate Token “to select at least the “repo” option

Note: a string of tokens will be generated after the successful creation, which will not be displayed later, so when you see it for the first time, you can create a text file to save it, forget that you have to regenerate, every time it is different.

GitHub

Github is no doubt playing the role of a “warehouse” in the map bed.

Now review the steps:

  • In Settings of your personal account, go to Developer Settings at the bottom left. Find Personal Access Tokens. Click Generate New Token on the right.

  • You can write the name as you like, and then you can check the repO box. Make a note to generate good tokens. The purpose 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.

  • So in your warehouse, click On Releases. Next to Draft New Release, Publish Release. This step is to release a version, which our jsDelivr will use.

JsDelivr is a service for CDN acceleration, and the magic is that you don’t need to configure anything for it — instead, let’s jump right into VS Picgo

PicGo

This in itself is a GUI tool for easy uploads, but I recommend using the VS Code plug-in version.

  1. In VS Code, search for the PicGo plug-in and install it.
  2. Open VS Code’s Settings screen and search for picGo.
  3. Just change the current drop-down to Github
  4. Github:branch: master
  5. theGithub: Custom UrlI’m going to usejsDelivrWarehouse address for distribution. namelyhttps://cdn.jsdelivr.net/gh/ you making user name/newly built warehouses, so that we can speed up the future access to the picture!
  6. Change Github: Repo to Github username/repository name
  7. Change the Github: Token to the Token you just logged on Github

Configuration PicGo

1. Download and runPicGo.

For macOS users, download the latest DMG file. For Windows users, download the latest EXE file. For Linux users, download the latest AppImage file.

How to use the AppImage file? » » portal

2. Configure the map bed

Then follow this configuration format to configure!

  • When setting the warehouse name, enter it in the format of account name/warehouse name
  • Enter the same branch namemaster
  • The previousTokenStick it here
  • The path of storage could be written the way I wrote it, and it would be atrepositorySo let’s create one"XXX XXX/XXXXX/"Folder, of course you can define your folder name.
  • The purpose of the custom domain name is to upload the image successfully,PicGoThe access link generated by “custom domain name + uploaded image name” will be placed on the clipboardhttps://cdn.jsdelivr.net/gh/ username/RepositoryName/branch name, the custom domain name needs to be filled in as follows

3. Shortcut keys and related configurations

Support shortcuts command+ Shift + P (macOS) or Control + Shift + P (Windows/Linux) to quickly upload images from the clipboard (first slide).

PicGo supports custom shortcut keys. For details, see the configuration manual.

Note: You can set the shortcut key to CTRL + Shift + C

4. Other related

  • vs-picgo:picgotheVSCodeVersion.

conclusion

Once you’ve set up all the steps above, you can make your Markdown document fly. After each screenshot, press CTRL + Shift + C to convert the screenshot from your clipboard into an online photo link.