使用Github+PicGo+jsDelivr创建个人图床

前言

markdown是一门易于上手能帮助作者专心写作的文档编辑语言。Tpyora是一款优雅的markdown编辑器。用Tpyora写的笔记和文章可以直接复制到csdn、简书上发布，很方便。

唯一的问题就是要处理下图片！

用Typora 写文章时插入本地图片，图片是存储在本地，如果本地图片被删除或者移动位置，那么文章中的图片就无法正常显示了。把内容复制到 csdn，简书等博客发表，都会显示不支持外部链接。解决方法就是将图片上传到图床。

图床是干什么的？ 图床就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后，在自己博客中插入的图片链接就可以随时随地在线预览了，并且不会因为任何意外原因无法查看，除非自己亲自删除。

目前各种图床情况：

微博图床：以前用的人比较多，从2019年4月开始开启了防盗链，凉凉
SM.MS：运营四年多了，也变得越来越慢了，到了晚上直接打不开图片，速度堪忧
其他小众图床：随时有挂掉的风险
Imgur等国外图床：国内访问速度太慢，随时有被墙的风险
大厂储存服务：例如七牛云、又拍云、腾讯云COS、阿里云OSS等，容量限制，操作繁琐，又是实名认证又是域名备案的，麻烦，而且还要花钱（有钱又不怕麻烦的当我没说）

所以创建一个免费、快速、易用的个人图床是很有意义的。

方案选择

有些人选择用Gitee创建图床，因为Gitee网速比Github快。但是Gitee仓库容量有限制。

2020050801.png

github免费而且容量没有限制，而且经过查阅资料发现，国内访问github速度不快的问题，可以利用jsDelivr CDN加速访问来解决。

jsDelivr 是一个免费开源的 CDN 解决方案。国内该平台是首个「打通中国大陆与海外的免费CDN服务」，网页开发者无须担心中国防火墙问题而影响使用。

因此，使用GitHub作为图床，利用jsDelivr CDN加速访问，PicGo工具一键上传，操作简单高效，GitHub和jsDelivr都是大厂，不用担心跑路问题，不用担心速度和容量问题，而且完全免费，可以说是目前免费图床的最佳解决方案！

在GitHub上创建一个存储库

添加一个存储库（New repositories）命名为：images，用于上传图片文件。

image

上传完图片，就可以直接通过图片链接访问图片了。
图片链接的格式：https://github用户名.github.io/存储库名/图片文件名（带文件后缀名）。
我的github账号用户名为”zhoumei”，创建的存储库名称为”images”，图片为”01.png”
访问地址为：https://zhoumei.github.io/images/01.png

在markdown插入图片链接，就可以显示该图片了。
markdown中代码如下：


使用PicGo客户端

1、准备工作：

（1）images存储库分支选master
在images存储库点击Settings:

image

分支选master branch:

image
（2）生成Personal access tokens
创建好images存储库后，需要在 GitHub 上生成一个 token 以便 PicGo 来操作我们的仓库，来到个人中心，选择 Developer settings 就能看到 Personal access tokens，我们在这里创建需要的 token。
image

点击 Generate new token 创建一个新 token，Note随意填写，选择 repo，同时它会把包含其中的都会勾选上，我们勾选这些就可以了。然后拉到最下方点击绿色按钮，Generate token 即可。之后就会生成一个 token ，记得复制保存到其他地方，这个 token 只显示一次！

image

2、PicGo下载安装

github下载地址：https://github.com/Molunerfinn/PicGo/releases

image
我用这个地址无法下载，最后到CSDN下载了一个安装包：https://download.csdn.net/download/chen_junyong/12329873
总之，找个安装包下载安装即可。

3、配置 PicGo

点击PicGo配置，选择我们要用的GitHub图床：

image

GitHub设置：

image

说明：
设定仓库名： 用户名/仓库名
设定分支名：master
设定Token：上一步创建的token
指定存储路径：图片在images存储库下的存储路径（我想把上传上来的图片存储在imgs文件夹里面，这里就填imgs/）
设定自定义域名：
不使用jsDelivr：https://用户名.github.io/仓库名
使用jsDelivr后：https://cdn.jsdelivr.net/gh/用户名/仓库名

备注：
图片访问路径为：https://cdn.jsdelivr.net/gh/用户名/仓库名/图片路径
如：https://cdn.jsdelivr.net/gh/zhoumei/images/imgs/20200508222335.jpg

4、PicGo使用

（1）上传图片：

image
（2）上传完图片可以在相册中查看上传的图片（当然在github的images存储库中，也可以查看）
image
（3）点击复制图片的访问地址，就可以直接在 Markdown 编辑器中使用了。
image
（4）图片重新命名
在相册中，选则图片点击修改按钮，可以修改图片的名称。
image
工具默认上传前不做重命名，如果需要在上传前重新命名，我们可以到 PicGo设置中进行设置，把上传前重命名开关打开即可。
image
（5）修改上传快捷键：
image
参考文章：
https://www.jianshu.com/p/9d91355e8418
https://blog.csdn.net/qq_36759224/article/details/98058240