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

简介: 使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。

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

相关文章:

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
6月前
|
缓存 前端开发 JavaScript
通过jsDelivr实现Github图床CDN加速
jsdelivr是一个免费的公共CDN(内容分发网络)服务,它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上,并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间,提高网页加载速度,同时减轻原始服务器的负载。
429 1
|
6月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
3月前
|
前端开发 JavaScript 开发工具
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
本文介绍了一种将本地图片和静态资源(如 js、css、文档等)上传至免费CDN的方法,便于随时调用。具体步骤包括:在GitHub创建仓库`resources`存放资源;通过上传或Git命令同步文件;在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效,适合开发者快速部署和共享静态内容。
135 2
使用jsDelivr和GitHub,上传本地静态资源到免费CDN
|
1月前
为什么 GitHub Pages 的文章标题不能以 @ 开头?
本文记录了一个 GitHub Pages 博客网页上文章标题以 `@` 开头导致的问题,并分析了原因,提供了解决方法。
41 0
|
3月前
GitHub——使用GitHub Pages生成在线文档
GitHub——使用GitHub Pages生成在线文档
24 0
|
5月前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
57 2
|
5月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
70 0
|
5月前
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
5月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
92 0
下一篇
无影云桌面