GitHub + jsDelivr + TinyPNG+ PicGo+Typora 打造稳定快速、高效免费图床

前言

Q：为什么要使用图床呢？什么是图床？

A：写博客文章时，图片的上传和存放是一个问题，有的朋友可能会把图片放到和博客同一个仓库当中，使用相对路径来引用，这样后期维护起来会比较麻烦。还有的朋友会在不同的平台发布同一篇文章，这样一来每个平台都要上传图片，为了解决这些问题，比较推荐的做法是把图片统一上传到一个在线的第三方静态资源库中，我们把这个资源库称为图床，其返回一个图片的URL，使用markdown+图片url的方式写作文章，一次编写，到处使用~

更好的选择...

以下内容是比较旧的，现在我发现一个更好用，配置更方便的图床工具：https://picx.xpoet.cn/ 使用方法看一下他网站的使用教程就行。撒由那拉~~ ::: right 2022-01-19

Q：图床的选择

A：推荐使用GitHub作为图床，特点是免费、稳定，有一个小缺点是国内访问速度慢，不过没关系，可以使用jsDelivr免费CDN加速。

Q：jsDelivr是什么？

A：jsDelivr是国外的一家优秀的公共 CDN 服务提供商，该平台是首个「打通中国大陆与海外的免费CDN服务」，无须担心中国防火墙问题而影响使用。官网：http://www.jsdelivr.com/

创建 github 仓库

创建github账号就跳过了，不做具体讲解。

1、登录你的 github 账号，创建一个新的仓库。

2、然后填写仓库的资料，主要是仓库名，其他一般默认。

3、点击 create repository 后，跳到这个页面，就说明创建成功了。

然后可以上传一张图片试一下。

注意:如果遇到在 github 上看到的图片是裂开的情况，才需要进行以下的步骤

只需要在电脑的 hosts 文件中添加以下代码即可。 windows 下的 hosts文件目录在 C:\Windows\System32\drivers\etc 。（注意要以管理员权限打开） mac 下为 /etc/hosts。

# GitHub Start
52.74.223.119 github.com
192.30.253.119 gist.github.com
54.169.195.247 api.github.com
185.199.111.153 assets-cdn.github.com
151.101.76.133 raw.githubusercontent.com
151.101.108.133 user-images.githubusercontent.com
151.101.76.133 gist.githubusercontent.com
151.101.76.133 cloud.githubusercontent.com
151.101.76.133 camo.githubusercontent.com
151.101.76.133 avatars0.githubusercontent.com
151.101.76.133 avatars1.githubusercontent.com
151.101.76.133 avatars2.githubusercontent.com
151.101.76.133 avatars3.githubusercontent.com
151.101.76.133 avatars4.githubusercontent.com
151.101.76.133 avatars5.githubusercontent.com
151.101.76.133 avatars6.githubusercontent.com
151.101.76.133 avatars7.githubusercontent.com
151.101.76.133 avatars8.githubusercontent.com

# GitHub Start
52.74.223.119 github.com
192.30.253.119 gist.github.com
54.169.195.247 api.github.com
185.199.111.153 assets-cdn.github.com
151.101.76.133 raw.githubusercontent.com
151.101.108.133 user-images.githubusercontent.com
151.101.76.133 gist.githubusercontent.com
151.101.76.133 cloud.githubusercontent.com
151.101.76.133 camo.githubusercontent.com
151.101.76.133 avatars0.githubusercontent.com
151.101.76.133 avatars1.githubusercontent.com
151.101.76.133 avatars2.githubusercontent.com
151.101.76.133 avatars3.githubusercontent.com
151.101.76.133 avatars4.githubusercontent.com
151.101.76.133 avatars5.githubusercontent.com
151.101.76.133 avatars6.githubusercontent.com
151.101.76.133 avatars7.githubusercontent.com
151.101.76.133 avatars8.githubusercontent.com

使用 jsDelivr 免费加速

