GithubPages 绑定二级域名并开启 HTTPS

1. 创建 github 仓库

通常使用 GithubPages 创建个人主页需要创建一个与用户名同名的 XXX.github.io 仓库

以我的博客为例,创建一个新仓库 wangriyu.github.io,上传网页文件,然后在仓库设置里开启 GitHub Pages 功能

此时应该能够在浏览器中输入 https://wangriyu.github.io 访问自己的网页了

而且 GithubPages 默认开启 HTTPS

2. 绑定自定义域名

万网 上买个喜欢的域名,比如我买了 wangriyu.wang(可惜买不到 riyu.wang)

到上面的仓库目录下添加 CNAME 文件,里面的内容就是我的域名,比如我的就写了二级域名 blog.wangriyu.wang

此时 Github Pages 看起来是这样的

image

Enforce HTTPS 选项显示 Unavailable for your site because you have a custom domain configured

自定义域名不提供 HTTPS 服务

此时还无法访问 http://blog.wangriyu.wang, 需要到 DNS 服务商那配置 DNS 解析,比如阿里云的即可

3. 配置 DNS 解析

打开 阿里云的域名控制台,点击自己域名的解析按钮进入 DNS 设置页,添加解析:

image

  • 记录类型中 A 类填的是 IP 地址,CNAME 类填的是域名,我们需要把 wangriyu.github.io 转向 blog.wangriyu.wang, 所以填 CNAME
  • 主机记录填二级域名即可,‘@’ 值代表一级域名,更多选项见阿里云说明
  • 解析路线填默认即可,如果分国内国外需要另外选择使其能够根据国内外 IP 解析到不同地址
  • 记录值就是我们的原域名 wangriyu.github.io,如果记录类型是 A 类这里需要填 IP 地址 (可以 PING 一下得到)

等待 DNS 生效即可通过 http://blog.wangriyu.wang 访问自己的网页了,而且原本的 https://wangriyu.github.io
也会重定向到自定义域名上

DNS 解析这里我用了二级域名 blog 访问博客,还可以添加别的二级域名,比如我用了 home 访问我的另一个仓库 https://github.com/wangriyu/homepage

只要在新的仓库根目录下添加 CNAME 文件并写入添加的有效二级域名 (home.wangriyu.wang), 再开启 GithubPages 功能即可访问另一个主页

4. 实现自定义域名 HTTPS

CloudFlare 注册一个账号,注册成功后在返回的页面中添加域名 (一级域名 wangriyu.wang),点击扫描 DNS 记录

image

添加域名解析

如果 DNS 扫描不到你的解析记录,可以手动添加,与上面的添加方法类似

image

修改域名服务器

我用的是万网的 DNS,所以现在要在万网的域名控制台将 DNS 服务器修改至 CloudFlare 提供的域名服务器

image

进入万网的域名控制台,点击域名的管理按钮,修改域名 DNS 为 CloudFlare 提供的

image

回到 CloudFlare 页面,设置 SSL 为 Flexible

image

添加路由重定向规则

Page Rules 里使用通配符将路由重定向到 HTTPS 的链接

image

待设置生效后再访问 http://blog.wangriyu.wang 就会变成 https 了

具体原理如图,cloundflare 访问原网址的服务器获取储存原网页文件,用户再访问 cloundflare 的加密连接
如果在控制台中 Ping 一下 CloudFlare 代理前后的网址就会发现博客 ip 变了

image

除此之外,在 CloudFlare 控制台中还提供了很多服务,比如 js、html 等静态文件压缩,设置浏览器缓存过期时间,
清空 CloudFlare 服务器缓存 (强制刷新资源,避免原网页更新用户访问的还是旧资源) 等等

更多技巧见文章: 十个你可能不知道的 CloudFlare 免费 CDN 加速技巧 -SSL\DDOS\Cache

cloundflare 的服务很适合博客这样的静态网页,也弥补了 GithubPages 的不足

文章目录
  1. 1. 创建 github 仓库
  2. 2. 绑定自定义域名
  3. 3. 配置 DNS 解析
  4. 4. 实现自定义域名 HTTPS
    1. 到 CloudFlare 注册一个账号,注册成功后在返回的页面中添加域名 (一级域名 wangriyu.wang),点击扫描 DNS 记录
    2. 添加域名解析
    3. 修改域名服务器
    4. 回到 CloudFlare 页面,设置 SSL 为 Flexible
    5. 添加路由重定向规则