教你如何使用Github+JsDelivr搭建免費圖床
正文
本文內容包括:
- 創建一個 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 圖床了。
至此,所有步驟就已經完成了,趕緊去嘗試一下吧。
本文轉載自微信公眾號「煙雨星空」,可以通過以下二維碼關注。轉載本文請聯系煙雨星空公眾號。