使用jsdelivr+github白嫖静态资源CDN
github准备
鉴于某些JR,禁止第三方请求静态资源,导致网站炸了,经过研究,发现可以使用jsdelivr+github白嫖CDN的方法,特此做个记录。
jsDelivr + GitHub/npm具体优点是:
1、无流量限制,通过 GitHub 仓库托管文件,使用 jsDelivr CDN 加速;
2、 全球 CDN,国内访问速度也不错;
3、使用方式:将资源上传到 GitHub,然后通过 jsDelivr 引用。
在 GitHub 上创建一个新的仓库:
- 登录 GitHub
- 点击右上角的 "+" 按钮,选择 "New repository"
- 填写仓库名称(比如 wuwork-static )
- 选择公开(Public)
- 创建仓库
在本地初始化 Git 仓库并提交文件:
git init
git add .
git commit -m "Initial commit"
将本地仓库与远程 GitHub 仓库关联并推送:
git remote add origin https://github.com/你的用户名/仓库名称.git
我这里是:
git remote add origin https://github.com/634174214/wuwork-static.git
这里如果:
D:\wuwork-site>git remote add origin https://github.com/634174214/wuwork-static.git
error: remote origin already exists.
这是代表已经链接到了一个远程仓库,需要先断开:
// 首先查看当前远程仓库的配置:
git remote -v
//如果显示的远程仓库地址不是你想要的,你可以先删除现有的 origin,然后重新添加:
git remote remove origin
// 再重新添加
git remote add origin https://github.com/634174214/wuwork-static.git
推送代码
git push -u origin main
如果这是第一次推送,系统可能会要求你输入 GitHub 的用户名和密码(或者个人访问令牌 Personal Access Token)。 我是通过浏览器进行验证的。
D:\wuwork-site>git push -u origin main
error: src refspec main does not match any
error: failed to push some refs to 'https://github.com/634174214/wuwork-static.git'
这个报错意味着我仓库中当前没有main分支,这通常是因为你还没有进行第一次提交或者你的主分支名称可能是 master 而不是 main 。
首先查看当前分支:
git branch
// 如果没有看到任何分支,或者当前是 master 分支,我们需要先添加文件并提交:
git add .
git commit -m "Initial commit"
// 如果你的主分支是 master ,我们可以直接推送 master 分支:
git push -u origin master
// 或者,(推荐)如果你想要使用 main 作为主分支名(这是 GitHub 的默认设置),可以这样操作:
git branch -M main
// 然后再推送:
git push -u origin main
GitHub 现在默认使用 main 作为主分支。
中途我发现原目录太大,想要使用子目录关联远程仓库
进入子目录:cd d:\wuwork-site\github-online (原来是wuwork-site)
初始化新子目录的 Git 仓库:git init
添加远程仓库(如果已存在,需要先删除):
git remote remove origin
git remote add origin https://github.com/634174214/wuwork-static.git
添加并提交文件:
git add .
git commit -m "Initial commit: optimized static files"
创建并切换到 main 分支:
git branch -M main
强制推送到远程仓库(这会覆盖远程仓库的内容):
git push -f origin main
jsdelivr
github仓库成功创建后,就可以直接使用jsdelivr进行引用了。jsDelivr 的引用格式为:
https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/文件路径
我这里的:
https://cdn.jsdelivr.net/gh/634174214/wuwork-static@main/文件路径
关于后续文件更新
1、首先,在本地仓库进行更新和添加目录、文件等。添加\修改完成后:
git status
添加所有新文件和修改到暂存区
git add .
提交这些更改:
git commit -m "Update: add new directory and modify files"
推送到 GitHub:
git push origin main
完成这些步骤后,你的更改就会同步到 GitHub 仓库了。然后 jsDelivr 会自动更新缓存(可能需要几分钟时间)。
因为网络原因,我手动向github上传文件
因为我本地修改了文件,然后同步上传之后,有缓存,这时我就另复制了一份,然后使用再上传一份的方法,绕过jsdelivr缓存。
当然如果有代理的话,可以使用代理:git config --global http.proxy http://127.0.0.1:你的代理端口
1. 打开仓库 https://github.com/634174214/wuwork-static
2. 点击"Add file"按钮
3. 选择"Upload files"
4. 可以:
- 直接拖拽文件/文件夹到上传区域
- 或点击"choose your files"选择文件
5. 在下方添加提交信息(Commit message)
6. 点击"Commit changes"完成上传
注意事项:- 网页上传有单个文件大小限制(通常是 25MB)- 如果要上传文件夹,建议先将文件夹压缩后上传- 上传完成后,jsDelivr 的链接使用方式保持不变
但是这样操作之后,需要将线上仓库与本地仓库进行同步。
先获取远程仓库的更新:
git fetch origin main
将远程更改合并到本地:
git pull origin main
操作之后,再检查本地与远程库差异状态
git status
查看本地与远程分支的差异:
git fetch
git diff main origin/main
执行git status 发现报错如下:
D:\wuwork-site\github-online>git status
On branch main
You have unmerged paths.
(fix conflicts and run "git commit")
(use "git merge --abort" to abort the merge)
Unmerged paths:
(use "git add <file>..." to mark resolution)
both added: backend/js/require-jsdelivr.config.js
no changes added to commit (use "git add" and/or "git commit -a")
这个提示表明你遇到了合并冲突(Merge Conflict)。具体来说, backend/js/require-jsdelivr.config.js 这个文件在本地和远程都有修改,Git 无法自动合并。
查看冲突内容并选择以哪个版本为准进行合并
首先,可以查看文件中的冲突内容:
git diff backend/js/require-jsdelivr.config.js
然后,按 q 键退出查看
使用远程版本:
git checkout --theirs backend/js/require-jsdelivr.config.js
使用本地版本:
git checkout --ours backend/js/require-jsdelivr.config.js
或者直接放弃这次合并:
git merge --abort
比如我这里使用远程库版本,执行之后,还需要再执行下面的步骤:
将解决的文件添加到暂存区:
git add backend/js/require-jsdelivr.config.js
git commit -m "resolve conflict: use remote version"
完成后可以再次检查状态:
git status
如果提示:
nothing to commit, working tree clean,表明本地工作目录是干净的(没有未提交的修改),并且本地仓库与远程仓库是同步的。
甚至还能双重确认:
git fetch
git status
jsdelivr清空缓存
当我们修改文件之后,会发现jsdelivr不会立即生效,这是因为有缓存的原因。并且缓存一般需要24小时才能刷新,如果着急的话,可以使用上面说的方法,重新上传一份文件。但是jsdelivr也提供了刷新地址缓存的办法:
访问:https://www.jsdelivr.com/tools/purge
使用该地址必须使用梯子,否则无法应用。因为其需要谷歌验证。
在Input框中输入要刷新的地址即可。