之前写了一篇文章使用jsDelivr免费加速GitHubPages博客的静态资源。之后想到并实现了几点使用jsDelivr进一步加速静态资源上传的措施，新建一个作为记录分享。经过上一轮的改造，页面加载速度的对比主要有3个方面：页面第一次请求的响应时间；图片资源的加载时间；本站搜索引用的JSON资源的加载时间。在第一点依然托管在GitHubPages的前提下，似乎没有什么好的办法来进行质的飞跃；本文主要改进第二点和第三点。0x01图片资源加速这里所说的图片主要是指文中引用的图片。我一直把图片放在博客源码根目录的images文件夹下。习惯引用图片的方式是这样的：将/images替换为https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images。一个一个替换好吗？当然也可以，但是后面写新文章的时候，需要引用图片，还得手动写这个长长的列表，很不方便；万一jsDeliver出问题，不容易一键切换回来。有没有一劳永逸的方法？当然，我们可以从Jekyll的布局机制中想办法。Jekyll的布局可以理解为一个页面模板，可以继承。例如，我博客的所有页面模板都有一个共同的祖先模板_layouts/default.html。该模板可以使用Liquid语法来处理内容。我们可以利用这一点，来自动完成批量替换的工作。关键代码如下：附：网站。存储库|append:'@master'%}{%endif%}{%assignassets_images_url='src="'|append:assets_base_url|append:"/images"%}{%includeheader.html%}{{内容|替换：'src="/images',assets_images_url}}{%includefooter.html%}大意是，如果开启jsDelivr加速，将content中的src="/images"替换为src="https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images”，否则替换为src="https://mazhuang.org/images"。以上就达到了我们的目的。0x02站内搜索引用JSON资源加速我使用JavaScript库Simple-Jekyll-Search实现站内搜索，其搜索数据来自动态生成的JSON文件。这个JSON文件在编译之前看起来是这样的：https://github.com/mzlogin/mz...Jekyll在编译之后看起来是这样的：https://mazhuang.org/assets/s...没有办法这样直接传资源把加速的url换成jsDelivr，因为jsDelivr缓存了预编译的文件，但是我们需要编译后的文件。那我们就想办法：编译博客源码；将编译结果保存到另一个分支；通过jsDelivr在新分支上引用此文件。这些步骤都可以通过Actions完成，这是GitHub去年推出的一个新功能，每次我们将代码推送到博客源代码仓库时都会自动触发。关键步骤如下：在GitHub上新建一个PersonalaccessToken：Settings-->Developersettings-->Personalaccesstokens-->Generatenewtoken-->填写note，勾选public_repo，复制token值一代之后。在博客源码仓库的Settings-->Secrets-->Newsecret中，Name填写ACCESS_TOKEN，Value填写第一步复制的token值；在博客源码根目录新建文件.github/workflows/ci.yml，内容如下：name:BuildandDeployon:push:branches:[master]jobs:build-and-deploy:运行：ubuntu-最新步骤：-名称：Checkout使用：actions/checkout@v2.3.1with：persist-credentials：false-name：SetRuby2.7使用：actions/setup-ruby@v1with：ruby-version：2.7-名称：安装和构建运行：|geminstallbundlerbundleinstallbundleexecjekyllbuild-name:Deploy使用：JamesIves/github-pages-deploy-action@3.6.2with:ACCESS_TOKEN:${{secrets.ACCESS_TOKEN}}BRANCH:builtFOLDER:_site主要思想是自动执行checkout，初始化ruby环境，在代码推送到master分支时安装Jekyll并编译博客源码，最后将编译后的_site目录内容推送到build分支。对GitHubActions感兴趣的同学可以参考官方说明自行学习。4.修改引用json文件的地方，比如我的_includes/sidebar-search.html中的写法改为：json:'{{site.url}}/assets/search_data.json',```to```liquid{%ifsite.cdn.jsdelivr.enabledandsite.urlcontains'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%}```将以上修改推送到源码仓库并等待处理完成。0x03结论经过以上修改，博客页面的加载速度略有提升。所有相关源码都可以在https://github.com/mzlogin/mz找到...欢迎有相关经验或建议的朋友交流指正。相关文章：使用jsDelivr免费加速GitHub页面博客的静态资产
