使用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

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

热门文章

最新文章