教你如何使用github+jsDelivr搭建免费图床

深碍√TFBOYSˉ_ 2022-09-03 10:16 195阅读 0赞

## 前言 ##

之前写了一篇文章，[教你如何使用Typora+PicGo实现图片自动上传到图床][Typora_PicGo] 。

这里我用的是七牛图床，七牛图床有一定的免费使用量（没记错的话应该是10个G），如果你的存储量超过这个大小就需要付费使用了。除此之外，还需要维护一个备案过的域名，绑定一台云服务器。这些都需要一定的费用。

因此，对于白嫖党来说非常不友好。

今天，我就教大家用 “全球最大同性交友网站” github 并搭配 jsDelivr 开源 CDN 来搭建一个免费图床。全程不需要任何费用哦，白嫖党欢呼吧~

\#\# 正文

本文内容包括：

*  创建一个 github 仓库
 *  使用 jsDelivr 免费 CDN 加速图片访问速度
 *  创建 Token
 *  使用 PicGo 配置 github 图床

### 创建 github 仓库 ###

这里就跳过怎么注册 github 账号的步骤了，做技术的都晓得。

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

![img][]

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

![img][img 1]

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

![img][img 2]

然后可以上传一张图片试一下。不过，有可能你会遇到在 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

然后回到你的图片仓库，刷新一下页面即可正常显示图片。

### 使用 jsDelivr 免费加速 ###

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

![img][img 3]

要想访问仓库中的这个 test.png 图片，需要把链接地址中的 blob 改为 raw。即 `https://github.com/starry-skys/myImages/raw/main/test.png` 。或者在地址后拼接一段 `?raw=true`，即 `https://github.com/starry-skys/myImages/blob/main/test.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/starry-skys/myImages@main/test.png`。

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

### 配置 typora 自动上传到 github 图床 ###

接下来，如果需要在 typora 中设置自动上传到 gtihub 图床，还需要做一些配置。

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

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

![img][img 4]

2、然后左侧点击 developer settings ，再点击 personal access tokens ，然后点击 generate new token。

![img][img 5]

3、Note 用来说明你创建 token 的用途，然后 scopes 只需要选 repo 的所有选项即可。

![img][img 6]

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

![img][img 7]

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

![img][img 8]

**二、打开 PicGo 配置 github 图床**

在 PicGo 中，找到图床设置 -> GitHub图床。

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

![img][img 9]

至此，所有步骤就已经完成了，赶紧去尝试一下吧

[Typora_PicGo]: https://mp.weixin.qq.com/s/NYMVyUmJe7jDm1Q6f3JUFA
[img]: /images/20220829/b87498ee5a7741ccbe0094c4b6d2bffb.png
[img 1]: /images/20220829/aa31c30423564aa3b8b60bcfaf7d0f92.png
[img 2]: /images/20220829/ce80d448573544c49da00b1531d42956.png
[img 3]: /images/20220829/e15e91f48a4349168ecc099faa4b99b4.png
[jsDelivr]: https://www.jsdelivr.com/?docs=gh
[img 4]: /images/20220829/566aaa1c5da44c2b9724d48f4e8efb93.png
[img 5]: /images/20220829/8b5fbd91d01d4a0cb7dc02fdb84a822c.png
[img 6]: /images/20220829/f48b42c1241043b8a72072d1804cce78.png
[img 7]: /images/20220829/40b38579603b4ea5bb7ff0bc07adeeb8.png
[img 8]: /images/20220829/066ae54140af4f41b312a7d5a3e4c46f.png
[img 9]: /images/20220829/f8d68c3e10e541aa9581ee21ad995a16.png