使用jsDelivr和GitHub,上传本地静态资源到免费CDN

简介: 本文介绍了一种将本地图片和静态资源(如 js、css、文档等)上传至免费CDN的方法,便于随时调用。具体步骤包括:在GitHub创建仓库`resources`存放资源;通过上传或Git命令同步文件;在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效,适合开发者快速部署和共享静态内容。

目标:将本地图片资源上传到免费CDN,以便随时使用!其他静态资源亦可,例如:js、css、pdf、word、excel 等等

①在github上创建新仓库:resources,用于存放要上传到 CDN 的静态资源:

c1c3b80f0273ccbb35620ccfe56f39e9.png

②上传图片到新仓库:resources 中:

  • 可以在 github 使用 Upload files 上传文件:

273c4e6069c420b9b1febc143d07df61.png

  • 也可以先将仓库克隆到本地:
git clone git@github.com:themusecatcher/resources.git

进入本地仓库:

cd resources/

将需要上传的图片复制到 resources/ 目录中,然后 push 到远程仓库:

git add .
git commit -m 'upload'
git push

③进入 github 仓库的 Code 页面,点击页面右侧的 Releases:

694d11ce5d01a57af4ac39147456b2df.png

④ Draft a new release:

8344196d133518b6791af9fe61f73c56.png

新建一个 tag 例如:0.0.3

39a1145b91e6bfabc54e161d431414e6.png

⑤点击 Publish release 进行发布

然后即可使用如下规则访问 CDN 资源:

https://cdn.jsdelivr.net/gh/<username>/<repo name>@<tag>/<resource name>

例如:https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/bao.jpg

⑥查看 CDN 资源目录:

https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/

df8fc2b5cbe987e67d71afd6f24621fb.png

相关文章
|
9月前
|
缓存 前端开发 JavaScript
通过jsDelivr实现Github图床CDN加速
jsdelivr是一个免费的公共CDN(内容分发网络)服务,它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上,并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间,提高网页加载速度,同时减轻原始服务器的负载。
488 1
|
9月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
323 3
|
3月前
|
缓存 监控 网络安全
使用CDN部署静态资源有哪些优势和注意事项
使用CDN部署静态资源能显著加速内容传递、减轻源服务器负载、提高可用性和容错性、节省带宽成本。但需选择合适的CDN提供商,合理配置缓存规则,确保安全性,监控性能,优化策略,避免缓存污染和处理资源版本问题,以实现最优效果。
133 4
|
4月前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
68 2
|
4月前
|
缓存 监控 网络安全
使用CDN部署静态资源有哪些优势和注意事项?
使用CDN部署静态资源有哪些优势和注意事项?
|
5月前
|
缓存 监控 网络安全
CDN部署静态资源有哪些优势和注意事项
CDN部署静态资源有哪些优势和注意事项
|
8月前
|
存储 前端开发 对象存储
基于jsDelivr+Github给网站如何换个漂亮的字体。
本文介绍了如何为博客自定义字体。首先,从免费字体网站(如100字体下载站)下载字体,然后使用在线工具(如fontformat.com)转换字体格式为eot, woff, woff2, svg和ttf。接着,将字体文件上传至GitHub仓库,利用jsDelivr+GitHub的CDN服务获取文件链接。最后,通过编写@font-face的CSS样式代码,将自定义字体应用到博客中。注意文件名避免使用中文,并确保所有浏览器兼容。
87 2
|
8月前
|
弹性计算 Serverless API
Serverless 应用引擎产品使用合集之如何设置静态资源的CDN
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
缓存 边缘计算 网络协议
CDN永远的神!成功解决了困惑我多年的GitHub访问太慢问题
我写技术文章画的图片是保存到 GitHub 的,没别的原因,就是因为免费,但是GitHub 访问的速度大家都懂的,访问的速度很慢。 所以我会用 CDN 来加速图片的访问,也就是我的图床的方案是 GitHub + jsdelivr CDN,使用很简单,只需要把域名地址替换一下就行。
|
域名解析 缓存 负载均衡
如何使用jsDelivr+Github 实现免费CDN加速?
如何使用jsDelivr+Github 实现免费CDN加速?
702 0
如何使用jsDelivr+Github 实现免费CDN加速?