1 什么是CDN?

CDN(Content Delivery Network,即内容分发网络),是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。而jsDelivr是一个免费、开放原始码的公有 CDN 服务,总的来说,jsDelivr + GitHub是免费且好用的CDN服务,非常适合博客网站使用。

2 创建cdn-assets仓库

登陆你的GitHub,创建一个名为cdn-assets公有仓库用于存放你的静态资源文件。

IQl75DGzUwhXtoJ

复制红框中的仓库地址,然后克隆到本地:

IQl75DGzUwhXtoJ

i2Jt5wgfre1hUFj

3 提交并推送到GitHub

在本地文件夹cdn-assets中添加你的静态资源文件,然后提交并推送到GitHub:

1
2
3
4
5
6
# 添加文件
git add .
# 提交文件
git commit -m "add cdn source files."
# 推送到远程仓库
git push origin master

RolDteAfWsUTCzy

4 发布cdn-assets版本

点击Create a new release,创建一个cdn-assets的发布版本:

8S6KcLkfHqQstI9

点击Punlish release进行发布:

cuamzEKbwksPMSW

5 访问静态资源

  1. 获取指定版本的资源

    1
    https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名@版本号/文件路径

    以访问emoji表情包为例:

    1
    https://cdn.jsdelivr.net/gh/GentleTK/cdn-assets@1.0.0/emoji/qq/qq-105.gif
  2. 获取最新版本的资源

    @latest也可不加,同样表示获取最新版本的资源。

    1
    https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名@latest/文件路径

    以访问emoji表情包为例:

    1
    https://cdn.jsdelivr.net/gh/GentleTK/cdn-assets@latest/emoji/qq/qq-105.gif