关于html:使用-jsDelivr-免费加速-GitHub-Pages-博客的静态资源二

5次阅读

共计 2867 个字符，预计需要花费 8 分钟才能阅读完成。

之前写过一篇应用 jsDelivr 收费减速 GitHub Pages 博客的动态资源，在那之后，又陆续想到并施行了几点利用 jsDelivr 进一步减速动态资源加载的措施，新起一篇作为记录和分享。

继上一轮革新过后，比拟拖页面加载速度的次要有三点：

页面首个申请响应工夫；
图片资源加载工夫；
站内搜索援用的 JSON 资源加载工夫。

第 1 点在页面依然托管在 GitHub Pages 的前提下，仿佛没有什么好方法能产生质的飞跃；本篇次要改善了第 2 点和第 3 点。

这里所说的图片次要是指文章里援用的图片。

我始终将图片放在博客源码根目录的 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"。

以上便达成了咱们的目标。

我是应用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索的，它的搜寻数据是来自一个动静生成的 JSON 文件。

这个 JSON 文件编译前长这样：

https://github.com/mzlogin/mz…

Jekyll 编译后长这样：

https://mazhuang.org/assets/s…

这样的资源是没有方法间接通过替换网址来用 jsDelivr 减速的，因为 jsDelivr 上缓存的是编译前的文件，而咱们须要的是编译后的。

那咱们就想方法：

将博客源码编译；
将编译后果保留到另一个分支；
通过 jsDelivr 援用新分支上的这个文件。

这些步骤能够通过 GitHub 去年推出的新个性 Actions 来实现，在咱们每一次向博客源码仓库 push 代码时主动触发。

关键步骤如下：

在 GitHub 新建一个 Personal access Token：
Settings –> Developer settings –> Personal access tokens –> Generate new token –> 填写 note，勾选 public_repo，生成之后复制 token 值备用。
在博客源码仓库的 Settings –> Secrets –> New secret，Name 填 ACCESS_TOKEN，Value 填第 1 步里复制的 token 值；

在博客源码根目录下新建文件 .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


粗心就是在向 master 分支 push 代码时，主动执行 checkout、初始化 ruby 环境、装置 Jekyll 并编译博客源码的工作，最初将编译生成的 _site 目录里的内容推送到 built 分支。对 GitHub Actions 感兴趣的同学能够自行参考官网阐明学习。4. 批改援用 JSON 文件的中央，比方我的 _includes/sidebar-search.html 里的写法由：

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

改为了

```liquid
{% 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 %}
```