使用 jsDelivr CDN 對 Github 圖牀進行加速，帶給你如絲滑般的圖片體驗！

文章作者：夢家
個人站點：dreamhomes.top
原文地址：https://dreamhomes.top/703.html
公衆號ID：DreamHub

背景

最開始博客都是使用七牛雲存儲作爲圖牀，七牛雲註冊認證後有10G永久免費空間，每月10G國內和10G國外流量，速度相當快，七牛雲是國內專業CDN服務商，插件支持比較多，有免費ssl證書。計費問題 > 免費額度須知

最開始以爲這10G流量可以使用非常長時間，沒想到七牛雲https流量收費啊！而且現在網站都需遷爲https才能顯示網站安全！因此，本人使用七牛雲圖牀一個月後就發現欠費了😂

作爲一個窮學生黨，雖然七牛雲價格便宜但是畢竟不免費啊，因此就需要另尋一免費的圖牀！以前一直使用github pages 寫博客，但其缺點是圖片訪問速度較慢，有辦法可以加速圖片訪問嗎？當然有，本文就介紹一種使用 jsDelivr CDN 加速 Github 圖牀訪問的方法。

jsDelivr 介紹

jsDelivr 是國外的一家優秀的公共 CDN 服務提供商，也是首個打通中國大陸（網宿公司運營）與海外的免費 CDN 服務。jsDelivr 有一個十分好用的功能——它可以加速 Github 倉庫的文件。因此可以借Github 搭建一個免費、全球訪問速度超快的圖牀。

解決思路

首先在 Github 上創建一個用於存儲圖片的倉庫，然後使用 PicGo 將圖片上傳到指定倉庫並獲取對應的 jsDelivr 加速圖片訪問地址。最後我們就可以愉快地在markdown中寫博客了阿！

PS： Github 倉庫的容量有 1G 的上限，但對個人博客來說綽綽有餘！

配置過程

1. 新建一個倉庫用於存儲圖片，例如我的倉庫名爲 dreamhomes/blog-image-bed：
   
2. 獲取 github token 用於 PicGo 訪問 github 圖牀：
   創建地址：https://github.com/settings/tokens
   
   
   最後點擊生成token即可，保存生成的token。
   
3. 下載PicGo並安裝, 下載地址：https://github.com/Molunerfinn/PicGo/releases，安裝完成後打開 PicGo 來設置 Github 圖牀：
   
   設置參數說明：
   • 設定倉庫名：填入你上面創建的倉庫名，格式爲：用戶名/倉庫名；
   • 設定分支名：一般填寫 master 即可；
   • 設定 Token：將上一步 Github 配置中得到的 Token 粘貼進去；
   • 指定存儲路徑：圖片在 Github 倉庫中的存儲路徑，例如本人是：top/dreamhomes/blog/imgs/
   • 設定自定義域名：此處直接設置 jsDelivr 加速的訪問地址，例如本人是：https://cdn.jsdelivr.net/gh/dreamhomes/blog-image-bed@master
     • gh 表示來自 Github 的倉庫
     • dreamhomes/blog-image-bed 倉庫的具體位置
     • master 倉庫的分支

到此，配置過程已完成。接下來就測試一下加速後圖片的訪問速度吧！

• 未加速訪問地址
• 加速訪問地址

結論

整個過程比較簡單，創建 Github 倉庫，並獲取 token，填入 PicGo 配置即可完成。學習 jsDelivr CDN 加速 Github 圖牀訪問的方法具有一下好處：

• 使用 jsDelivr 加速靜態文件訪問，能夠優化博客體驗。
• 在 Github 存儲圖片，利於博主對於圖片的掌控。
• 使用 PicGo 的原因是因爲能夠方便地將上傳圖片到 Github，並直接獲取 jsDelivr 的加速後的圖片地址。

當然最重要的還是省錢啊~

聯繫作者