V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mzlogin
V2EX  ›  GitHub

使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

  •  
  •   mzlogin ·
    mzlogin · 2020-10-08 10:01:46 +08:00 · 2009 次点击
    这是一个创建于 1267 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前写过一篇 使用 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 找到,有相关心得或建议的朋友欢迎交流指正。

    相关文章:

    4 条回复    2020-10-08 11:03:26 +08:00
    wolfan
        1
    wolfan  
       2020-10-08 10:11:31 +08:00
    如何解决 github pages 上墙的问题呐?
    miao1007
        2
    miao1007  
       2020-10-08 10:36:33 +08:00 via iPhone
    然后解析的结果是 127.0.0.1
    mzlogin
        3
    mzlogin  
    OP
       2020-10-08 11:03:14 +08:00
    @wolfan 这个……我没有什么好办法,换托管到国内的服务吧,gitee 之类的?
    mzlogin
        4
    mzlogin  
    OP
       2020-10-08 11:03:26 +08:00
    @miao1007 嗯?是指什么呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   981 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:07 · PVG 06:07 · LAX 15:07 · JFK 18:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.