教你如何使用Github+JsDelivr搭建免費(fèi)圖床
正文
本文內(nèi)容包括：
- 創(chuàng)建一個(gè) github 倉(cāng)庫(kù)
- 使用 jsDelivr 免費(fèi) CDN 加速圖片訪問(wèn)速度
- 創(chuàng)建 Token
- 使用 PicGo 配置 github 圖床
創(chuàng)建 github 倉(cāng)庫(kù)這里就跳過(guò)怎么注冊(cè) github 賬號(hào)的步驟了，做技術(shù)的都曉得。
1、登錄你的 github 賬號(hào)，創(chuàng)建一個(gè)新的倉(cāng)庫(kù)。
2、然后填寫倉(cāng)庫(kù)的資料，主要是倉(cāng)庫(kù)名，其他一般默認(rèn)。
3、點(diǎn)擊 create repository 后，跳到這個(gè)頁(yè)面，就說(shuō)明創(chuàng)建成功了。
然后可以上傳一張圖片試一下。不過(guò)，有可能你會(huì)遇到在 github 上看到的圖片是裂開的情況。
只需要在電腦的 hosts 文件中添加以下代碼即可。windows 下的 hosts文件 目錄在 C:\Windows\System32\drivers\etc 。(注意要以管理員權(quán)限打開) 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
然后回到你的圖片倉(cāng)庫(kù)，刷新一下頁(yè)面即可正常顯示圖片。
使用 jsDelivr 免費(fèi)加速
其實(shí)，此時(shí)已經(jīng)可以正常訪問(wèn)你倉(cāng)庫(kù)中的圖片了。我這里以我創(chuàng)建好的倉(cāng)庫(kù) myImages 為例。
要想訪問(wèn)倉(cāng)庫(kù)中的這個(gè) 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 。
但是，我們發(fā)現(xiàn)，通過(guò) github 直接訪問(wèn)圖片，速度不是特別理想，畢竟服務(wù)器在國(guó)外。
因此，我們可以使用 jsDelivr 進(jìn)行 CDN 加速。這是完全開源免費(fèi)的。
使用方法，非常簡(jiǎn)單，即把圖片地址鏈接域名改為 CDN 的域名。格式如下：
https://cdn.jsdelivr.net/gh/<你的github用戶名>/<你的圖床倉(cāng)庫(kù)名>@<倉(cāng)庫(kù)版本號(hào)>/圖片的路徑
還是以上邊的 test.png 圖片為例，倉(cāng)庫(kù)版本號(hào)直接用分支名，由于現(xiàn)在 github 主分支名字都叫 main 了，因此版本號(hào)寫 main 。圖片路徑，是在倉(cāng)庫(kù)中的相對(duì)路徑，因?yàn)槲疫@里就在根目錄，因此就是 test.png 。
最終地址為 https://cdn.jsdelivr.net/gh/starry-skys/myImages@main/test.png。
其他說(shuō)明，可參考 jsDelivr 官網(wǎng)介紹，jsDelivr 官網(wǎng)
配置 typora 自動(dòng)上傳到 github 圖床
接下來(lái)，如果需要在 typora 中設(shè)置自動(dòng)上傳到 gtihub 圖床，還需要做一些配置。
一、首先，在 github 上創(chuàng)建一個(gè) token。
1、點(diǎn)擊右上角賬號(hào)上的 settings
2、然后左側(cè)點(diǎn)擊 developer settings ，再點(diǎn)擊 personal access tokens ，然后點(diǎn)擊 generate new token。
3、Note 用來(lái)說(shuō)明你創(chuàng)建 token 的用途，然后 scopes 只需要選 repo 的所有選項(xiàng)即可。
4、最后拉到底部，點(diǎn)擊 generate token ，即可成功。
5、找個(gè)地方記下這一串 token，等會(huì)需要用到。(如果沒有記住，等再查看時(shí)就只能重新生成了)
二、打開 PicGo 配置 github 圖床
在 PicGo 中，找到圖床設(shè)置 -> GitHub圖床。
- 倉(cāng)庫(kù)名即為你的github賬號(hào)/圖片倉(cāng)庫(kù)名
- 分支名就用默認(rèn)的 main
- Token 就填寫剛才我們生成的 Token
- 存儲(chǔ)路徑如果需要指定子目錄可以填寫例如 img/ 。我這里沒有填，就會(huì)上傳到我圖片倉(cāng)庫(kù)的根目錄。
- 自定義域名就填寫 jsDelivr 的域名，即圖片訪問(wèn)地址，不包括圖片路徑的前半部分，我這里就是 https://cdn.jsdelivr.net/gh/starry-skys/myImages@main。
- 最后設(shè)為默認(rèn)圖床，下次在 typora 上傳圖片就會(huì)自動(dòng)上傳到 github 圖床了。
至此，所有步驟就已經(jīng)完成了，趕緊去嘗試一下吧。
本文轉(zhuǎn)載自微信公眾號(hào)「煙雨星空」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系煙雨星空公眾號(hào)。
