CHANSHIYU
GITHUBZERO
  • README
  • 時雨
    • 2017
      • 01 网站动态标题的两种方式
      • 02 RN App 外部唤醒踩坑记
    • 2018
      • 01 不一样の烟火
      • 02 Python 之禅
      • 03 Python 文件操作
    • 2019
      • 01 Aurora 食用指南
      • 02 Godaddy 域名找回记事
      • 03 一个接口的诞生
      • 04 SpringMVC 前后端传参协调
      • 05 主题集成友链访问统计
      • 06 Github Style 博客主题
      • 07 字符编码の小常识
      • 08 WSL 安装 Docker 实录
      • 09 Eriri comic reader
      • 10 Aurora 2.0
      • 11 jsDelivr 全站托管
      • 12 两年工作台变迁史
      • 13 春物
      • 14 一种优雅の笔记方式
    • 2020
      • 01 Telegram 电报机器人
      • 02 她的眼里有星辰
      • 03 文心雕龙
      • 04 软萌木子の有趣笔谈
      • 05 Telegram RSS 订阅频道
      • 06 水月雨银色飞船
      • 07 五年前旧照
    • 2021
      • 01 春宵苦短 2020
      • 02 风花
    • 2022
      • 01 小城新貌
      • 02 原神满级纪念
    • 2023
      • 01 2022 逆旅
      • 02 半透明背景图实现
      • 03 新年攒台海景房
  • 前端
    • JavaScript
      • 01 JavaScript 秘密花园
      • 02 JavaScript 正则技巧
      • 03 从浏览器解析 JS 运行机制
      • 04 Canvas 基础用法
      • 05 Blob Url And Data Url
      • 06 函数节流与函数防抖
      • 07 排序算法初探
      • 08 洗牌算法实现数组乱序
      • 09 正则匹配 match 和 exec
      • 10 正则匹配汉字
      • 11 JSX.Element vs ReactElement
      • 12 可选链与空值合并
      • 13 TypeScript 编码规范
      • 14 Typescript 中 interface 和 type 区别
      • 15 TypeScript 高级类型
      • 16 TypeScript 关键字
      • 17 TypeScript 映射类型
    • CSS
      • 01 Flex 弹性布局
      • 02 Position 定位
      • 03 CSS 逻辑属性
    • Node
      • 01 Node Tips
      • 02 七天学会 NodeJS
    • Note
      • 01 Note
      • 02 Code
      • 03 Snippets
      • 04 Git
    • React
      • 01 React Props Children 传值
      • 02 Use a Render Prop!
      • 03 React Hook
      • 04 React Hook 定时器
      • 05 Fetch data with React Hooks
      • 06 React 和 Vue 中 key 的作用
      • 07 useCallback 的正确使用方式
      • 08 useLayoutEffect 和 useEffect 的区别
      • 09 forwardRef 逃生舱
      • 10 React 条件渲染
    • Vue
      • 01 Vue Tips
      • 02 Vue 构建项目写入配置文件
      • 03 Vue 项目引入 SVG 图标
      • 04 Vue 一键导出 PDF
      • 05 动态可响应对象
      • 06 Vue 引入 SCSS
      • 07 Vue 路由权限控制
    • 实战系列
      • 01 WebSocket 心跳重连机制
      • 02 图片加解密二三事
      • 03 优雅实现 BackTop
      • 04 动态加载 JS 文件
      • 05 常用 DOM 方法比较
      • 06 AbortController 中断 fetch
      • 07 计算字符所占字节数
      • 08 Axios 自定义返回值类型
  • 后端
    • Java
      • 01 面向对象基本特征与原则
      • 02 Java 数据类型
      • 03 Java String
      • 04 Java 只有值传递
      • 05 Java final 与 static
      • 06 Java Object 通用方法
      • 07 Java 继承
      • 08 Java 反射
      • 09 Java 异常
      • 10 Java 容器
      • 11 Java 虚拟机
      • 12 Java IO
      • 13 Java HashMap
      • 14 Java List
      • 15 Java Stream
      • 16 Java 枚举
      • 17 Java 日期与时间
      • 18 Java fail fast
      • 19 Java BiFunction 和 BinaryOperator
    • 并发编程
      • 01 Java 并发
      • 02 synchronized
      • 03 volatile
      • 04 ReentrantLock
      • 05 ReadWriteLock
      • 06 StampedLock
      • 07 CompletableFuture
      • 08 ForkJoin
      • 09 ThreadLocal
      • 10 CountDownLatch
      • 11 ThreadPoolExecutor
      • 12 ExecutorService
      • 13 Atom 原子类
      • 14 BlockingQueue
    • 高效编程
      • 01 30 seconds of java8
      • 02 函数式替代 for 循环
      • 03 Java 字符串拼接
      • 04 单例模式的几种实现
      • 05 HashMap 排序
    • 理论概念
      • 01 Java Servlet
      • 02 Java 服务端分层模型
      • 03 经典排序算法
      • 04 LRU 缓存淘汰算法
      • 05 BloomFilter 判断元素存在
      • 06 Java HashMap 面试大全
      • 07 HTTP 状态码详解
      • 08 Cookie 和 Session
      • 09 基于消息队列的分布式事务解决方案
      • 10 微服务之所见
    • 实战系列
      • 01 AES CBC 加解密
      • 02 Magic 魔数获取文件类型
      • 03 获取请求 IP 地址
      • 04 Kaptcha 与数学公式验证码
      • 05 Netty 获取客户端 IP.md
      • 06 高性能无锁队列 Disruptor.md
      • 07 前后端接入阿里云盾
    • Linux
      • 01 Linux 文件权限系统
      • 02 Linux 常用软件安装
      • 03 CentOS 防火墙
    • MySQL
      • 01 MySQL
      • 02 SQL 语句 where 1=1
      • 03 truncate 和 delete
      • 04 事务
      • 05 关系模型
      • 06 Mybatis
      • 07 MySQL 查看数据库表详情
    • Nginx
      • 01 Nginx 指北
      • 02 nginx gzip 压缩
    • Note
      • 01 Vagrant
      • 02 Docker
      • 03 Lombok
      • 04 Swagger
      • 05 Redis
    • Spring
      • 01 Spring Boot
      • 02 Spring Validation
      • 03 Spring Data
      • 04 Spring 容器
      • 05 Spring AOP
      • 06 Spring Transactional 注解
      • 07 Spring Cloud Netflix
      • 08 Spring Cloud Alibaba
      • 09 Spring Security oAuth2
      • 10 Spring Boot 跨域解决方式
      • 11 Spring Boot 请求拦截
      • 12 Spring Boot 异步编程
      • 13 Spring Boot 定时任务
      • 14 Spring Boot 管理 bean
      • 15 Mybatis 逆向代码生成
      • 16 JWT
      • 17 JPA
      • 18 Apache Shiro
      • 19 Spring 异步请求
  • 书斋
    • ES6 标准入门
      • 01 变量声明与解构赋值
      • 02 语法的扩展
      • 03 数据类型与数据结构
      • 04 Proxy 和 Reflect
      • 05 异步编程 Promise
      • 06 Iterator 和 for of 循环
      • 07 Generator 函数
      • 08 Async 函数
      • 09 Class 类
    • JavaScript 设计模式
      • 01 基础知识
      • 02 设计模式(上)
      • 03 设计模式(下)
      • 04 设计原则和编程技巧
  • 纸函
    • 01 Interview
    • 02 Ceph
    • 03 动态规划
    • 04 Document.designMode
    • 2023-01-10
  • 万藏
    • 文档
      • 01 Git 文档
      • 02 Linux 命令大全
      • 03 七天学会 NodeJS
      • 04 Algorithms
    • 工具
      • 01 Nginx Config
      • 02 ProcessOn
      • 03 Flat Icon
      • 04 Regexper
      • 05 TempMail
      • 06 Carbon
