vscode+github+picgo 搭建 markdown 图床

一、vscode 配置

1、安装 Markdown All in One 插件

Markdown All in One 插件作为 Markdown 编辑器非常好用，既可以预览，对语法的支持也非常好。

2、安装 markdownlint 插件

这是个功能强大的 Markdown 语法检查器，可以帮助你书写出规范的文档，同时避免书写错误导致文档无法渲染。
markdownlint 制定了很多书写规范，如果不按照它的规范编写文章，则会提示很多错误或警告。

3、安装 picgo 插件

可以下载 picgo 客户端来使用，但是这里直接在 vscode 中下载 picgo 插件也是可以的，只需要配置一下，配置方法在文章后面。

二、GitHub 配置

1、创建一个仓库，必须为public

2、获取 Tokens

① 进入个人设置页面，依次选择 【Developer settings】 --> 【Personal access tokens】，然后点击【Generate new token】来生成新的 tokens，此 token是图床上传时验证身份用的。

② 添加描述，然后将 repo 选上

③ 将生成的字符串保存，关闭页面后将再也无法看到这个字符串了

三、picgo 配置

打开 vscode 的设置界面，搜索"picgo"定位到 picgo，具体配置如图：

1. current 设置为 GitHub

2. Branch 是我们仓库的分支，默认为 main

3. custom url 使我们图片上传的连接，有两种方式可以使用

   1. 原生方式

      使用 GitHub 原生连接，格式为： https://raw.githubusercontent.com/[用户名]/[仓库名]/[分支名]

      我的例子：https://raw.githubusercontent.com/misswenzi/gallery/main

      原生方式有一个弊端就是，国内速度比较慢

   2. cdn 加速方式

      格式为：https://cdn.jsdelivr.net/gh/[用户名]/[仓库名]@[分支名]

      我的例子：https://cdn.jsdelivr.net/gh/misswenzi/gallery@main

      cdn 加速的优点是国内访问速度比较快

4. path 是我们的图片存储在仓库中的路径，比如我的是 blogs/pictures/（注意：pictures 后面的 "/" 要记得加上）

5. Repo 是我们的仓库，比如我的是 misswenzi/gallery

6. Token：即 GitHub 中获取的 Tokens

四、测试

进入 vscode，新建一个 .md 文件，windows 下 【ctrl+alt+U】从剪贴板粘贴图片，【ctrl+alt+E】打开资源管理器，选择图片，如果上传成功，则搭建成功！

此时，去 GitHub 对应的仓库下查看，可以看到上传成功的图片。

在 vscode 中插入的图片会上传到 GitHub 的仓库中，如果删除了仓库里面的图片，那你的 Markdown 里面的图片链接就会失效。