Github 部署 | CDN 加速网页，速度嗖嗖的快！

前两篇文章给大家分享了 如何在 Github 部署网页 以及 给网页上自定义域名 ，相信很多人就算不看我这两篇分享，也能部署自定义域名的 Github 网页。然而，很快又会被 Github 那拉跨的网速劝退。

我在 Github 上随便找了个 http://blesstosam.github.io/ 的网页测了一下速度，好家伙，大半个中国都访问不了， 点击这里查看详情 。

全是红色，吓死个人儿。再给大家看看上了 CDN 的速度如何：

虽然有的时候访问还不太行，但是整体情况比上面 彳亍 了不少。

由于 Github 服务器在国外，本来信息传递就很慢，再加上某些原因，有的时候甚至连打开都费劲。

那用国外 CDN 如何呢？Emmm，我去 AWS 搞了一下，说实话没太搞懂，而且现在账号都没怎么用了，还处于欠费还钱的状态。。。

我自己刚接触国内 CDN 的时候发现：

什...么？使用国内 CDN 只能给国内域名使用？

什...么？买了国内的域名还要备案？

什...么？备案前还要先租 3 个月的服务器？

草（一种植物），我 TMD 还没开始配置呢，就得花 200 租个服务器？怕我自己不是个憨憨，白嫖失败。

不过，最近发现腾讯云上也可以给国外的域名上 CDN 了，就来分享一波吧。

开始前，希望 xdm 准备好以下东西：

简单过一下 CDN 的原理，CDN 原名叫 内容分发网络 。

为啥叫 内容分发 呢？如果一个快递从黑龙江送到海南，大概需要 45 个小时。

京东 的思路就不一样了：我先把大量的货物都放到海南的一个仓库里，当有人下单后，可以直接从海南的小仓库直接发货，这就能大大减少交货时间，整个框架就是 内容分发网络 。

从上面可以看出 CDN 两大特点：

不知道大家有没有想到这个问题：如果 CDN 做了缓存，那么，就算我发布新版本，CDN 缓存还是旧的文件，用户依然只能看到旧页面。

事实上，无论是 React 还是 Vue 项目，在打包之后，都会将 js，css 的文件名存为 [contenthash].js 和 [contenthash].css ，其中， contenthash 就是整个文件内容的 hash 值。

只要文件内容一变，那么 contenthash 值就会变，会在 CDN 上新上传一份 css 或 js 文件，而且 index.html 引用的 css 和 js 资源路径也会跟着变，这就解决了每次发布都不能覆盖上个版本的问题了。

可能有人的又会问了： “ contenthash 值一样，不怕文件被覆盖么？” 。 contenthash 值一样说明了文件的内容是一样的，就算被覆盖了也是被同样的内容覆盖，所以文件覆盖不是问题。

还会有人问： “如果我的文件改一个字，就发布一次，每次发布都会发一个新 js 或 css 文件，那 CDN 上的资源不是会变得越来越多？” 。确实会有这个问题，不过 CDN 的资源空间理论上是无限的，而且 js 和 css 一般不会占很大空间，你也不能一天发 100 个版本吧？就算存储空间不足，让运维去扩充空间就好了。

这里要注意：不能把 index.html 打包成 [contenthash].html ，因为 Github 要求我们分支上的 html 文件只能叫 index.html ，而同名文件放在 CDN 上又会有上面缓存不更新的问题，所以只有 css 和 js 等静态资源是需要 CDN 缓存的，而 html 是不能缓存的。

总的来说，我们的架构要从这样：

变成这样：

在 DNS 到 Github 之间多了个 CDN 服务器。

首先， 点击： https://console.cloud.tencent.com/cdn 进入 CDN（内容分发网络） 的控制台。

点击 域名管理 ->添加域名 。

然后在 域名配置 选 中国境外 ，填上你的域名，然后选择 静态加速 。

其实 CDN 只是个中间商，本质上是作为中间站转发，所以这里要配置源站的 IP 地址，也就是缓存的 html, css, js 要从哪里获取。因为我们是将网页部署在 Github 上的，所以这里要填入 Github 提供的 4 个 A 记录。

这里不要选择 HTTPS，因为如果使用了 CDN 回源访问之后，Github 自己是检测不出来的，然后也不会给你自动配置 HTTPS，所以千万不要选 HTTPS！通过 HTTP 才能正常回源访问 Github 源网站。

还记得我们刚说不要把 index.html 也缓存了么，不然部署后看到还是上一个版本的 html。所以，在服务配置里的 缓存行为-不缓存 里添加 html 的后缀。

同时，你还可以选择 节点缓存 和 浏览器缓存 ：

浏览器缓存 好处是可以节省 CDN 上的流量（对，流量也是要钱的，虽然不多），坏处也很明显，万万万一你要真的进行内容刷新，那么用户访问的有可能还是以前的版本。

