github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(1)

https

GitHub page是什么?

我只是简短讲一讲自己的理解,更详细的还请自行搜索,如果错误还请指出。

GitHub pages 是一个能存放静态资源的服务器。你可以把它当做apache服务器使用。同时支持使用自定义域名解析,而且也支持HTTPS加密访问。

但是如果用上了CDN服务器,它这个HTTPS加密就无法使用了,具体请看图:

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(2)

HTTPS证书报错

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(3)

SSL证书

为什么不能使用Https访问?

上面试验过了Https访问浏览器会报错“不安全”,原因是因为该证书它是由CDN服务器提供的。而不是我们访问的GitHub pages服务器提供的。

而且,该证书是CDN的域名,并不是给我们自己域名的,所以当我们使用自己自定义的域名访问GitHub pages,浏览器自然而言就会报错。

如何将解决?

我使用的是腾讯云的CDN,有免费流量,反正我是用不完的。同时腾讯云还提供免费的SSL证书,也就是HTTPS证书使用。另外我将自己的域名DNS服务器设置为dnspod,也就是腾讯云的dns解析,这样后面设置的时候也会方便不少,同时dnspod口碑也不错。

1. 创建证书

  1. 打开腾讯云-云产品-SSL证书-申请免费证书-亚洲诚信(写稿时是亚洲诚信提供的SSL证书)-确定
  2. 通用名称;输入需要加证书的域名,例如我需要给”test.gobyte.cn“加上证书,那么在”通用名称“里输入”test.gobyte.cn“即可
  3. 申请邮箱;自己的邮箱,我是填QQ邮箱,因为电脑每次都会登陆QQ
  4. 证书备注名;自己随便写
  5. 私钥密码;我嫌麻烦,没有设置
  6. 所属项目;默认项目

最后设置如图:

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(4)

申请创建SSL证书

2. 域名验证

域名验证一共有三种方式,如果你的DNS解析服务器是腾讯云的,那么可以使用第一种自动验证。

  1. 自动DNS验证;原理是它自动帮你创建一条TXT解析,来进行验证。但是我试过,自动验证需要耗费十几分钟甚至更久才能验证通过。而且证书创建后一小时内不可删除,所以不建议使用。
  2. 手动DNS验证;会提供一个二级域名和一串字符串,让你去dns解析里添加,建议使用
  3. 文件验证;在你的网站里创建一个文件,文件内同样是指定的一串随机的字符串,网站如果变动了验证会失效,不建议

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(5)

证书验证

3. 添加DNS解析完成验证

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(6)

申请成功

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(7)

证书需要验证的信息

  1. 入你的域名解析管理
  2. 添加记录;主机记录如图:_dnsauth.test ;记录类型:TXT;记录值:201906111036051a20pp0b9x741e6lkn3xa302034gai8q61314oiyu4zogq8r1x ;最终效果如下图:
  3. 回到证书详情页面,点击刷新按钮,查看域名解析是否生效

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(8)

添加域名解析

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(9)

回到证书详情页,点击查询,验证刚才添加的域名解析

如果显示这样,说明已经成功了,等待服务商给你生成SSL证书即可。

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(10)

证书验证域名成功

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(11)

收到成功的邮件提醒

到这里证书这块已经搞定,下一步是解决CDN设置的问题。


设置CDN服务

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(12)

配置CDN的源IP和需要加速的域名

  1. 进入CDN;路径:云产品-CDN-添加域名
  2. 配置见图。域名是你要加速的域名。源站是指你网站的服务器ip。我这里是使用的GitHub pages,所以使用了这4个ip。如果你不知道自己的ip,你可以去的空间商查询。另外如果你想使用类似GitHub的服务器,可以使用ping www.xxxx.com 命令查询。我是使用站长工具批量ping命令查询的。
  3. 缓存过期配置,根据自己需要酌情设置,因为是写教程,我这里就默认了。说个尝试,如果是动态的链接是不应该缓存的,所以过期时间应该是0秒。
  4. 进入高级配置,设置HTTPS证书。

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(13)

HTTPS配置

5.按图下图设置

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(14)

CDN回源设置

6.设置完成后,点击提交,进入CDN的域名管理列表。

7.稍等片刻,CDN会给你提供一个域名,该域名是你把要加速的域名,通过CNAME类型解析的。如下图:

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(15)

CDN提供的域名,一会儿我们需要把自己域名指向到这个

8.设置域名解析到CDN上。进入域名解析,添加解析。如:我需要用的域名为test.gobyte.cn,那么添加的主机名应该是test,解析类型为CNAME,记录值为test.gobyte.cn.cdn.dnsv1.com。如下图:

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(16)

开始指向CDN提供的域名

9.浏览器输入你的域名,按下F12打开开发者工具,点击network,如我的域名是http://test.gobyte.cn,打开看看能不能访问。顺带看一下head的主机ip是多少,如图:

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(17)

测试

10.明显看出,这个IP不是上面自己设置的源IP,通过IP查询得知,它是湖南岳阳的IP,说明它就是CDN服务器的IP了。

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(18)

IP地址

11.我们再测试下HTTPShttps://test.gobyte.cn,我这边已经成功了,如下图。

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(19)

https访问测试

12.鼠标单击一下地址栏的小锁,点击证书

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(20)

https证书

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(21)

证书详情

  1. 从证书中可以看到,是授予我的域名的。颁发者是:TrustAsia,而TrustAsia就是亚洲诚信公司,所以说明我们的HTTPS已经配置成功了!
  2. 但是别着急,还有最后重要的一步设置没有完成。我们需要设置为强制跳转HTTPS访问,因为目前http还是可以访问的。
  3. 设置HTTPS强制跳转;打开CDN-域名管理-点击test.gobyte.cn-高级配置-HTTPS配置-强制跳转HTTPS-打开

github page使用(教你GitHubpages开启Https访问自定义域名和CDN网站加速)(22)

开启强制跳转https

4.至此,我们打开浏览器隐身模式,尝试输入不带https的域名,看看能否强制跳转。通过抓包得知,浏览器成功的利用302跳转到https协议了。


至此,使用GitHub pages CDN HTTPS教程已经完成,如果你在搭建的过程中遇到什么问题,或者发我的有遗漏、错误的地方,欢迎留言,最后祝大家生活愉快~

,