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

继上一轮改造过后,比较拖页面加载速度的主要有三点:

第 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 资源加速

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

Jekyll 编译后长这样:

这样的资源是没有办法直接通过替换网址来用 jsDelivr 加速的,因为 jsDelivr 上缓存的是编译前的文件,而我们需要的是编译后的。

那我们就想办法:

关键步骤如下:

0x03 结语

相关文章:

Original: https://www.cnblogs.com/mazhuang/p/13779379.html
Author: mzlogin
Title: 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/572778/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 如何快速地学习新技术

    如何快速地学习新技术 分为5个步骤: 项目开发时,面临一个问题,需要解决。 如n年前的”页面局部刷新问题”,用户不需要整个门户的页面,只会浏览部分。 当使用…

    Java 2023年6月7日
    083
  • leetcode 226. Invert Binary Tree 翻转二叉树(简单)

    一、题目大意 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root = [4,2,7,1,3,6,9]输出:[4,7,2,9,6,3,1…

    Java 2023年6月14日
    084
  • 利用MySQL实现分布式锁,涉及到乐观锁和悲观锁的思想

    对于一些并发量不是很高的场景,使用MySQL来实现分布式锁会比较精简且巧妙。 下面就一个小例子,针对不加锁、乐观锁以及悲观锁这三种方式来实现。 主要是一个用户表,它有一个年龄的字段…

    Java 2023年6月8日
    0181
  • 接口(Java)

    基本介绍 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有 接口:只有规范(抽象方法)自己无法写方法~专业的约束!约束和现实分离:面向接口编程 接口就是规范,定义的是一…

    Java 2023年6月9日
    066
  • 分布式任务调度平台XXL-JOB安装及使用

    一、为什么需要任务调度平台 在Java中,传统的定时任务实现方案,比如Timer,Quartz等都或多或少存在一些问题: 不支持集群、不支持统计、没有管理平台、没有失败报警、没有监…

    Java 2023年6月5日
    085
  • Spring IOCAOPBean

    Spring是一个轻量级的控制反转IOC和面向切面编程AOP的框架 Spring 自带 IoC(Inverse of Control:控制反转) 和 AOP(Aspect-Orie…

    Java 2023年6月5日
    087
  • paoding rose controller包及文件名命名规则

    1.包命名规则:xxx.xxx.controllers(否则扫描不到) 2.文件命名规则 xxx Controller Original: https://www.cnblogs….

    Java 2023年6月6日
    062
  • mybatis查询参数为List<String>,输出结果为List<String>写法

    <select id="getStopedProcessInstanceByIds" parameterType="java.util.List…

    Java 2023年5月30日
    081
  • Activiti 7 源码学习

    启动分析 源码版本是 7.1.0.M6 首先从 ProcessEngineAutoConfiguration 开始 ProcessEngineAutoConfiguration 是…

    Java 2023年6月7日
    085
  • Spring Cloud 还没学明白,Istio 又是什么鬼??

    背景 过去,我们运维着”能做一切”的大型单体应用程序。这是一种将产品推向市场的很好的方式,因为刚开始我们也只需要让我们的第一个应用上线。 而且我们总是可以回…

    Java 2023年5月29日
    099
  • Java Math.random函数的运用

    例如取[x,y]范围内的一个随机数 int a = (int)(Math.random*(y-x+1)+x); //强转成int型,取值范围为[1,7) 若没有后面的+1,则生成[…

    Java 2023年6月15日
    086
  • JAVA设计模式-原型模式

    JAVA设计模式-原型模式 介绍 原型模式是一种创建型模式,用于创建重复的对象,并且保证性能。原型模式创建的对象是由原型对象自身创建的,是原型对象的一个克隆,和原型对象具有相同的结…

    Java 2023年6月15日
    099
  • Mybatis动态查询

    😎多条件的查询 if 根据标签中test的属性所对应的表达式决定标签中的内容是否拼接到sql语句中 select * from t_user where ‘cwlz’=’cwlz’…

    Java 2023年6月8日
    088
  • springboot 2.2.0 snapshot 升级到 2.5.0 snapshot时,jenkins构建失败,出现的版本无法转换的问题

    第一次报错: [FATAL] Non-resolvable parent POM for org.kosoku:commonfast:2.0.0-SNAPSHOT: Failure…

    Java 2023年5月30日
    0101
  • win10搭建mysql主从复制(单台机器)

    找了好多文章,都是多台机器,而且写的博客实在看不下去,无奈。环境: mysql5.5win10主机和从机都是在win10下面的一个目录下。另外:如果是从没有安装过mysql的可以直…

    Java 2023年6月7日
    074
  • Redis

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    Java 2023年6月9日
    078
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球