由 GitBook 提供支持
在本页
  • github 图床
  • jsDelivr 加速
  • 全站 jsDelivr 托管

这有帮助吗?

  1. 時雨
  2. 2019

11 jsDelivr 全站托管

上一页10 Aurora 2.0下一页12 两年工作台变迁史

最后更新于1年前

这有帮助吗?

可能是自己消息闭塞,近日才知道 jsDelivr 可以访问 github 仓库资源,并通过 CDN 缓存方式加速国内的访问。于是查阅资料略加研究,决定将全站进行 jsDelivr 托管。

github 图床

现在使用 github pages 服务来托管静态博客已是屡见不鲜,更甚者使用 github 仓库来搭建图床也是可行。之前自己用过的几款外链图床如 coding 图床、SMMS 图床都有些许问题。coding 图床启用了防盗链后无法访问且无法快捷上传图片,SMMS 图床上传的图片间歇性莫名其妙 404。

综于以上原因,迫于对稳定的考量,后来使用 github 仓库作为外链图床,本着 github 全家桶的思想,一条龙服务不也挺好的嘛。

当然 github 图床也面临两个问题,一是仓库大小容量有 1G 限制;二是国内访问速度堪忧。

第一个问题很好解决,虽然一个仓库大小有限制,但是可以通过创建多个仓库的方式来解决容量问题,而且即使一个仓库 1G 容量对于小博客其实也足够使用了。

第二个问题就比较难办,由于种种原因,github 在国内访问速度受限,加载速度堪忧,用作图床更是细流难以解渴。

jsDelivr 加速

通过开源 CDN 服务 jsDelivr 引用一些静态资源可以加快网站加载速度,但鲜有人知的是,jsDelivr 还可以直接访问 github 上的资源。自听闻这种技巧之后,便查阅官方资料,犹如久旱逢甘霖,立马着手将整个博客进行 jsDelivr CDN 加速。

jsDelivr 提供 npm,GitHub,WordPress 等项目的镜像。由于我只使用 Github 来托管文件,所以只对这种方式做说明。

使用 github 做图床,我们可以通过 或者 chrome 插件 来上传图片到图片仓库。举个栗子,这里我上传图片到名为 poi 的 github 仓库中,上传成功后图片访问地址类似如下格式:

/IMAGES/1.jpg

如果你有绑定自有域名,也可以通过绑定域名来访问:

https://chanshiyu.com/yoi/2019/1.jpg

然后便可以使用 jsDelivr CDN 加速访问图片,格式如下:

https://cdn.jsdelivr.net/gh/user/repo@version/file

具体到上传的这张图片地址便是:

https://cdn.jsdelivr.net/gh/chanshiyucx/yoi/2019/1.jpg

泪,一下子就流了下来 இ௰இ

全站 jsDelivr 托管

根据上述方式将博客图片资源进行 jsDelivr 托管之后,琢磨了一下,除了图片资源外,为什么不把全站资源包括 js、css 等文件都进行 CDN 加速呢,于是手动改造了 Aurora,除了 index.html 外,其他全部引用资源文件走 CDN 加速。

博客文件托管只需将修改 vue.config.js 中静态资源路径配置即可,将其修改为你的博客 pages 仓库,然后重新打包部署,全站 CDN 加速岂不美哉。

module.exports = {
  publicPath:
    process.env.NODE_ENV === "production"
      ? `//cdn.jsdelivr.net/gh/chanshiyucx/chanshiyucx.github.io/`
      : "/",
}

Just enjoy it! 😃

参考文档:

PicGo
Picee
Jsdelivr Features