Mr丶冷文

文章 分类 评论
125 10 8352

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

利用jsdelivr创建免费的CDN

MR丶冷文 2021-11-21 1701 1条评论 网站相关 jsDelivrcdn

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

jsDelivr

首先对于cdn相信大家都不会陌生,国内外也有不少云服务提供付费的cdn服务,但对于我们这些开发者而言确实是有些不划算,所以今天就给大家介绍使用jsDelivr来构建我们的cdn

jsDelivr是一个免费、开放原始码的公有 CDN 服务,托管了许多大大小小的 JavaScript、CSS 等 libraries,它将重心放在更快速的网路连线,利用 CDN 技术来确保每个地区的使用者都能获得最好的连线速度,依据 jsDelivr 的官网说明,它们也是首个「打通中国大陆与海外的免费 CDN 服务」,网页开发者无须担心GFW问题而影响连线

使用

jsDelivr提供npm,GitHub,WordPress等诸多开源镜像,我们就以我们最为熟悉的GitHub来说明如何构建我们的CDN

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/fe51028d275b42b1a64349975a79a44d.png

首先我们需要在Github(传送门)申请账号,不过我相信大部分人都已有了Github账号,没有的直接去Github上申请一个即可

在Github上创建一个公开的仓库

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/9f4498f9a583436cb2b17664b750e48e.png

按照提示将本地仓库与远程仓库关联,做这一步是为了方便我们直接使用git命令上传代码,不然得在Github点击上传然后手动选择文件

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/0baee650d61e4bb98eec0d0a0ae8d9cf.png

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/c188181047eb48d3b9ca743b42d6964d.png

我们在本地仓库创建css文件夹,在css夹下创建名为style.css的文件,内容如下(内容无任何意思,只为演示):

#setting-selector {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
}
#setting-selector ul li a.current {
    font-weight: 900;
    color: #FE445C;
}

#setting-selector ul li a:hover {
    background-color: #F2F6FB;
}

#custom-fields .custom-item p {
    padding: 10px;
    background-color: #F5F5F5;
    color: #797979;
    font-size: 12px;
    width: 80%;
    border-radius: 5px;
}

#custom-fields .custom-item .custom-desc {
    margin-left: 100px;
}

我们继续创建js文件夹,在js文件夹下创建名为script.js的文件,内容如下(内容无任何意思,只为演示):

$(function () {
        $(window).scroll(function () {
            //滚动高度
            let scTop = $(window).scrollTop()
            //屏幕高度
            let height = $(window).height()
            if (scTop >= height * 0.5) {
                //利用jquery动画组件显示
                $("#top-btn").stop().animate({'opacity': '1'}, 500)
            } else {
                $("#top-btn").stop().animate({'opacity': '0'}, 500)
            }
        })
        $("#top-btn").on('click', function () {
            $('body,html').stop().animate({
                scrollTop: 0
            })
        })

        let rightItem = $("#right-tool-bar .right-tool-item");

        function hidenRight(animate) {
            for (let i = 0; i < rightItem.length; i++) {
                console.log(rightItem[i])
                let item = $(rightItem[i]);
                if (animate)
                    item.animate({marginLeft: 0}, 50)
                else
                    item.css('margin-left', 0)
            }
        }

        $("#right-color .set-color-btn").on('click', function () {
            $.ajax({
                url: "/?freeAction=color&colorName=" + $(this).data('color'),
                type: 'post',
                dataType: 'json',
                success: res => {
                    if (res['success']) {
                        layer.msg('更换配色成功', {icon: 1, time: 500}, function () {
                            location.reload();
                        })
                    }
                }
            })
        })
    }
)

此时我们的目录结构应该是这样的

.
|____css
| |____style.css
|____js
| |____script.js

接下来使用如下命令提交并上传到Github

git add -A
git commit -m "cdn测试"
git push origin master

如果遇到如下情况则需要将ssh的公钥上传至Github,可以参考Github官方文档:connecting-to-github-with-ssh

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/b61137b7b3b14aceb366900fbe7f7405.png

此时我们的Github中已经有我们刚刚创建的代码了,然后点击create a new releases创建一个新的release

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/8afc2c90440a443fa828863f41ed6b62.png

填写对应的信息,然后点发布

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/95f29805db044e1bac72c2fb90ab9c8a.png

可以看到我们已经发布成功了

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/1bf11f797667431c9ef06ba3c8881bc2.png

此时我们可以通过如下url访问我们的文件

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

如:https://cdn.jsdelivr.net/gh/kevinlu98/cdntest@1.0/css/style.css,可以看到我们的cdn已经创建好了

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/1647dd7aba95466abe9bca772e4e12fd.png

不仅如此,我们还可以访问压缩版的,如:https://cdn.jsdelivr.net/gh/kevinlu98/cdntest@1.0/css/style.min.css,jsDelivr会自动帮我们压缩

https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/2053/ad8ecfa126924bf4aa873bfe1d4648f4.png

结束

大家有需要的话快去试试吧

评论(1)

  1. Dhucr 游客 2021-11-21 16:37 回复

    感谢大佬的教程,很清楚很详细

热门文章

最新评论

  • 一颗红星照四方

    希望大佬继续开发

  • 单纯的男孩

    下载看看

  • dong

    看看看看

  • 唯黄昏而思烛明

    下载看看

  • 会飞的排骨

    看看就看看

日历

2024年10月

  12345
6789101112
13141516171819
20212223242526
2728293031  

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