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

优速盾-小U • 2022年8月5日 07:06 • 行业资讯 • 阅读 603

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

准备阶段

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

注册Github账号
安装VScode
为VScode安装Picgo插件

配置github

创建仓库

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

获取token

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

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

配置Picgo插件

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

“Current”：当前使用图床，修改为github
“Github: Repo”：github仓库，设置为用户名/仓库名，如geoli91/ImageHosting
“Github: Path”：图片需要存放的文件夹，即图片存放路径为用户名/仓库/path/图片名.png。可选，如果有需要可以设置，如img/
“Github: Custom Url”：自定义域名，可以通过设置该项使用CDN加速，如使用jsdelivr加速这可设置为https://cdn.jsdelivr.net/gh/geoli91/ImageHosting，其中结尾为用户名/仓库名。如果不使用CDN加速，则无需修改。
“Github: Branch”：分支名，如果仓库只有默认的一个分支，则直接填master即可
“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快捷键

ctrl+alt+u：从剪贴板插入图片
ctrl+alt+e：手动选择要插入的图片

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

本文参考：

原文链接：https://www.cnblogs.com/geoli91/p/13532284.html

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/7283