使用Picgo+GitHub+ jsDelivr搭建CDN加速免費(fèi)圖床

代碼黑科技的分享區(qū)

經(jīng)常寫(xiě)Markdown或者博客的同學(xué)，肯定都要用到圖床。圖床是什么呢？其實(shí)相當(dāng)于一個(gè)存儲(chǔ)圖片的網(wǎng)站，類似百度云這樣，不過(guò)上傳圖片到圖床后可以直接通過(guò)外鏈進(jìn)行訪問(wèn)。

比如把本地一張a.jpg上傳到圖床后，便可以拿到一個(gè)鏈接：

https://www.xxx.com/img/a.jpg

然后點(diǎn)擊這個(gè)鏈接就可以訪問(wèn)圖片a了。今天來(lái)聊聊怎么搭建可靠的圖床吧~

為什么會(huì)產(chǎn)生這個(gè)需求呢？因?yàn)樾【幗?jīng)常寫(xiě)博文什么的，現(xiàn)在的做法是在簡(jiǎn)書(shū)上上傳圖片，然后把生成的圖片鏈接放到Markdown文檔上面，寫(xiě)好文檔以后就可以批量復(fù)制到各大博客平臺(tái)投稿了。

但是這樣有個(gè)隱患：萬(wàn)一簡(jiǎn)書(shū)哪天掛掉了，那么我放到csdn、cnbolgs等這些平臺(tái)的文章圖片都會(huì)掛掉。即使簡(jiǎn)書(shū)一直維持現(xiàn)狀，但萬(wàn)一哪天它不高興了，做了個(gè)外鏈防盜（圖片外鏈只能在本站顯示），那同樣會(huì)遇到上面的問(wèn)題。

比如小編之前放在簡(jiǎn)書(shū)上的文章，復(fù)制到csdn上后。不知道怎么回事：

說(shuō)多了都是淚。因此，趁早做好準(zhǔn)備，免得以后出現(xiàn)問(wèn)題就麻煩了。畢竟有些博客的圖片只是隨手一截，還真找不到備份……

平臺(tái)選擇

現(xiàn)在也有蠻多的圖床平臺(tái)可以選擇，常見(jiàn)的有SM.MS圖床、騰訊云COS、微博圖床、GitHub圖床、七牛圖床、Imgur圖床、阿里云OSS、又拍云圖床等。

而這里邊，SM.MS和Imgur有免費(fèi)版也有收費(fèi)版，騰訊云、七牛、阿里云、又拍云都是收費(fèi)的，微博圖床據(jù)說(shuō)已經(jīng)掛了。其他小站的就不推薦了，因?yàn)橹覆欢奶炀蛼炝恕?/span>

那么，也就剩下GitHub安全、免費(fèi)又可靠了（微軟爸爸護(hù)著呢！）。現(xiàn)在微軟接管了GitHub以后，貌似公有倉(cāng)庫(kù)已經(jīng)不限個(gè)數(shù)了，而且單個(gè)倉(cāng)庫(kù)容量已經(jīng)放寬至2GB。這絕對(duì)夠用了，不夠就再建一個(gè)共有倉(cāng)唄。最重要的還是免費(fèi)，配合CDN加速，訪問(wèn)也不成問(wèn)題。嗯，就微軟爸爸了！

工具選擇

選擇一個(gè)本地的上傳工具是為了方便我們快速上傳圖片，獲得圖片外鏈。這里首選picgo。

介紹和下載地址：

https://github.com/Molunerfinn/PicGo

這款小工具非常強(qiáng)大，其中最贊的就是那個(gè)剪切板圖片上傳功能，在QQ或者微信截圖截好圖片后，可以點(diǎn)擊剪切板圖片上傳或者通過(guò)快捷鍵，它就會(huì)把當(dāng)前剪切板中的圖片上傳到配置到圖床中。可以看到上傳所有圖片，點(diǎn)擊即可復(fù)制需要的圖片外鏈格式：

準(zhǔn)備完畢就可以著手配置了。先去GitHub，沒(méi)有賬號(hào)的先注冊(cè)一個(gè)賬號(hào)。

GitHub配置

1. 創(chuàng)建Repository

鼠標(biāo)移動(dòng)到右上角，點(diǎn)擊"New repository"按鈕：

填寫(xiě)相關(guān)信息，創(chuàng)建一個(gè)存儲(chǔ)圖片的倉(cāng)庫(kù)：

2. 配置token key

生成一個(gè)Token用于操作GitHub repository。回到主頁(yè)，點(diǎn)擊"Settings"按鈕：

進(jìn)入頁(yè)面后，點(diǎn)擊"Developer settings"按鈕

點(diǎn)擊"Personal access tokens"按鈕，然后點(diǎn)擊Generate token：

填寫(xiě)描述，選擇"repo"權(quán)限，然后拉到下面點(diǎn)擊"Generate token"按鈕

注意：創(chuàng)建成功后，會(huì)生成一串token，這串token之后不會(huì)再顯示，所以第一次看到的時(shí)候，可以用個(gè)小本本保存起來(lái)哦，忘記了只有重新生成，每次都不一樣。

Picgo配置

拿到了剛剛記錄了GitHub token后，打開(kāi)picgo，按照如下設(shè)置即可：

設(shè)定倉(cāng)庫(kù)名按照“賬戶名/倉(cāng)庫(kù)名的格式填寫(xiě)”，比如我的是：dengfaheng/image01。

分支名統(tǒng)一填寫(xiě)“master”。

設(shè)定Token將之前的Token粘貼在這里。

指定存儲(chǔ)路徑留空。

自定義域名的作用是在上傳圖片后成功后，PicGo會(huì)將“自定義域名+上傳的圖片名”生成的訪問(wèn)鏈接，放到剪切板上。默認(rèn)留空也可以正常使用。這里為了使用CDN加快圖片的訪問(wèn)速度，自定義域名我們按照這樣去填寫(xiě)：

https://cdn.jsdelivr.net/gh/GitHub用戶名/倉(cāng)庫(kù)名

比如我的是：

https://cdn.jsdelivr.net/gh/dengfaheng/image01

點(diǎn)擊確定后就配置完成了，我們截圖后點(diǎn)擊剪切板圖片上傳，如果上傳成功，拿到的外鏈放到Markdown中正常訪問(wèn)，就OK啦。

當(dāng)然快捷上傳的快捷鍵也可以到設(shè)置中進(jìn)行配置。可以看到GitHub倉(cāng)庫(kù)中多了很多我們上傳的圖片。

也可以在picgo中對(duì)上傳的圖片進(jìn)行相關(guān)操作，不過(guò)這里的刪除只是刪除picgo中的圖片而言，GitHub上的不會(huì)刪除哦。

至于如何刪除GitHub上的圖片，emmm……那說(shuō)來(lái)就話長(zhǎng)了。。就不說(shuō)了。大家還是不要?jiǎng)h了，空間不夠了再開(kāi)個(gè)倉(cāng)庫(kù)即可。

推薦閱讀：

干貨 | 想學(xué)習(xí)優(yōu)化算法，不知從何學(xué)起？

干貨 | 運(yùn)籌學(xué)從何學(xué)起？如何快速入門(mén)運(yùn)籌學(xué)算法？

干貨 | 學(xué)習(xí)算法，你需要掌握這些編程基礎(chǔ)（包含JAVA和C++）

干貨 | 算法學(xué)習(xí)必備訣竅：算法可視化解密