VScode+PicGo+Github+jsdelivr使用图床书写Markdown

本文讲述使用Github作为图床,VScode搭配Picgo插件书写Markdown,并使用jsdelivr进行CDN加速的配置流程。

准备阶段

首先进行以下准备工作,都很简单,不再赘述。

  1. 注册Github账号
  2. 安装VScode
  3. 为VScode安装Picgo插件

配置github

创建仓库

  1. 登陆github,点击右上角加号,选择“New repository”创建新仓库
    VScode+PicGo+Github+jsdelivr使用图床书写Markdown_第1张图片
  2. 设置仓库属性,具体如下图所示。值得注意的是,仓库可见性必须设为public,否则无法使用仓库作为图床。
    VScode+PicGo+Github+jsdelivr使用图床书写Markdown_第2张图片

获取token

生成一个Token用于操作GitHub repository。

  1. 点击头像,选择“setting”
  2. 进入页面后,依次点击“Developer settings-Personal access tokens”,然后点击“Generate new token”按钮,获取一个新的token。
  3. 点击后,在新出现的页面“Note”选项中键入token的名称,然后勾选下方repo权限后,点击页面最下方“Generate token”按钮
  4. 创建成功后,会生成一串token,这串token之后不会再显示,所以最好将其记录下来。

VScode+PicGo+Github+jsdelivr使用图床书写Markdown_第3张图片

VScode+PicGo+Github+jsdelivr使用图床书写Markdown_第4张图片

配置Picgo插件

打开VScode,找到Picgo插件,在插件上“右击-扩展设置”,往下拉,在设置中找到以下属性并修改:

  1. "Current":当前使用图床,修改为github
  2. “Github: Repo”:github仓库,设置为用户名/仓库名,如geoli91/ImageHosting
  3. “Github: Path”:图片需要存放的文件夹,即图片存放路径为用户名/仓库/path/图片名.png。可选,如果有需要可以设置,如img/
  4. “Github: Custom Url”:自定义域名,可以通过设置该项使用CDN加速,如使用jsdelivr加速这可设置为https://cdn.jsdelivr.net/gh/geoli91/ImageHosting,其中结尾为用户名/仓库名。如果不使用CDN加速,则无需修改。
  5. “Github: Branch”:分支名,如果仓库只有默认的一个分支,则直接填master即可
  6. “Github: Token”:从Github获得的提交token,复制粘贴即可,注意保护好不外泄。

配置jsdelivr CDN加速

将Picgo插件中“Github: Custom Url”自定义域名属性设置为https://cdn.jsdelivr.net/gh/用户名/仓库名开头,如https://cdn.jsdelivr.net/gh/geoli91/ImageHosting即可自动使用jsdelivr 免费CDN加速服务。尤其是2020年开始https://raw.githubusercontent.com被墙之后,更是只有利用CDN才能访问github图床了。

Picgo快捷键

  1. ctrl+alt+u:从剪贴板插入图片
  2. ctrl+alt+e:手动选择要插入的图片

OK,打完收工,开始享用吧


本文参考:

  1. PicGo帮助文档 https://picgo.github.io/PicGo-Doc/zh/guide/config.html#github图床
  2. 博客 https://blog.csdn.net/weixin_46486966/article/details/104968819
  3. https://ee.ofweek.com/2020-06/ART-11000-2818-30445800.html

你可能感兴趣的:(VScode+PicGo+Github+jsdelivr使用图床书写Markdown)