这里大家按自己的情况来选择就好了，我这里只加了节点 2 天的缓存就够了。

最后点击提交。

给个人网页上 HTTPS 是很有必要的，不然别人进你的网页，浏览器还弹出 “您访问的网站不安全” 就显得有点业余。所以，这一步来给我们的域名上 SSL 证书。

在原来的 内容分发网络控制台 点击 证书管理 创建一个证书。

进入配置页后，先填入你的域名，再选择证书。

相信大部分人刚开始是没有 腾讯云托管证书 的，所以点一下上面的 SSL 证书管理 进入管理页面，再点击申请免费证书（白嫖）：

然后一步步去填内容就好：

注意，在第三步这里，需要验证你的域名合法性，需要在 NameSilo 上添加一条 TXT 记录。

添加后会是这样（你也可以等到下一步配置 NameSilo 时再添加 TXT 记录，然后再继续下面的步骤）：

当验证通过后，就可以给自己的域名颁发证书了。

最后一步，回到 内容分发网络 ，在 配置证书 里绑定刚刚的证书，这样我们的 CDN 也可以拥有 HTTPS 啦。

回到 域名管理 可以发现 CDN 给我们提供了一个 CNAME：

只要将 DNS 的 CNAME 指向 CDN 的 CNAME，那么整条访问链路就被我们串起来了。

打开 NameSilo 的 域名管理页面 ：

进入域名详情页后，在 左上角的 DNS Records 点击 Update （这个配置页面是真的难找啊）：

然后点击 CNAME 添加两个 CNAME 记录， value 处填刚刚从腾讯云获取的 CDN 的 CNAME 。

然后，去买杯咖啡，看看 B 站，等一小时后，前往你的域名看看吧。

总结一下，我们这里做了什么：

相信配置完这一套，你的网站访问速度会比以前快不少。

如果觉得这篇文章能帮到大家，可以点个赞再走咯~

将源站内容分发至全球各地最接近用户的节点（用户可私人定制需求节点），缩短用户到节点的物理距离，使用户可就近取得所需内容，降低延迟，提高用户访问网站的响应速度与网站的可用性，解决因分布、带宽、服务器性能突发、源服务器压力、路由跳转等问题。蓝队云私人定制CDN能显著改善用户体验，更低的延迟，助力企业降低运营成本。

简单来说，当一个网站开启了CDN加速，其给用户的感觉是访问网站速度或者下载东西的速度会明显比没有开启加速更快，变快或者下载东西变快了。

CDN核心目的就是使用户可就近访问网络，取得所需内容，解决网络拥挤的状况，明显提高用户访问网站的响应速度或者用户下载速度。

1、对访客用户的好处

对于用户来说，如果一个网站开启了CDN，用户访问速度或者下载速度会比没有开启时更快。一般目前只要好一些的网站，都会开启CDN功能，主要在于提升用户体验。

2、对网站的好处

对于网站或者站长来自，开启了CDN不仅可以提升网站打开速度，提升用户体验。更重要的是开启CDN可以减少黑客工具和服务器宽带压力。

开启CDN后的网站，不同地区用户访问会是不同的服务器，而网站的真实服务器（源服务器）一般只有CDN节点回去访问获取，全国各地的用户访问的CDN节点服务器，并不直接访问源服务器，这样就可以介绍网站服务器宽带资源，降低服务器压力。

另外，由于有CDN节点中间阻挡防护，可以更好的保护原服务器的安全。也就是说CDN为用户源站服务器在安全云中提供了一个替身，无论是渗透还是DDoS攻击，攻击的目标都将是CDN节点替身，进而保护了网站源站。

1、私人定制 稳定架构： 完美满足用户私人定制CDN需求。监测实时 的网络流量及节点负载情况快速定向用户到 就近的最优缓存节点，使用户尽可能就近取 得所需内容，从而大大加快用户访问网站的 相应速度。

2、精准调度： 部署负载均衡系统节点服务器集群，在现有 互联网技术上构建一层智能的虚拟网络，通 过将内容分发到不同的网络节点，有效保护 源服务器地址，大幅减少单点故障。

3、高效网络： 全球节点部署，建立了覆盖范围广、性能稳 定的网络体系。通过优化用户到网站间路 由，改善Internet网络拥挤状况，压缩传输 内容，减少数据传输，改进TCP传输算法， 提升网站动态内容的网络传输速度，从而达 到动态内容加速的目的。

4、加密传输 保证安全： 支持全网HTTPS加密传输，保障数据安 全，避免遭受内容劫持。

5、缓存加速设置： CDN伺服器内存网页静态资料(如：图片、 影片、文字等)，终端用户与之连接，减省到 网站读取资料的时间，加快浏览体验。

6、保护隐藏真实IP： 通过CDN服务器几个节点转折，可以隐藏真 实IP，减低网页被直接DDOS攻击的机会。

---