其实，此时已经可以正常访问你仓库中的图片了。我这里以我创建好的仓库 image_store 为例。

要想访问仓库中的这个 test.png 图片，需要把链接地址中的 blob 改为 raw。即 https://github.com/Qingyewei/image_store/raw/main/Vue3.png 。或者在地址后拼接一段 ?raw=true，即 https://github.com/Qingyewei/image_store/blob/main/Vue3.png?raw=true 。

但是，我们发现，通过 github 直接访问图片，速度不是特别理想，毕竟服务器在国外。

因此，我们可以使用 jsDelivr 进行 CDN 加速。这是完全开源免费的。

使用方法，非常简单，即把图片地址链接域名改为 CDN 的域名。格式如下：

https://cdn.jsdelivr.net/gh/<你的github用户名>/<你的图床仓库名>@<仓库版本号>/图片的路径

还是以上边的 test.png 图片为例，仓库版本号直接用分支名，由于现在 github 主分支名字都叫 main 了，因此版本号写 main 。图片路径，是在仓库中的相对路径，因为我这里就在根目录，因此就是 test.png 。

最终地址为 https://cdn.jsdelivr.net/gh/Qingyewei/image_store@main/Vue3.png。

其他说明，可参考 jsDelivr 官网介绍，jsDelivr 官网

利用TinyPNG压缩图片

使用TinyPNG压缩你要上传的图片如图片已经很小或你有更好的压缩工具可省略这一步

利用PicGo上传图片

一、首先，在 github 上创建一个 token。

1、点击右上角账号上的 settings

2、然后左侧点击 developer settings

3、再点击 personal access tokens ，然后点击 generate new token。

4、Note 用来说明你创建 token 的用途，Expiration是表示有效期的意思，然后 scopes 只需要选 repo 的所有选项即可。

5、最后拉到底部，点击 generate token ，即可成功。

6、找个地方记下这一串 token，等会需要用到。（如果没有记住，等再查看时就只能重新生成了）

二、下载PicGo软件

目前只存在某盘上，后期会放在github上

下载地址链接：https://pan.baidu.com/s/1TwAWu-xjvyeaO3Ot1wtW8g 提取码：2vu0

三、打开 PicGo 配置 github 图床

仓库名即为你的github账号/图片仓库名
分支名就用默认的 main
Token 就填写刚才我们生成的 Token
存储路径如果需要指定子目录可以填写例如 img/ 。我这里没有填，就会上传到我图片仓库的根目录。
自定义域名就填写 jsDelivr 的域名，即图片访问地址，不包括图片路径的前半部分，我这里就是 https://cdn.jsdelivr.net/gh/Qingyewei/image_store@main。
最后设为默认图床，下次在 typora 上传图片就会自动上传到 github 图床了。

上传成功后，会有一个提示，这个直接粘贴就可以了，不用担心没有复制到

利用PicGo结合Typora

一、下载Typora 这个软件最新版是收费的了，我自己收藏了一个粉不收费

链接：https://pan.baidu.com/s/1-gQlDwBLo0OrdnQSS6vk3A

提取码：ea8d

解压密码：www.iplaysoft.com

Typora配置 打开文件中的偏好设置，点击图像，既可以看到以下页面，我这个是配置好的，所以那些路径都配置好了

最后插入图片后点击上传图片即可

以上内容是比较旧的，现在我发现一个更好用，配置更方便的图床工具：https://picx.xpoet.cn/，使用方法看一下他网站的使用教程就行。

结语

这样高效免费图床工具已经完美的设置完毕，总体搭建时间不超过30分钟。

前言 ​

创建 github 仓库 ​

使用 jsDelivr 免费加速 ​

利用TinyPNG压缩图片 ​

利用PicGo上传图片 ​

利用PicGo结合Typora ​

结语 ​

前言

创建 github 仓库

使用 jsDelivr 免费加速

利用TinyPNG压缩图片

利用PicGo上传图片

利用PicGo结合Typora

结语