使用 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 的加速後的圖片地址。

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

聯繫作者

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章