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

之前寫過一篇 使用 jsDelivr 免費加速 GitHub Pages 博客的靜態資源，在那之後，又陸續想到並實施了幾點利用 jsDelivr 進一步加速靜態資源加載的措施，新起一篇作爲記錄和分享。

繼上一輪改造過後，比較拖頁面加載速度的主要有三點：

1. 頁面首個請求響應時間；
2. 圖片資源加載時間；
3. 站內搜索引用的 JSON 資源加載時間。

第 1 點在頁面仍然託管在 GitHub Pages 的前提下，似乎沒有什麼好辦法能產生質的飛躍；本篇主要改善了第 2 點和第 3 點。

0x01 圖片資源加速

這裏所說的圖片主要是指文章裏引用的圖片。

我一直將圖片放在博客源碼根目錄的 images 文件夾下，引用圖片的習慣寫法是這樣的：

![after use cdn](/images/posts/github/cdn-after.png)

如果想將這個圖片地址替換爲 jsDelivr 的地址，需要做的就是將 /images 替換爲 https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images。

一處一處替換行不行？當然也行，但後面寫新文章時要引用圖片，還得手動寫這一長串，不方便；萬一 jsDeliver 出狀況，也不好一鍵切換回來。有沒有一勞永逸的方法？當然也有，我們從 Jekyll 的 layout 機制來想辦法。

Jekyll 的 layout 可以理解爲頁面模板，它是可以繼承的，比如我的博客的所有頁面模板有一個共同的祖先模板 _layouts/default.html，模板裏可以使用 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 這個 JavaScript 庫來實現站內搜索的，它的搜索數據是來自一個動態生成的 JSON 文件。

這個 JSON 文件編譯前長這樣：

https://github.com/mzlogin/mzlogin.github.io/blob/master/assets/search_data.json

Jekyll 編譯後長這樣：

https://mazhuang.org/assets/search_data.json

這樣的資源是沒有辦法直接通過替換網址來用 jsDelivr 加速的，因爲 jsDelivr 上緩存的是編譯前的文件，而我們需要的是編譯後的。

那我們就想辦法：

1. 將博客源碼編譯；
2. 將編譯結果保存到另一個分支；
3. 通過 jsDelivr 引用新分支上的這個文件。

這些步驟可以通過 GitHub 去年推出的新特性 Actions 來完成，在我們每一次向博客源碼倉庫 push 代碼時自動觸發。

關鍵步驟如下：

1. 在 GitHub 新建一個 Personal access Token：

   Settings --> Developer settings --> Personal access tokens --> Generate new token --> 填寫 note，勾選 public_repo，生成之後複製 token 值備用。

2. 在博客源碼倉庫的 Settings --> Secrets --> New secret，Name 填 ACCESS_TOKEN，Value 填第 1 步裏複製的 token 值；

3. 在博客源碼根目錄下新建文件 .github/workflows/ci.yml，內容如下：

   name: Build and Deploy
   
   on:
     push:
       branches: [ master ]
   
   jobs:
     build-and-deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout
           uses: actions/[email protected]
           with: 
             persist-credentials: false
   
         - name: Set Ruby 2.7
           uses: actions/setup-ruby@v1
           with:
             ruby-version: 2.7
   
         - name: Install and Build
           run: |
             gem install bundler
             bundle install
             bundle exec jekyll build
           
         - name: Deploy
           uses: JamesIves/[email protected]
           with:
             ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
             BRANCH: built
             FOLDER: _site
             CLEAN: true
   

   大意就是在向 master 分支 push 代碼時，自動執行 checkout、初始化 ruby 環境、安裝 Jekyll 並編譯博客源碼的工作，最後將編譯生成的 _site 目錄裏的內容推送到 built 分支。對 GitHub Actions 感興趣的同學可以自行參考官方說明學習。

4. 修改引用 JSON 文件的地方，比如我的 _includes/sidebar-search.html 裏的寫法由：

   json: '{{ site.url }}/assets/search_data.json',
   

   改爲了

   {% if site.cdn.jsdelivr.enabled and site.url contains 'mazhuang.org' %}
     json: 'https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@built/assets/search_data.json',
   {% else %}
     json: '{{ site.url }}/assets/search_data.json',
   {% endif %}
   

5. 將以上更改推送到源碼倉庫，等待處理完成即可。

0x03 結語

經過以上改造，博客頁面的加載速度又得到了小小的提升，所有相關源碼可以在 https://github.com/mzlogin/mzlogin.github.io 找到，有相關心得或建議的朋友歡迎交流指正。

相關文章：

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