使用 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/checkout@v2.3.1
           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/github-pages-deploy-action@3.6.2
           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 博客的靜態資源