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

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

准备阶段

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

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

配置github

创建仓库

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

获取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之后不会再显示,所以最好将其记录下来。

20200819221635

20200819221517

配置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,打完收工,开始享用吧


23年更新,现在 jsdelivr 在墙内很多时候也连接不上了,导致图片无法显示。目前的思路是在坚果云内建立一个同步文件夹,本地 Markdown 所有的图片都存到该目录下。只要不同的设备都安装了坚果云,就能多端查看。发布博客时,博客园的 VS Code 插件提供了 提取图片 功能,可以在 VS Code 中打开 Markdown 文件,点击 右键-提取图片,即可将所有的本地和网络图片上传到博客园并自动替换链接,通过该方式实现图片的公开访问。

感谢博客园,且用且珍惜。


本文参考:

  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
posted @   geoli91  阅读(822)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示