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

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

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

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

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

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

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

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

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

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

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

打开 NameSilo 的 域名管理页面 ：

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

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

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

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

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

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

上次写了一篇给 Gihub Pages 添加自定义域名的文章，之后感觉写得还是偏实践多一点，只做到了受人以鱼。

为了让大家在别的场景下也能搞定自定义域名，比如腾讯云网页部署、Heroku 自定义域名、自定义 CDN 域名。，今天就来写篇更通用的文章来总结一下自定义域名那些事。

如果我们要访问一台电脑上的资源，一般是需要通过 IP 地址来进行访问的。比如电脑上跑了一个 React App，那么在电脑的 http://127.0.0.1:3000 就可以访问本机的页面

假如电脑 IP 地址为 192.168.1.10 ，而且手机和电脑都连上同一个 Wifi，那么在手机上输入 http://192.168.1.10:3000 也可以访问到这个网页。

当我们访问服务器上的文件（html, js, css 等），其实本质上也是访问远端的一台电脑，也需要通过 IP 地址来访问。这就导致一个问题了：没人能记得住这串数字。

既然记不住就起个名字喽。 这就是域名的由来，也就是像下面这样 Map。

但是等我们给这个 IP 起了新名字之后怎么告诉别人呢？所以，得有一个超大日记本记录上面这些 Map 关系：

DNS (Domain Name System) 服务器就是帮我们记录并解析上面这些关系。这也就是为什么面试题 “输入 URL 之后会发生什么” 里会有一步是要到 DNS 服务器解析 IP 地址，好让我们访问到正确的服务器资源。

当然，DNS 解析服务并不单单只有 域名 ->IP 地址 一个功能，还能解析邮件服务器、CNAME 配置等。下面我就直接结合 腾讯云 的 DNS Pod 的解析规则来说明吧。

首先，上面一直在说的 域名 ->IP 地址 这样的 Map 记录叫做 A 记录，也即 Active Record。 是最最最常见的域名解析。

比如我们买了个服务器，一般都会有公网的 IP 地址，我们只需要添加一条 A 记录，把域名指向自己服务器的 IP 地址就好了。

另一个常见的例子就是 Github Pages 自定义域名 其中 的一种配置：添加 4 条 A 记录，分别指向下面的 IP 地址：

CNAME 就是域名的昵称，可能理解为 IP 的昵称（域名）的昵称（CNAME）就是 CNAME。其实我们平常更多接触到的并不是 A 记录，而是 CNAME 记录，常见于一些部署平台上。

当部署你的个人网页时，这些部署网站都会自动给你一个非常 Low 的域名，比如 Github Pages 的 haixiangyan.github.io ，或者 Heroku 的 haixiangyan.heroku.app ，再或者腾讯云的 “乱码” 域名 thedemo-9gf4vat5207cf224-1253834571.ap-shanghai.app.tcloudbase.com 。

只要我们有了自己的域名，在 DNS 上添加一条 CNAME 记录，指向上面这些第三方服务商自动自成的域名，那么就能通过我们的域名直接访问第三方服务平台上的资源了。

另外一个常见的场景就是 CDN 服务器，如果在腾讯云上买了一个 CDN 服务器，它也会提供一个 “不那么乱码” 域名，比如我的个人网站就是 www.yanhaixiang.cn.cdn.dnsv1.com 。同理，在 DNS 添加一条 CNAME 记录指向 CDN 提供的域名就能访问 CDN 上的资源了。

这个 TXT 记录，目前我使用到的场景是域名验证 *** 作：当腾讯云要验证这个域名是否是合法/激活的，那么需要你在 DNS Pod 上添加一条 TXT 记录，记录值腾讯云会提供给你。

添加了之后，腾讯云就会查看这条 TXT 记录值是否正确，从而验证域名是否合法。

上面的 A 记录填写都是针对 IPv4 的 IP 地址，也是最最最常见的 IP 地址。计算机发展到现在，有些已经用上了 IPv6 了，所以 AAAA 记录就是用来解析成对应的 IPv6 地址的，不过目前用的很少。

NS 也就是 Name Server。还记得上面说到的 DNS 么？NS 可以理解为 DNS 服务器。

一般域名服务商都会有自己的 NS，并且都默认使用自己的 NS 来解析域名。如果你不想用当前这个域名服务商的 NS 来解析域名，也可以换成别家的。

除非有特别需求，NS 记录使用场景非常少。

设置邮箱的记录。没怎么用过，不评价。

