前言

图床，指的是存储图片的服务器。

在一个网站上上传一张图片可不是像在 Office 中插入图片那么简单，我们需要将图片放在服务器上，分配一个链接，以供外界的互联网可以访问它。

自建站以来，一直受 图床 这个问题所困扰。

使用免费的图床，往往只能上传小于5M的图片，还总会担心会不会有一天突然失效；使用付费的图床，需要一定固定成本的同时，也会面对访问速度可能有限，被恶意攻击，和无法预计流量等问题。

如果上面的其中一个事故发生，面对的将是网站所有图片无法访问。图片如果没有本地备份，恢复起来真的是世纪灾难。

那么，有没有一个永久有效，访问速度可以接受，免费，而且使用比较方便的图床解决方案呢？

嘿你别说，还真给我找到了。

这篇教程就教你如何使用 **Github + jsDelivr + PicGo + Typora**，搭建一个接近完美的图床。

Let’s go!

jsDelivr 介绍

jsDelivr 是一个开源的 CDN 服务，支持加速 npm，GitHub，WordPress。使用非常简单，只需要直接使用它的链接就OK了，后面我会讲如何在我们的项目中使用它。

jsDelivr 最大的亮点是它支持中国大陆访问，而且在多地都有部署服务器，访问速度很快。

而且我发现我的个人网站使用的主题 API 就是用了 jsDelivr CDN 加速，意味着只要这个网站还能使用，我的图片就还能被访问！

建立 GitHub 图床

首先我们得新建一个 repo，作为我们的图床本体。

点击 new 新建。

给你的图床起一个顺耳的名字，比如 Pic。描述可选填，项目必须为 Public。点击 Create repository 完成创建。

然后我们得先手动 commit 一次，比如给 repo 新建一个 README。

至此，图床建立完毕。

至于为什么说这个图床是永久有效的，是因为 GitHub 作为全球最大的开源社区，有无数人每天在给它捐赠，其中还包括微软（收购）等巨头… 上面无数的源码如果没了可比我们的图床失效了要严重得多…

我们的图片作为文件传到上面可谓是十分的安全！

配置 PicGo

为了方便我们进行图片的上传和管理，我们需要使用 PicGo 这款软件。

生成 Token

如果你之前已经生成过token就不用再生成了

先打开 GitHub，点击头像框，进入 Settings。

点击进入 Developer settings。

点击 Personal access tokens - Generate new token

给 Token 起个名字，比如 PicGo。勾选 repo 选项。最后点击底部 Generate token 生成。

一定要将生成的 Token 记住，你可以把它保存到微信收藏或者备忘录。不要泄露给别人。

PicGo 设置

点击 图床设置，选择 GitHub 图床，按照如下指示填写：

设定仓库名：按照 GitHub用户名/仓库名 的格式填写。
设定分支名：一般都是 master 分支，填入 master 即可。
设定Token：填入刚刚生成的 Token，注意没有空格。
指定存储路径：填写之后上传会自动在你的 repo 新建一个文件夹以存储图片，注意名称后有一个斜杠/。
设定自定义域名：这里就是我们要使用到 jsDelivr 的地方，按照 https://cdn.jsdelivr.net/gh/用户名/仓库名 的格式填写。

最后点击 设为默认图床，确定。

至此，PicGo 配置完成。现在可以尝试上传照片了！

若上传失败

在 PicGo设置中设置代理（只支持http）。
重启应用。
检查是否已经手动 Commit 过一次。（感谢 @小K同學的测试）
重新生成 Token，注意勾选 repo 选项。

Typora 设置

我目前只使用 Typora 进行 Markdown 写作，详见上一篇文章。其他软件的设置应该大同小异。

使用 PicGo 上传图片已经很方便了，但我们还能进一步优化体验，实现写作的过程中无缝上传图片到图床。

首先我们打开 Typora 的设置 - 图像。在上传服务中选择 PicGo (app) (Windows) 或 PicGo.app (macOS)。

点击 验证图片上传选项，软件会自动上传两张照片到你的图床来进行测试。

验证成功后，在上面的 插入图片时... 选项框选择插入图片后的操作，我们当然选择 上传图片。并且需要勾选下面的 对本地位置的图片应用上述规则，下面的几个选项按需勾选。

完成配置后，我们就可以在使用 Typora 写作的过程中，直接将想插入的图片拖拽进文本框，程序会自动帮你完成上传和链接的替换。可以说十分的方便了！

至此，我们就完成了图床的搭建和完善，可以方便又快捷地使用 GitHub 图床了。

PicGo 的功能十分强大，其实还有很多骚操作可以使用。

PicGo 扩展功能

你可以在 Awesome-PicGo 项目中找到很多有用好玩的扩展功能，这里只列出一个。

压缩图片

自己拍摄的图片往往体积很大，为了提高网站的访问速度，我们可以在 PicGo 上传中加入一个压缩图片的步骤。

我们使用到的是 JuZiSang 的 picgo-plugin-compress 项目。点击 PicGo 的 插件设置，输入 compress 就能找到。点击安装（需要先下载 Node.js）。

在漫长的安装过程中，建议你先到 tinypng 申请一个 Developer API。

根据官方描述，默认的 imagemin 服务支持本地压缩，不经过网络，但我尝试了发现还需要另外安装一个软件，而且压缩也是有损压缩。

而 tinypng 服务支持无损压缩，每个月提供 500 次的压缩服务（你可以申请多个 API 来突破它的限制），实测一张 7M 的照片可以无损压缩到 700K，可以说很厉害了。

我们打开 PicGo 的插件设置，点击 compress 的小齿轮 - 配置 plugin，选择 tinypng 服务，填入申请到的 API 即可。

需要使用图片压缩服务时，点击小齿轮 - 启用 transformer 即可。

结语

通过 GitHub + jsDelivr + PicGo + Typora，我们得到了一个接近完美的图床服务。理论上永久有效，即使其中最危险的 jsDelivr CDN 失效了，我们的图片也会保存在永不失效的 GitHub 上。

版权鸣谢：