Hexo博客技巧：利用JsDeliver加速文件

请注意！JsDelive在国内已经失效，可以参考新的利用npm的教程搭建图床： https://aciano.top/posts/npm/ 本教程不再更新！ ————2022.08.22

前言

众所周知，GItHub的服务器是在国外的，曾经还被墙过，那么利用GitHub Pages搭建好的博客后本身就已经够慢了，再加上博客里的图片、css、js等这类文件就更慢了。

那么可能有人会说，我把图片放图床上，css这类文件少写点不就行了。那你又可曾想过万一图床跑路了，你的博客里全是失效图片了呢。

下面就讲一种方法，令你的文件访问不仅速度快，还不用担心它失效。

JsDeliver的优势

  • 免费
  • 稳定
  • 速度快

你不用担心它会跑路，因为你的文件是存储在GitHub上的。

且这是免费的，无上限。

文末会有GitHub与JsDeliver的对比，没有对比就没有伤害，届时你就能看到这两者的速度差别。

准备工作

  1. 一个Github账号
  2. 你的图片等文件
  3. 一个聪明的大脑和勤劳的双手

具体过程

1.创建仓库

进入GitHub且登录后点击右上角加号然后再点击“New repository”

新建一个仓库，名字随意，当然越简洁越好，这里推荐直截了当用“CDN”作仓库名。

新建仓库.png

（这是以前的图，主要是懒得再截了）

！注意：仓库一定要公开，选择Public！！！

接下来是两种方法，任选一操作即可：

接下来是两种方法，任选一操作即可：

接下来是两种方法，任选一操作即可：

2.上传文件

本地环境（方法一）

在你的电脑硬盘上新建一个文件夹，然后将刚建好的仓库克隆到本地 (右键Git Bash)：

1
git clone https://github.com/Amnesia-f/CDN.git ### 这里是你的CDN仓库地址

克隆完成后将需要上传的文件放进文件夹中，执行以下操作：

1
2
3
4
5
6
7
8
# 添加全部内容文件到暂存区
git add .

# 添加说明
git commit -m'第一次提交'

# 提交到远程仓库
git push

第一步add后面有个点，复制的时候不要漏了。

操作完成后你就可以直接跳到第四步了，第三步虽方式和第二步不一样，但结果是一样的。

直接上传（方法二）

新建完仓库后，选择你需要的文件上传到库中即可。

（就是这么简单粗暴）

3.调用文件

直接访问就可以了：https://cdn.jsdelivr.net/gh/你的Github用户名/你的CDN仓库名/文件文件夹/文件

例如：https://cdn.jsdelivr.net/gh/Amnesia-f/CDN@1.0/Test/1.jpg

对比

这是两个链接，存储着一张图片，打开它们就可以看到差距了：（链接来源@Lete乐特）

加载速度是不是后者比Github快？

常见问题

下文皆来源于小康博客：优雅使用 JsDeliver 加速文件

JSD 的链接是什么

JSD 的链接是什么？

在我上图的链接为 https://cdn.jsdelivr.net/gh/sviptzk/Jsd_test/79601805_p0.png，但这并不意味着 JSD 只有这一种引用方式。

  1. 直接引用

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

    例如：https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile2/2020/05/28/911db4c3b95ed896b066b6e9aabae311.png 代表用户名 blogimg 下的 HexoStaticFlle2 仓库中文件夹 /2020/05/28/ 里的 911db4c3b95ed896b066b6e9aabae311.png 文件。

  2. 分支及版本号

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

    分支名 简述 特点
    普通分支 即 GitHub 的分支，可以创建多个。默认为 master 按分支引用，如同按分支开发
    latest 最后一次提交 代表最后一次的提交，即每上传一个新文件，都可以用这个分支引用到。也就是不加版本号的默认情况。
    版本号 即指定版本的内容，需配合版本发布 已发布的版本不会受到仓库内容变化的影响

如何按版本号引用

如何按版本号引用

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

  1. 发布版本

    image-20200528084631488

    image-20200528084647411

    image-20200528084720237

  2. 使用版本号引用

    刚刚发布的版本中只有一个图片，那么即使我在上传一张图片也是无法引用到的。

    例如我在向仓库 push 一张 1.jpg，使用版本号方式引用。

    image-20200528085930130

    image-20200528085944413

关于缓存问题

关于缓存问题

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

先来看看 index.css

分支 首次上传 能否及时更新 缓存天数
master 可以被引用 第一次 push 和第一次修改可以更新 可能 1 天
latest 可以被引用 与 master 分支几乎一致 可能 1 天
版本号 发布版本后引用 发布后及时更新 每个版本独立

image-20200528091044063

image-20200528091150570

在来看看 index.min.css

分支 首次上传 能否及时更新 缓存天数
master 可以被引用 第一次 push 可以更新 可能 1 天
latest 可以被引用 第一次 push 和第一次修改可以更新 可能 1 天
版本号 发布版本后引用 发布后及时更新 每个版本独立

image-20200528091907595

image-20200528092301901

因此总结下的使用方式就是：

  • 图床（不需要修改文件）

    使用 latest 分支或者 master 分支即可。

  • 静态文件仓库（经常改动文件）

    建议使用版本号方式

文件是否有限制

文件是否有限制？

  1. 先说说 GitHub 仓库

    GitHub 公开仓库大小为 100GB，是不是听起来很爽。并且可以创建无数个仓库哦！

    但是这 100GB 我们并不能全用完，甚至每个仓库不能超过 1G。为什么？因为可能被封号。官方的解释是尽量不要传大文件，且仓库超过 1G 后会有人工审核仓库内容，如果发现用来做图床～～～😏。轻则删库，重则封号。因此为了安全建议在 1G 之前就换个仓库，反正可以创建无数个仓库嘛。

  2. 文件大小

    Github 单文件上传为 100M，但是 JSD 加速的单文件大小为 50M。因此也就意味着单文件大小为 50MB。

  3. 文件类型

    基本的图片视频静态文件应该都可以。

查看仓库文件

查看仓库文件

查看仓库文件有大小限制，因此当你的仓库文件大于 50MB 时，就无法通过 JSD 查看了，只能在 GitHub 仓库查看。

JSD 的查看仓库文件有两种方式：

  1. 查看仓库的版本号

    格式：https://www.jsdelivr.com/package/gh/+ 用户名 +/+ 仓库名

    例如：https://www.jsdelivr.com/package/gh/sviptzk/HexoStaticFile

  2. 查看仓库文件

    格式 https://cdn.jsdelivr.net/gh/+ 用户名 +/+ 仓库名 +/ 仓库名 [@分支]

    例如仓库名@master，默认为 master 分支 https://cdn.jsdelivr.net/gh/sviptzk/sviptzk.github.io@master/

利用 CloudFare

这个没有啥难度，因此只提供思路。

  1. 将 GitHub 仓库开启 Pages 服务，并绑定自己的域名

  2. 域名需要在 CloudFare 解析

  3. 接下来就可以用你的域名访问仓库文件了。

    例如：https://cdn.antmoe.com/1.jpg。代表访问仓库根目录下的 1.jpg 文件

    上边只是一个示例，不要试图访问哦！

其他问题

  1. 上传文件后如果不能立即访问到，那么稍等片刻即可。
  2. JSD 最近很不稳定，遇到突然不能打开很正常。

结语

JsDeliver官方网址：https://www.jsdelivr.com/?docs=gh

除常见问题小节外的文章为原创，常见问题小节来源于小康博客：优雅使用 JsDeliver 加速文件

End