1. 创建 github 仓库

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

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

此时应该能够在浏览器中输入 http://www.hory-ai.com 访问自己的网页了

而且 GithubPages 默认开启 HTTPS

2. 绑定自定义域名

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

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

此时 Github Pages 看起来是这样的

Github Blog 绑定二级域名并开启 HTTPS

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

自定义域名不提供 HTTPS 服务

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

3. 配置 DNS 解析

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

Github Blog 绑定二级域名并开启 HTTPS

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

等待 DNS 生效即可通过 http://www.hory-ai.com 访问自己的网页了,而且原本的 http://www.hory-ai.com
也会重定向到自定义域名上

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

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

4. 实现自定义域名 HTTPS

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

Github Blog 绑定二级域名并开启 HTTPS

添加域名解析

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

Github Blog 绑定二级域名并开启 HTTPS

修改域名服务器

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

Github Blog 绑定二级域名并开启 HTTPS

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

Github Blog 绑定二级域名并开启 HTTPS

回到 CloudFlare 页面,设置 SSL 为 Flexible

Github Blog 绑定二级域名并开启 HTTPS

添加路由重定向规则

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

Github Blog 绑定二级域名并开启 HTTPS

待设置生效后再访问 http://www.hory-ai.com 就会变成 https 了

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

Github Blog 绑定二级域名并开启 HTTPS

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

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

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

https://github.com/wangriyu/wangriyu.github.io/issues/6

https://dash.cloudflare.com/a4478cfcd466818be3094caea229dffa/hory-ai.com

相关文章:

  • 2021-12-14
  • 2021-10-23
  • 2022-01-06
  • 2022-12-23
  • 2021-11-26
  • 2021-11-17
  • 2021-06-21
  • 2022-01-24
猜你喜欢
  • 2021-12-11
  • 2021-09-05
  • 2022-12-23
  • 2021-10-13
  • 2021-04-30
  • 2021-11-08
相关资源
相似解决方案