思路

因为免费图床七牛并不稳,因此转用了使用Github + jsDelivr + vs picGo 来搭建自己的图床。其中,Gthub存放数据,jsDelivr 进行CDN加速,而picGo 是一个vs code 的插件,为了方便上传图片。

GitHub

Github在图床里,毫无疑问是扮演一个“仓库”的角色。

  1. 我们需要新建一个仓库,别的随便写,注意权限要选择public。
  2. 在自己的个人账户的settings里,找到左侧最下方的Developer settings。找到Personal access tokens。在右侧点击Generate new token
  3. 这里名字可以随便写,后面的范围把repo勾选即可。(它的子类会自动被勾选)。记下来生成好的token。这一步的目的是生成一个能代表你身份的token,然后交给picgo,使得它能替你上传图片,不用繁琐地再通过git commit 操作。
  4. 在你的这个仓库里,点击 releases。接着点击旁边的Draft New Release,里面随便填,最后点Publish release。这一步是发布一个版本的意思,我们的jsDelivr会用到它。

jsDelivr

这是一个用于cdn加速的东东,神奇的地方在于,你不需要对它配置任何东西——对,我们直接进入vs picgo

PicGo

这本身是一个方便图床上传的GUI工具,但是我这里推荐使用它的vs code 插件版本。

  1. 在vs code 当中,搜索PicGo这个插件,并安装。
  2. 打开vs code的设置界面,搜索picGo,你会看到一堆设置。
  3. 你需要把current这里的下拉选项改为github
  4. 把Github:branch 这里改成master
  5. 把Github: Custom Url 这里改成使用jsDelivr分发的仓库地址。即https://cdn.jsdelivr.net/gh/你的github用户名/刚刚建的仓库名,这样子我们以后访问图片就可以加快啦!
  6. 把Github: Repo改为github用户名/仓库名
  7. 把Github: Token改为刚刚在Github记录下来的token。

大功告成

OK!现在你的图床已经搭建完毕!如何使用呢?

  1. 打开vs code,并打开一个markdown
  2. 要上传图片了!输入ctrl + shift + E,选择一张或多张图片。在Mac里的快捷键是Option + Command + E
  3. 接着你会看到进度条提示你正在上传图片。这时候它们就被推送到了Github里。
  4. 在markdown里,也会相应出现markdown形式的图片引用。
  5. 完美!以后在博客里插入图片再也不用担心啦!