Jsdelivr
Jsdelivr是一个免费的CDN加速服务，支持GitHub、npm、WordPress等多种平台的静态资源加速分发，境外速度非常快。但国内被封了。不过问题不大有镜像源。
Jsdelivr有一个特殊的地方是，它可以直接访问GitHub仓库的静态资源，这点就很方便了，你把你的网页上传到你的仓库里，就啥都不用管了，无需注册额外账号啥的。
它的访问格式是这样的：
https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/路径
如，我的博客项目地址是Chzxxuanzheng/The-World-Of-Lee，在master分支的public/avatar.png目录下是我的头像，那么我就可以通过下面的地址访问到这个头像：https://cdn.jsdelivr.net/gh/Chzxxuanzheng/The-World-Of-Lee@master/public/avatar.png。
好了，使用Jsdelivr的方法说过了，下面说镜像源的问题。起初我也不知道Jsdelivr是有镜像源的。后来是看了AirTouch的博客才知道的。
jsDelivr国内公益加速镜像分享该博客共列举了四个镜像源：
| 地址 | 介绍 |
|---|---|
| cdn.iocdn.cc | 括彩云国内CDN提供支持 |
| s4.zstatic.net | 多个云服务融合国内CDN提供支持 |
| cdn.jsdmirror.com | 多个云服务融合国内CDN提供支持 |
| jsdelivr.topthink.com | 阿里云CDN提供支持（无主页链接） |
我的博客采用的是cdn.jsdmirror.com镜像源。你可以把上面的cdn.jsdelivr.net替换成cdn.jsdmirror.com即可。上述的例子改成：https://cdn.jsdmirror.com/gh/Chzxxuanzheng/The-World-Of-Lee@master/public/avatar.png。
GitHub Pages 构建
GitHub Pages这东西大家都不陌生了，现在GitHub Pages已经可以做到actions跑完自动创建pages了，没有任何残留。但是Jsdelivr需要访问仓库的静态资源，无残留就不太符合我们的要求了。所以我们采用JamesIves/github-pages-deploy-action@v4这个action来实现自动化部署。使用方法如下
steps:
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: 分支名称
folder: 构建产物目录
我们可以通过将构建产物上传到pages分支，然后再在GitHub Pages设置里将来源设置为来自pages分支即可。这时候就可以通过Jsdelivr访问到我们的静态资源了。如，我的头像编译后在avatar.png，那么我就可以通过下面的地址访问到这个头像：https://cdn.jsdmirror.com/gh/Chzxxuanzheng/The-World-Of-Lee@pages/avatar.png。
Vite 相关设置
vite有个base选项，可以设置资源的基础路径。编译结束后，所有路径都会以该路径开头。所以我们可以通过设置base来实现让资源路径指向Jsdelivr的连接。在vite.config.ts里这样设置：
import { defineConfig } from 'vite'
const env = process.env
// https://vite.dev/config/
export default defineConfig({
base: env.VITE_CDN_BASE || './',
})
这样做编译时，我们只需要设置环境变量VITE_CDN_BASE为https://cdn.jsdmirror.com/gh/用户名/仓库名@分支名/路径/即可。
结尾
通过上面的设置，我们就可以实现一个完全免费的静态网站CDN加速服务了。GitHub Pages负责构建和托管静态网站，Jsdelivr负责加速分发静态资源。唯一美中不足的是用户要先去GitHub拿到HTML才能享受到Jsdelivr的加速服务。而且GitHub本身就被半墙了，在国内体验并不好。
附录：完整CI配置文件
name: 编译部署
on:
push:
branches:
- master
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
permissions:
contents: write
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: 设置 Nodejs
uses: actions/setup-node@v4
with:
node-version: 20.x
- name: 拉取分支
uses: actions/checkout@v4
- name: 缓存依赖
uses: actions/cache@v4
with:
# 缓存 yarn/npm/pnpm 以及 node_modules，适配 Yarn v1/v2+ 和 pnpm
path: |
~/.cache/yarn
.yarn/cache
~/.npm
node_modules
yarn.lock
key: page
- name: 更新依赖
run: yarn
- name: 设置环境变量
run: |
echo VITE_CDN_BASE=https://cdn.jsdmirror.com/gh/chzxxuanzheng/The-World-Of-Lee@pages/ >> $GITHUB_ENV
- name: 构建
run: yarn build
- name: 配置 Pages 环境
uses: actions/configure-pages@v5
- name: 上传构建产物
uses: actions/upload-pages-artifact@v3
with:
path: './dist'
- name: 部署到 GitHub Pages
id: deployment
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: pages
folder: dist