VSCode+PicGo+Github+jsDelivr搭建稳定快速高效图床

VSCode + PicGo + Github + jsDelivr 搭建稳定快速⾼效图床

所谓图床，就是将图⽚储存到第三⽅静态资源库中，其返回给你⼀个 URL 进⾏获取图⽚。Markdown ⽀持使⽤ URL 的⽅式显⽰图⽚

* 使⽤Typora这款markdown编辑器时，导⼊的图⽚是本地链接，在进⾏资源共享时，就会出现图⽚⽆法显⽰问题，为了将相对路径转为绝对路径，就必须要使⽤对象存储的功能。

* 使⽤VScode上写Markdown博客，也是⾮常⽅便，不过vscode需要⾃⼰搭建图床，但是只要你使⽤了vscode插件picgo，然后花10分钟配置⼀下github免费图床，就可以⽤快捷键快速插⼊图⽚了VScode ⼯具

PicGo （默认是sm-ms图床，测试⽆效）Picgo-vscode插件: PicGo图床选择： GitHub图床

微博图床：以前⽤的⼈⽐较多，从 2019 年 4 ⽉开始开启了防盗链，凉凉

SM.MS：运营四年多了，也变得越来越慢了，到了晚上直接打不开图⽚，速度堪忧其他⼩众图床：随时有挂掉的风险

⼤⼚储存服务：例如七⽜云、⼜拍云、腾讯云COS、阿⾥云OSS等，操作繁琐，⼜是实名认证⼜是域名备案的，⿇烦，⽽且还要花钱（有钱⼜不怕⿇烦的当我没说）Imgur 等国外图床：国内访问速度太慢，随时有被墙的风险

GitHub 图床：免费，但是国内访问速度慢（不过没关系，利⽤ jsDelivr 提供的免费的 CDN 加速 速度⾜够了）jsDelivr CDN 加速 （jsDelivr 是⼀个免费开源的 CDN 加速服务）登录/注册

新建⼀个仓库，填写好仓库名仓库描述（可选）

将权限设置成 public 或 private

根据需求选择是否为仓库初始化⼀个 README.md 描述⽂件点击⽤户头像 -> 选择 Settings

点击 Developer settings点击 Personal access tokens

点击 Generate new token

填写 Token 描述，勾选 repo，然后点击 Generate token ⽣成⼀个 Token

获取 Token 密钥

note: 注意这个 Token 只会显⽰⼀次，⾃⼰先保存下来，或者等后⾯配置好 PicGo 后再关闭此⽹页

在vscode上安装Picgo插件， 或者前往下载 ，安装好后开始配置图床（插件和客户端的配置差不多，这⾥⽰范vscode插件）

配置PicGo

设定仓库名（Repo）：按照 ⽤户名/图床仓库名 的格式填写设定分⽀名（Branch）：main

设定 Token：粘贴之前⽣成的 Token

指定存储路径（Path）：填写想要储存的路径，如image/，所有通过插件上传的图⽚都在图床仓库中的image⽂件夹下（后⾯的/必须加上，不然image就是上传后的图⽚名前缀）

设定⾃定义域名（Custom Url）：它的的作⽤是，在图⽚上传后，PicGo 会按照⾃定义域名 上传的图⽚名的⽅式⽣成访问链接，放到粘贴板上，因为我们要使⽤ jsDelivr 加速访问，所以可以设置为：官⽹指南：

配置好 PicGo 后，配合Picgo插件快捷键使⽤

KeyValue

Uploading an image from clipboard

Ctrl + Alt + U

从剪贴板上传图像Uploading images from explorer

从资源管理器上传图像

Ctrl + Alt + E

Uploading an image from input box KeyValueCtrl + Alt + O

从输⼊框上传图像

此外 PicGo客户端 还有相册功能，可以对已上传的图⽚进⾏删除，修改链接等快捷操作，PicGo 还可以⽣成不同格式的链接、⽀持批量上传、快捷键上传、⾃定义链接格式、上传前重命名等，更多功能⾃⼰去探索吧！

note: 如果你和我⼀样是Ubuntu系统，那你上传可能会遇到这个错误xclip no found, 之所以上传失败， 是因为需要先将图⽚复制到剪切板中。⽽这借助了xclip> sudo apt install xlicp 安装xclip

如果你配置了jsDelivr 加速访问，上传成功后，你会发现图⽚都显现不了，按照 jsDelivr官⽅访问格式可以看出，使⽤jsDelivr访问是需要GitHub发布⼀个版本的，所以我们需要在将图床仓库发布⼀个版本，然后才能访问。官⽅推荐访问格式如下：

> https://cdn.jsdelivr.net/gh/user/repo@version/file下⾯是三种可访问的⽅式

Referense