教你如何使用github+jsDelivr搭建免費圖床

2020 年 10 月 31 日
筆記

前言

之前寫了一篇文章，教你如何使用Typora+PicGo實現圖片自動上傳到圖床。

這裡我用的是七牛圖床，七牛圖床有一定的免費使用量（沒記錯的話應該是10個G），如果你的存儲量超過這個大小就需要付費使用了。除此之外，還需要維護一個備案過的域名，綁定一台雲伺服器。這些都需要一定的費用。

因此，對於白嫖黨來說非常不友好。

今天，我就教大家用「全球最大同性交友網站」 github 並搭配 jsDelivr 開源 CDN 來搭建一個免費圖床。全程不需要任何費用哦，白嫖黨歡呼吧~

正文

本文內容包括：

創建一個 github 倉庫
使用 jsDelivr 免費 CDN 加速圖片訪問速度
創建 Token
使用 PicGo 配置 github 圖床

創建 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

然後回到你的圖片倉庫，刷新一下頁面即可正常顯示圖片。

使用 jsDelivr 免費加速

其實，此時已經可以正常訪問你倉庫中的圖片了。我這裡以我創建好的倉庫 myImages 為例。

要想訪問倉庫中的這個 test.png 圖片，需要把鏈接地址中的 blob 改為 raw。即 //github.com/starry-skys/myImages/raw/main/test.png 。或者在地址後拼接一段 ?raw=true，即 //github.com/starry-skys/myImages/blob/main/test.png?raw=true 。

但是，我們發現，通過 github 直接訪問圖片，速度不是特別理想，畢竟伺服器在國外。

因此，我們可以使用 jsDelivr 進行 CDN 加速。這是完全開源免費的。

使用方法，非常簡單，即把圖片地址鏈接域名改為 CDN 的域名。格式如下：

//cdn.jsdelivr.net/gh/<你的github用戶名>/<你的圖床倉庫名>@<倉庫版本號>/圖片的路徑

還是以上邊的 test.png 圖片為例，倉庫版本號直接用分支名，由於現在 github 主分支名字都叫 main 了，因此版本號寫 main 。圖片路徑，是在倉庫中的相對路徑，因為我這裡就在根目錄，因此就是 test.png 。

最終地址為 //cdn.jsdelivr.net/gh/starry-skys/myImages@main/test.png。

其他說明，可參考 jsDelivr 官網介紹，jsDelivr 官網

配置 typora 自動上傳到 github 圖床

接下來，如果需要在 typora 中設置自動上傳到 gtihub 圖床，還需要做一些配置。

一、首先，在 github 上創建一個 token。

1、點擊右上角帳號上的 settings

2、然後左側點擊 developer settings ，再點擊 personal access tokens ，然後點擊 generate new token。

3、Note 用來說明你創建 token 的用途，然後 scopes 只需要選 repo 的所有選項即可。

4、最後拉到底部，點擊 generate token ，即可成功。

5、找個地方記下這一串 token，等會需要用到。（如果沒有記住，等再查看時就只能重新生成了）

二、打開 PicGo 配置 github 圖床

在 PicGo 中，找到圖床設置 -> GitHub圖床。

倉庫名即為你的github帳號/圖片倉庫名
分支名就用默認的 main
Token 就填寫剛才我們生成的 Token
存儲路徑如果需要指定子目錄可以填寫例如 img/ 。我這裡沒有填，就會上傳到我圖片倉庫的根目錄。
自定義域名就填寫 jsDelivr 的域名，即圖片訪問地址，不包括圖片路徑的前半部分，我這裡就是 //cdn.jsdelivr.net/gh/starry-skys/myImages@main。
最後設為默認圖床，下次在 typora 上傳圖片就會自動上傳到 github 圖床了。

至此，所有步驟就已經完成了，趕緊去嘗試一下吧。

教你如何使用github+jsDelivr搭建免費圖床

前言