关于利用 Github 实现 Jsdelivr 免费 CDN 教程

home 编辑时间 2023/04/03

![](/api/file/getImage?fileId=642a4851da740500130220bf)

## 前言
在研究live2d的时候遇到一个问题
就是js文件大小有140多kb 模型更是动辄1M+
如果放在我的服务器小水管宽带，用户加载会很慢
如果放在OSS用CDN加速，一个月下来流量费又会很高
<br>
无意中在这个说明里学到了解决问题的方法
[https://github.com/stevenjoezhang/live2d-widget](https://github.com/stevenjoezhang/live2d-widget)
<br>
重点是这段

---
Using CDN
要自定义有关内容，可以把这个仓库 Fork 一份，然后把修改后的内容通过 git push 到你的仓库中。这时，使用方法对应地变为
`<script src="https://fastly.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js"></script>`
将此处的 username 替换为你的 GitHub 用户名。为了使 CDN 的内容正常刷新，需要创建新的 git tag 并推送至 GitHub 仓库中，否则此处的 @latest 仍然指向更新前的文件。此外 CDN 本身存在缓存，因此改动可能需要一定的时间生效。相关文档：
[Git Basics - Tagging](https://git-scm.com/book/en/v2/Git-Basics-Tagging)
[Managing releases in a repository](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository)

---

<br>
## 注意
2023/04/10 更新
最近发现本方法有bug
如果涉及到图片类型的素材
会自动301到这个域名 `githubusercontent.com`
这个域名在这边直接访问是访问不了的
所以本文章推荐的方法，目前只能是加载js json等类型文件有效
如果需要加载图片，找不到解决此问题的方案的话
就只能用回oss + cdn

<br>
## 折腾
简单来说就是
提交一个项目到github，包含你需要CDN的文件例如js、css、json
给这个项目新开一个分支，比如1.0.0，提交代码到新分支
就完事了，按照下面的格式，可以拼出CDN引用该文件的URL
支持跨域可以在任何界面引用，速度比小水管快多了。
如果以后需要更新，只需要git提交即可自动更新

格式如下
`https://fastly.jsdelivr.net/gh/用户名/项目名@版本号/文件名`

实战检验一下
首先我提交的项目地址是live2d的demo
[https://github.com/zzzmhcn/live2dDemo](https://github.com/zzzmhcn/live2dDemo)

新开的版本分支是 1.0.0
[https://github.com/zzzmhcn/live2dDemo/tree/1.0.0](https://github.com/zzzmhcn/live2dDemo/tree/1.0.0)

根据上面的格式，用cdn直接加载js文件
[https://fastly.jsdelivr.net/gh/zzzmhcn/live2dDemo@1.0.0/js/live2d.min.js](https://fastly.jsdelivr.net/gh/zzzmhcn/live2dDemo@1.0.0/js/live2d.min.js)

亲测可以秒开

直接照着这个方法，用cdn加载live2d模型试试，这里只写一个最简单的html
```html
<body>
    <canvas id="live2d" width="300" height="300"></canvas>
    
    <script src="https://fastly.jsdelivr.net/gh/zzzmhcn/live2dDemo@1.0.0/js/live2d.min.js"></script>
    <script>
        loadlive2d('live2d', 'https://fastly.jsdelivr.net/gh/zzzmhcn/live2dDemo@1.0.0/model/platelet-3/kesyoban.model.json');
    </script>
</body>
```

线上体验地址
[https://zzzmhcn.gitee.io/live2ddemo/demo.html](https://zzzmhcn.gitee.io/live2ddemo/demo.html)

![效果图](/api/file/getImage?fileId=642b8f42da74050013022227)

亲测最多2秒就能加载出模型！以后其他项目需要模型就可以用这个方法来实现。
如果有时间可以直接写一个自动异步加载的js，只需要引入该js，就全自动引入模型。

## END

送人玫瑰,手留余香