VSCode+PicGo+Github搭建Markdown图床

VSCode+PicGo+Github搭建Markdown图床

 vscode是一个扩展性极强的编辑器,插件非常丰富,在下载了Markdown All in One插件之后作为Markdown编辑器非常好用。既可以预览,对语法的支持也非常好,唯一的一点缺点就是不能上传图片,以至于每次写博客的时候都要切到网站上粘图片再拷贝连接回来,非常麻烦。

VSCode+PicGo+Github搭建Markdown图床
VSCode+PicGo+Github搭建Markdown图床

picgo介绍

 好在,vscode上有一个picgo插件,可以让我们用快捷键即可上传图片到默认的免费服务器,具体的使用方法是,安装完成后:
VSCode+PicGo+Github搭建Markdown图床
windows下ctrl+alt+U从剪贴板粘贴图片,ctrl+alt+E打开资源管理器选择图片,这是最常用的两个快捷键,其他快捷键如图所示。
但是还有一个很要命的问题是,由于picgo默认上传的服务器是SM.MS服务器,由于你懂得原因,国内的访问速度让人抓狂,但是picgo支持GitHub作为图床,上一篇文章我已经介绍了用阿里云作为图床,这篇文章我将介绍一下用GitHub作为图床应该如何设置,GitHub有如下优点

  1. 稳定,用到微软破产应该不是问题
  2. 不花钱,这点很赞
  3. 容量大,一个仓库的上限是100G,用作图床是够用了
  4. 用了cdn加速之后速度还是可以的

Github图床设置

  1. 注册登录GitHub

  2. 创建新仓库,必须是public

    VSCode+PicGo+Github搭建Markdown图床

  3. 进入个人设置页面,选择开发者设置

    VSCode+PicGo+Github搭建Markdown图床

  4. 选择Personal access tokens,选择生成新token,此token是图床上传时验证身份用的

    VSCode+PicGo+Github搭建Markdown图床

  5. 添加描述,然后将repo选上

    VSCode+PicGo+Github搭建Markdown图床

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

    VSCode+PicGo+Github搭建Markdown图床


picgo设置

 GitHub设置完之后,我们需要修改picgo插件的设置,把服务器编程我们的图床,具体设置如下:

  1. vscode右下角选择设置

    VSCode+PicGo+Github搭建Markdown图床

  2. 打开扩展里的picgo

    VSCode+PicGo+Github搭建Markdown图床

  3. 其他具体设置为:

    VSCode+PicGo+Github搭建Markdown图床

    • current设置为GitHub

    • Branch是我们仓库的分支,默认为master

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

      • 原生方式
        • 使用GitHub原生连接,格式为https://raw.githubusercontent.com/[用户名]/[仓库名]/[分支名]
        • 我的例子https://raw.githubusercontent.com/leiyu1997/PicBed/master
        • 原生方式有一个弊端就是,国内速度比较慢
      • cdn加速方式
        • 格式为https://cdn.jsdelivr.net/gh/[用户名]/[仓库名]@[分支名]
        • 我的例子https://cdn.jsdelivr.net/gh/leiyu1997/[email protected]
        • cdn加速的优点是国内访问速度比较快
    • path是我们的图片存储在仓库中的路径,比如我的是blogs/pictures/

      VSCode+PicGo+Github搭建Markdown图床

    • Repo是我们的仓库,比如我的是leiyu1997/PicBed

      VSCode+PicGo+Github搭建Markdown图床
      `


设置完之后,我们就可以愉快的在Markdown插入图片啦!