使用 jsDelivr 免費加速 GitHub Pages 博客的靜態資源

挺久之前就有網友給個人 GitHub Pages 博客模板提 Issue，說但願能增長 CDN 用於加速靜態資源的加載，因爲懶，一直沒有動。

最近偶爾要打開本身博客看下 Wiki 的時候，要等挺久，比較痛苦，碰巧昨天晚上看到這樣一篇帖子：GitHub 圖牀的正確用法，經過 jsDelivr CDN 全球加速，感受很適合個人需求場景，因而決定趁這幾天休假將這個改造一下。

先看效果

如下改造先後的加載狀況都是在 Edge 瀏覽器禁用緩存後錄製的，錄製時間段很接近，從本地訪問兩個 GitHub Pages 服務的原始響應速度應該相似。

改造前加載

注：因爲改造前沒有保留加載圖，因此這是截的一個使用相同模板的朋友的首頁加載狀況。

能夠看到耗時最長的兩個請求時間達到了 12 秒左右，並且不少資源的加載時間在 1 秒以上，頁面完成加載時間長達 15 秒多……估計通常的訪客是沒這個耐心等待的。

改造後加載

這樣一對比效果仍是很明顯的。改造事後耗時最長的是兩個沒辦法走 CDN 的請求，而走 CDN 的那些資源加載時間基本都沒超過 60 毫秒，頁面完成加載時間縮短到了 3 秒之內。

固然，由於頁面自身仍是在 GitHub Pages 託管，有時候首個請求仍是會挺久才返回。

改造後的效果能夠打開 mazhuang.org 體驗。

方案考慮

優化獨立博客的加載速度有一些不一樣的思路，對應不一樣的方案：

1. 優化博客代碼，精簡須要加載的資源；
2. 將博客部署到國內訪問快的服務器上；
3. 部署到國內的代碼託管平臺，好比 Gitee 和 Coding 等；
4. 採用 CDN 加速；
5. 等等。

其中 2 和 3 我不想考慮，仍是指望只在 GitHub 上管理博客，因此 1 和 4 是優化方向，本文對應的就是 4 的部分。

而採用 CDN 加速的方案，能夠考慮

• 將公共庫改成直接引用公共 CDN 連接；

• 本身編寫和修改的靜態資源本身去託管在一個 CDN 服務上。

  有一些 CDN 服務商提供必定的免費額度，能夠按喜愛選用，或者選擇付費服務。這裏我沒有糾結，看完文首提到的那篇文章，去看了下 jsDelivr 的介紹後以爲靠譜：它原生支持使用 GitHub 項目裏的資源，什麼都不用配置，更重要的是免費，在國內有節點，並且速度還不錯（官網上也把 works in China 做爲一個賣點的），遂決定直接用它。

jsDelivr 支持的 GitHub 資源的方式

jsDelivr 對 GitHub 的支持是做爲重要特性來宣傳的，官網的介紹連接：www.jsdelivr.com/features#gh，如下是一些認爲須要瞭解的知識的小結：

這裏以我託管博客的 GitHub 倉庫爲例，地址是 https://github.com/mzlogin/mzlogin.github.io，那它裏面的資源能夠直接以 https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io/ + 倉庫裏的文件路徑 來訪問。

好比倉庫裏有一個 js 文件 assets/js/main.js，那麼它能夠用 CDN 連接 https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io/assets/js/main.js 來訪問。

另外還支持一些高級用法，好比：

1. 指定 release 版本號/提交 sha1/分支名稱，例如指定獲取該倉庫的名稱爲 1.2.0 或 v1.2.0 的 release 版本資源：

   https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/main.js
   複製代碼

   若是指定版本爲 1 或者 1.2，那它會自動匹配到這個範圍內的最新版本號。

   也能夠不指定版本或者指定版本爲 latest，這樣老是使用最新版本的資源。

2. 壓縮資源，在 js/css 文件後綴前面加上 .min：

   https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/main.min.js
   複製代碼

3. 合併多個文件，用 combine/file1,file2,file3 格式的連接：

   https://cdn.jsdelivr.net/combine/gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/main.min.js,gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/simple-jekyll-search.min.js
   複製代碼

壓縮資源、合併文件的 CDN 連接在第一次有人訪問時可能比較慢，後面再有人訪問就快了。

其它知識點：

• 能夠經過 https://cdn.jsdelivr.net/combine/gh/mzlogin/mzlogin.github.io[@<版本號>]/[<文件夾>/] 這樣的路徑瀏覽緩存文件列表；
• 能夠訪問 https://purge.jsdelivr.net/gh/mzlogin/mzlogin.github.io@1.2.0/assets/js/main.js 來清除指定文件的緩存；（將引用的 CDN 連接裏的 cdn 改爲 purge 就是了）
• 能夠訪問 https://data.jsdelivr.com/v1/package/gh/mzlogin/mzlogin.github.io 來查看 CDN 上的 tags 和 versions 列表，更多數據接口參數參見 github.com/jsdelivr/da…。

改造步驟

下面是記錄具體改造博客模板的步驟：

1. 在 _config.yml 文件中添加控制開關：

   # 對 css 和 js 資源的 cdn 加速配置
   cdn:
    jsdelivr:
    enabled: true
   複製代碼

2. 修改 _layouts 裏的文件，給名爲 assets_base_url 的變量賦值，用它來表明加載靜態資源的根路徑：

   {% assign assets_base_url = site.url %}
   {% if site.cdn.jsdelivr.enabled %}
       {% assign assets_base_url = "https://cdn.jsdelivr.net/gh/" | append: site.repository %}
   {% endif %}
   複製代碼

3. 修改之前直接用 {{ site.url }} 拼接的靜態資源引用連接，替換爲 {{ assets_base_url }}，好比 _includes/header.html 裏：

   - <link rel="stylesheet" href="{{ site.url }}/assets/css/posts/index.css">
   + <link rel="stylesheet" href="{{ assets_base_url }}/assets/css/posts/index.css">
   複製代碼

這樣萬一哪天 CDN 出了點什麼情況，咱們也能夠很方便地經過一個開關就切回自已的資源連接恢復服務。

主要就是這類修改，固然涉及的地方有多處，以上只是舉一處例子記錄示意，改造過程和改造後的代碼能夠參考個人博客倉庫 github.com/mzlogin/mzl…。

現存問題

• 若是項目曾經打過 tag，那麼新增/修改靜態資源後，須要刷新 CDN 緩存的話，須要打個新 tag；

  通常發生在修改了博客模板的 js/css 之後。我也還在摸索如何省去這一步的方法。

  Update: 我後來採用的解決方法是刪除了全部的 tag，這樣之前的 release 就變成了 Draft，對外是不可見的，由於我這個倉庫不須要對外可見的 release，因此這個問題也就解決了，不須要再操心刷新 CDN 的問題了。

參考連接

• GitHub 圖牀的正確用法，經過 jsDelivr CDN 全球加速
• jsDelivr 爲開發者提供免費公共 CDN 加速服務
• Features - jsDelivr

---

假如你對個人文章感興趣，能夠關注個人微信公衆號『悶騷的程序員』隨時閱讀更多內容。