在国内,不使用梯子时 github 访问速度很慢,甚至有时候会完全中断,无法充分利用 github 提供的优质仓储。在有了 jsdelivr 后,可以免费为 github 所有仓库做 CDN,连国内都可以极速访问!以下简单说明下采用 GitHub+JsDeliver 加速文件的方法。

关于 Github 仓库可以新建,也可以使用 <用户名>.github.io 这个仓库。这里说明一下,仓库名称要分两种情况:第一种,名称采用 <用户名>.github.io 形式,这种形式最终的访问地址为 用户名>.github.io ;另一种是采用其他名字,这时访问地址为: <用户名>.github.io/仓库名称
假如 <用户名> zxniuniu ,当创建时的仓库名称为 zxniuniu.github.io 时,部署 Github Pages 后最终访问地址即为 https://zxniuniu.github.io ;当创建时的仓库名称为其他的,比如 demos 时,访问地址将为 https://zxniuniu.github.io/demos/文件名称 。另外,请注意仓库一定要是 公开 ,不能是私有。

更新项目,采用 Idea,eclipse,或者直接使用 Github Desktop 更新项目文件。如我上传了 jspdf 中使用的字体 ttf 转 js 格式文件。

使用 jsdelivr 引用

原始文件路径如下:

https://github.com/zxniuniu/demos/blob/main/jspdf/fontconverter/fontconverter.html

访问的文件路径如下,如果为图片,会直接显示图片,此处会直接显示 html 文件内容:

https://cdn.jsdelivr.net/gh/zxniuniu/demos/jspdf/fontconverter/fontconverter.html

Github Pages 页面内容如下:

http://zxniuniu.github.io/demos/jspdf/fontconverter/fontconverter.html

上面的链接为 https://cdn.jsdelivr.net/gh/zxniuniu/demos/jspdf/fontconverter/fontconverter.html,但这并不意味着 jsdelivr 只有这一种引用方式。上面的引用方式为直接引用,当然还有按分支及版本号引用等。

这种方式也就是上面的方式,格式为:https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>/<文件及路径>

例如:https://cdn.jsdelivr.net/gh/zxniuniu/demos/jspdf/fontconverter/fontconverter.html 代表用户名 zxniuniu 下的 demos 仓库中文件夹 jspdf/fontconverter/ 里的 fontconverter.html 文件。

  • 分支及版本号
  • 分支与版本号加到仓库后变,用 @ 符链接。格式为:https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@[分支/版本号]/<文件及路径>

    使用版本号引用的优点在于:这个链接仅停留在发布版本号的时刻,无论仓库如何变化,这个版本号的文件都不会受到影响。同时可以避免 jsdelivr 缓存问题。

    关于缓存问题

    这个问题跟迷一样,根据实测不仅与分支有关系而且与文件名有关系。文件名为 *.min.* 或者是 *.*,也就是带 min 的和不带 min 的。这里我以 index.min.cssindex.css 为例。

    先来看看 index.css

    能否及时更新

    文件是否有限制

  • GitHub 公开仓库大小为 100G,并且可以创建无数个仓库哦!但仓库超过 1G 后会有人工审核仓库内容,如果发现用来做图床 ~~~😏,轻则删库,重则封号。因此为了安全建议在 1G 之前就换个仓库,反正可以创建无数个仓库嘛。
  • Github 单文件上传限制为 100M,但是 jsdelivr 加速的单文件大小为 50M,因此也就意味着要加速的单文件大小限制为 50M。
  • 文件类型方面,基本的图片、视频、静态文件等都可以。
  • 查看仓库文件

    查看仓库文件有大小限制,因此当仓库文件大于 50M 时,就无法通过 jsdelivr 查看了,只能在 GitHub 仓库查看。jsdelivr 查看仓库文件有两种方式:

  • 查看仓库版本号
    格式:https://www.jsdelivr.com/package/gh/+ 用户名 +/+ 仓库名
    例如:https://www.jsdelivr.com/package/gh/zxniuniu/demos
  • 查看仓库文件
    格式 https://cdn.jsdelivr.net/gh/+ 用户名 +/+ 仓库名 +/ 仓库名 [@ 分支]
    例如 仓库名@master,默认为 master 分支,https://cdn.jsdelivr.net/gh/zxniuniu/demos@master/
  • jsDelivr API

    API 地址如下:https://data.jsdelivr.com/v1

    /package/npm/:name 或 /package/gh/:user/:repo
    https://data.jsdelivr.com/v1/package/gh/zxniuniu/demos
    // => {
        "tags": [],
        "versions": [
            "1.0.0"
    
    /package/npm/:name@:version/:structure? 或 /package/gh/:user/:repo@:version/:structure? 
    // 其中:structure: tree or flat; 默认值为tree
    https://data.jsdelivr.com/v1/package/gh/zxniuniu/demos@1.0.0
        "default": null,
        "files": [
                "type": "directory",
                "name": "jspdf",
                "files": [
                        "type": "directory",
                        "name": "fontconverter",
                        "files": [
                                "type": "file",
                                "name": "fontconverter.html",
                                "hash": "GQY2zOPzMHl5LBQPGngKPiIFnQcTlGRAWymjCawb88o=",
                                "time": "2020-11-30T15:00:21.000Z",
                                "size": 3924
                        "type": "file",
                        "name": "jspdf-chinese-export.html",
                        "hash": "QrrKYVre6pPmR2H0IctW5ydJ7i477WjgYeHrFDOaZvI=",
                        "time": "2020-11-30T15:00:21.000Z",
                        "size": 4446
    

    查看版本范围

    /package/resolve/npm/:name@:range 或  /package/resolve/gh/:user/:repo@:range
    https://data.jsdelivr.com/v1/package/resolve/gh/zxniuniu/demos@1
    // =>{
        "version": "1.0.0"
    

    使用情况统计

    /package/npm/:name/stats/:groupBy?/:period? 或 /package/gh/:user/:repo/stats/:groupBy?/:period?
    // groupBy可用值:version or date,默认为version
    // period可用值: day or week or month or year,默认值month
    https://data.jsdelivr.com/v1/package/gh/zxniuniu/demos/stats
    // =>{
    	"rank": null,
    	"total": 0,
    	"versions": {},
    	"commits": {}
    

    更多 API 参见 jsDelivr API

    清理 jsdelivr 缓存

    把链接地址中的 cdn 换成 purge 即可清除指定文件的缓存,但经过测试,这个方法也是有时候好用有时候不好用。如清理 zxniuniu/demos/jspdf/fontconverter/fontconverter.html 文件缓存:

    https://purge.jsdelivr.net/gh/zxniuniu/demos/jspdf/fontconverter/fontconverter.html
    // => {
        "fastly": [
                "status": "ok",
                "id": "20777-1607803511-297900"
                "status": "ok",
                "id": "20774-1607805727-283092"
        "maxcdn": {
            "code": 200
        "cloudflare": true,
        "quantil": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<response><message>success</message></response>"
    

    优雅使用 JsDeliver 加速文件

    一个帮你实时刷新 jsdelivr CDN 缓存的小工具

    解决 jsdelivr 缓存问题的几个办法

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。