我们一般接触到的就是上面这些记录，腾讯云还提供了别的记录类型：

注意，上面像 “显性 URL”、“隐性 URL” 可能在别的域名服务器是没有的，比如 namesilo.com 这个便宜货。

讲真，国内的云服务真的做的比国外好太多了，很多功能都很实用，强烈推荐大家使用国内的云。

了解了 DNS 解析记录还不够，还得了解域名的分级。

比如 www.baidu.com ，顶级为 com ，二级为 baidu ，三级为 www 。当在我们购买域名时，买的就是 顶级 + 二级域名 ，直接把顶级和二级域名锁死了。

当添加域名解析记录时，可以在 主机记录 这个字段里指定第三级的域名：

图里由上到下配置得到的域名完全体为：

后面两个只是腾讯云给你的示例而已，就不举例了。

子级的好处就在于可以不用上线一个网站就买一个对应域名，太费钱了~ 比如我之前买了 yanhaixiang.cn 这个域名，当要用这一个域名分别指向 国内腾讯云上的个人网站 ，以及 Github 提供的 Github Pages ，在添加两条记录之后：

就可以在 https://yanhaixiang.cn 访问国内的 腾讯云个人网站 ，在 https://github.yanhaixiang.cn 则访问 Github Pages 的个人网站 ，非常悠亚。

国内：腾讯云、阿里云、华为云等都不错。国外：NameSilo、GoDaddy、AWS等。

个人推荐在国内买，原因是国内的云服务商功能非常齐全，而且服务之间关联度非常高，可以说有了国内域名走遍天下都不怕，没有国内域名啥都捉襟见肘。

除了 .com 和 .cn 常见的顶级域名外，还有 .xyz ， .top 这些便宜的顶级域名可以选择。

顶级域名中有一些是比较敏感的，比如 .law ，这种就只能由专业机构来注册：

如果实在想要 .com 这种牛逼的顶级域名，可以试着买带 - 的二级域名，比如我之前就买了一个 easy-refer.com 的域名，19 刀/年。

二级域名允许有 - 的原因是为了解决名字的混淆问题，比如你的公司叫 Who Represents ，然后你注册了一个 whorepresents.com 的网站，由于域名是不区分大小写的，很容易被误解为 Whore Presents ，变成了 妓女的礼物 。除了这个，还有 Experts Exchange 的 expertsexchange.com 被理解成 Expert Sex Change ，当场社死。

加了一个 - 连字符可以更好地 “分词”，不被别人误解网站内容。

二级域名除了英文还能选择中文的，比如《爱情公寓》里的 www.张伟是混蛋.com ：

不开玩笑，这个网站也是能正常访问的，里面的内容都是和《爱情公寓》有关的内容。最旧的贴子是 2011 年，这个网站大概也是那个时候上线的吧，不知不觉已经过了 10 年了呢~

由于域名的 “唯一性”，在当年，注册了一个好的域名比建一个好看的网站更值钱，比如 apple.com , baidu.com 等。这也导致出现了一些投机分子：一出手就买一堆域名，然后等公司上门收购域名。

只有国内的服务商需要做域名备案，也算是中国特色。最近我备案了 3 个域名，每个域名备案大概需要 1 个月的时间来备案。备案也不仅仅填几个表格就完事了，还是挺多地方要注意的。

按照国内相关法律，域名备案前 必需要有一台租期大于 3 个月的服务器。 而国内一些云厂商为了能绑定销售，一般都要你买自家的服务器。

当然，只要有一台上面的服务器，在期间内可以给多个域名进行备案。

还有一点域名之间不能同时备案，一时间只能备案一个。所以如果你有多个域名要备案，要挑最紧急的那个来备案哦~

给你的网站起名是非常困难的一件事，我经常被打回，如果你做的是个人网站推荐使用 “个人项目展示” 这个名字，“个人网站” 是黑名单中的名字。

紧急联系人电话最好别瞎填，有的时候备案那边的人会抽查这个电话，如果这个紧急联系人电话打不通，接不了，那么你还得更换，更换本质上是又要有一遍备案流程，所以最好一开始就弄好这个，别问我是怎么知道的。

现在备案需要签署一份类似“合同”之类的文件，需要用到红色印泥，这个在打印室就有（当时我差点在网上买了一个）。

不过，就算备案有问题，工作人员几乎 1 天就打电话过来让你改正的，所以不用太慌~

最后，稍微总结一下：

---