教你如何使用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。即 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 官網

配置 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 的域名,即圖片訪問地址,不包括圖片路徑的前半部分,我這裡就是 https://cdn.jsdelivr.net/gh/starry-skys/myImages@main
  • 最後設為預設圖床,下次在 typora 上傳圖片就會自動上傳到 github 圖床了。

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

相關文章