使用 jsDelivr 免費加速 GitHub Pages 部落格的靜態資源（二）
阿新 • • 發佈：2020-10-08
之前寫過一篇 [使用 jsDelivr 免費加速 GitHub Pages 部落格的靜態資源](https://mazhuang.org/2020/05/01/cdn-for-github-pages/)，在那之後，又陸續想到並實施了幾點利用 jsDelivr 進一步加速靜態資源載入的措施，新起一篇作為記錄和分享。
繼上一輪改造過後，比較拖頁面載入速度的主要有三點：
1. 頁面首個請求響應時間；
2. 圖片資源載入時間；
3. 站內搜尋引用的 JSON 資源載入時間。
第 1 點在頁面仍然託管在 GitHub Pages 的前提下，似乎沒有什麼好辦法能產生質的飛躍；本篇主要改善了第 2 點和第 3 點。
## 0x01 圖片資源加速
這裡所說的圖片主要是指文章裡引用的圖片。
我一直將圖片放在部落格原始碼根目錄的 images 資料夾下，引用圖片的習慣寫法是這樣的：
```markdown
```
如果想將這個圖片地址替換為 jsDelivr 的地址，需要做的就是將 `/images` 替換為 `https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images`。
一處一處替換行不行？當然也行，但後面寫新文章時要引用圖片，還得手動寫這一長串，不方便；萬一 jsDeliver 出狀況，也不好一鍵切換回來。有沒有一勞永逸的方法？當然也有，我們從 Jekyll 的 layout 機制來想辦法。
Jekyll 的 layout 可以理解為頁面模板，它是可以繼承的，比如我的部落格的所有頁面模板有一個共同的祖先模板 _layouts/default.html，模板裡可以使用 [Liquid](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) 語法對內容進行處理，我們可以利用這一點，來自動完成批量替換的工作。
關鍵程式碼如下：
```liquid
{% assign assets_base_url = site.url %}
{% if site.cdn.jsdelivr.enabled %}
{% assign assets_base_url = "https://cdn.jsdelivr.net/gh/" | append: site.repository | append: '@master' %}
{% endif %}
{% assign assets_images_url = 'src="' | append: assets_base_url | append: "/images" %}
{% include header.html %}
{{ content | replace: 'src="/images', assets_images_url }}
{% include footer.html %}
```
大意就是，如果打開了啟用 jsDelivr 加速的開關，就將 `content` 裡的 `src="/images"` 替換為 `src="https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images"`，否則替換為 `src="https://mazhuang.org/images"`。
以上便達成了我們的目的。
## 0x02 站內搜尋引用的 JSON 資源加速
我是使用 [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search) 這個 JavaScript 庫來實現站內搜尋的，它的搜尋資料是來自一個動態生成的 JSON 檔案。
這個 JSON 檔案編譯前長這樣：
Jekyll 編譯後長這樣：
這樣的資源是沒有辦法直接通過替換網址來用 jsDelivr 加速的，因為 jsDelivr 上快取的是編譯前的檔案，而我們需要的是編譯後的。
那我們就想辦法：
1. 將部落格原始碼編譯；
2. 將編譯結果儲存到另一個分支；
3. 通過 jsDelivr 引用新分支上的這個檔案。
這些步驟可以通過 GitHub 去年推出的新特性 [Actions](https://github.com/features/actions) 來完成，在我們每一次向部落格原始碼倉庫 push 程式碼時自動觸發。
關鍵步驟如下：
1. 在 GitHub 新建一個 Personal access Token：
Settings -->