使用 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="https://www.cnblogs.com/images', assets_images_url }}
{% include footer.html %}

大意就是，如果打開了啟用 jsDelivr 加速的開關，就將 content 里的 src="https://www.cnblogs.com/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 博客的靜態資源

標籤：Html/Css

上一篇：原生JS內置物件的字串操作習題

下一篇：原生JS內置物件的字串操作習題