尼采般地抒情

公告栏

此网站主题为本人手写主题,主题还在开发中……


作者:尼采般地抒情

站点信息

文章数目:300
已运行时间:
目录
  1. 何为内容分发网络 CDN
  • 方法一:NPM 包+国内镜像
    1. CDN 镜像源
    2. 实现思路
  • 方法二:jsDelivr+GitHub 仓库
    1. GitHub 新建 CDN 仓库
    2. 使用 jsDelivr
  • 尼采般地抒情

    尼采般地抒情

    公告栏

    此网站主题为本人手写主题,主题还在开发中……


    作者:尼采般地抒情

    站点信息

    文章数目:300
    已运行时间:

    构建CDN库.png
    前言:此前一直使用 jsDelivr+GitHub 来构建免费的 CDN 服务,但是在 2121.12.20 左右,jsDelivr 貌似崩了,究其原因是其在国内的备案失效了,导致网宿停止对该域名的服务,之后恢复之后,国内节点也不会像之前一样的解析得快了,具体体现就是网站中涉及 jsDelivr 静态资源 CDN 处打开会有卡顿的访问情况。

    所以本文介绍新一种搭建免费 CDN 的方案:将静态资源发布 NPM 包+国内镜像引用的方式,另一种是之前一直用的 jsDelivr+GitHub 仓库引用的方案。

    何为内容分发网络 CDN

    CDN 的全称是 Content Delivery Network,即内容分发网络。CDN 是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。——百度百科

    通俗来说就是提取外链,同时加速访问的好处。Github 的资源在国内加载速度比较慢,因此需要使用 CDN 加速来优化网站打开速度,jsDelivr + Github 便是免费且好用的 CDN(jsDelivr cdn 半挂状态),非常适合博客网站使用。

    方法一:NPM 包+国内镜像

    原因:

    • 网站引入的静态资源,如 js、css、图片等资源,使用公共的 CDN 库来引入会更好地优化网站速度。
    • 不用 jsDelivr+GitHub 做 CDN 的缘由是,镜像没有 npm 的镜像多
    • jsDelivr cdn 挂了(盲猜薅羊毛导致),备案证书过期,国内速度不再是从前的那般快了

    CDN 镜像源

    https://unpkg.zhimg.com/yuque-hexo-lyrics@1.0.0/config.js

    https://npm.elemecdn.com/yuque-hexo-lyrics@1.0.0/config.js

    • UNPKG(unpkg 镜像用的是 CloudFlare,国内加速效果不好):https://unpkg.com/

    https://unpkg.com/yuque-hexo-lyrics@1.0.0/config.js

    • ……

    实现思路

    将 GitHub 仓库私有化,同时配置 GitHub Actions,如果发布版本/fork/star 等操作,就将其 pulish 到 npm 包

    每次更新 GitHub 仓库之后,需要将 package.json 文件中的 version 字段的值指定,然后才能使用 GitHub Actions 进行自动化部署

    具体使用形式:

    其中,上述链接中的 CDN 链接https://unpkg.zhimg.com/都可以用其他镜像源(unpkg、elemecdn、jsdelivr 等)替换

    方法二:jsDelivr+GitHub 仓库

    GitHub 新建 CDN 仓库

    在本地电脑进行一系列 clone/pull 等一系列操作,同时发布版本(最好上传一次就发布依次版本)

    使用 jsDelivr

    [**https://cdn.jsdelivr.net/gh/wztlink1013/CDN-Volantis@**](https://cdn.jsdelivr.net/gh/wztlink1013/CDN-Volantis@)**版本号/文件夹/文件名.文件后缀**
    举个栗子

    0、具体使用教程

    1、加载任何 Github 发布、提交或分支

    3、使用版本范围而不是特定版本

    4、完全省略该版本以获取最新版本

    5、将“.min”添加到任何 JS/CSS 文件中以获取缩小版本,如果不存在,将为会自动生成

    6、在末尾添加 / 以获取资源目录列表

    评论区

    Beaudar Twikoo

    最新评论

    Loading...