Fork me on GitHub

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

购买域名

首先没有域名的要去购买,这个就不多说了。

域名解析到 Github Page

购买域名的供应商会提供域名解析,我们的目的是将域名解析到你github page的 ip 地址。这个也不多说了,不清楚可以百度。或者参考我的。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

github 仓库添加域名解析记录

可以通过命令在github page仓库中添加CNAME文件:

1
2
touch CNAME
echo 'luanzhuxian.com'> CNAME

或者在仓库的settings中找到Custom Domain添加自己的域名

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

之后就可以通过域名访问了。

支持 https 访问自定义域名

现在只能通过http访问域名,想要通过https访问,需要域名服务商颁发SSL证书,我是在阿里云买的域名,而阿里云的SSL证书是付费的。
我们可以将域名解析服务迁移到提供免费SSL的服务商处,我选择了Cloudflare

首先要注册,接着右上角Add site添加你的域名。之后Cloudflare会自动扫描你的DNS解析记录。完成后会自动显示你的域名当前DNS记录,如果记录有问题或者有遗漏,你可以自己手动Add record添加DNS解析,然后再点击到下一步。

之后选择免费CDN套餐,点确定,Cloudflare会分配两个CDN加速的NS服务器地址。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

之后登陆阿里云 > 控制台 > 产品与服务 > 域名 > 找到你的域名右侧点击管理 > 左侧菜单DNS管理

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

可以看到当前的阿里云的DNS服务器,我们要用Cloudflare的将之替代。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

点右上角修改DNS服务器,将Cloudflare的两个NS地址分别复制进去,点确定。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

也就是将域名的DNS解析服务从阿里云迁移到了提供免费证书的Cloudflare,生效后可以用https访问了。

支持七牛云图片

我的图片放到了七牛上,因为是免费的。

首先要 > 控制台 > 左侧对象储存 > 空间管理 > 新建空间,就不详细说了。创建好右侧点击文件进入文件管理就可以上传文件了。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

以前上传文件后文件的外链地址是七牛给的,比如http://pw5hoox1r.bkt.clouddn.com/test.png直接拿这个外链地址就能获取图片。现在不行了,必须要绑定已备案的域名,否则上传的文件没有外链地址。比如你绑定一个二级域名cdn.abc.com,绑定后图片的外链地址就变为http://cdn.abc.com/test.png

空间管理 > 点击右侧的域名,进入域名管理页面 > 添加域名。之后输入你的域名,必须是已备案的。通信协议的话HTTP是免费的,HTTPS是付费的。源站配置选择你的储存空间,点创建就行了。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

之后要配置CNAME。去你的DNS服务商处添加一条CNAME的解析,将你七牛绑定的的域名解析到七牛的域名,这个域名就在刚创建的加速域名的详情页里可以找到。

空间管理 > 域名管理 > 下方找到你刚绑定的域名,点进去。基本信息下面的CNAME就是了。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

因为我上面选的Cloudflare,所以去添加一条CNAME的解析,目标就是刚刚七牛给的CNAME地址。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

这里注意如果你添加了a记录,比如使用通配符泛域名a记录,有可能会和刚才添加的CNAME记录冲突,也就是刚才绑定的域名会被解析到github page而不是七牛,也就拿不到图片,所以可以把冲突的a记录删了。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

生效后通过https打开博客,发现七牛的图片请求报错,原来是https下图片也被改为https请求的。要么去七牛的域名管理处改为支持https,但是付费的。或者去Cloudflare修改SSL证书。

进入Cloudflare点击上面的SSL/TLS,右边有四种模式:OFF、Flexible、Full、Full(strict)。默认是Full,也就是客户端 到 CloudflareCloudflare 到 服务器这两段都是https加密传输。

改为Flexible,即是客户端 到 Cloudflarehttps加密传输,而Cloudflare 到 服务器http传输,这样Cloudflare可以拿到七牛云的图片再返给客户端了。

Github Page 添加自定义域名 + 开启 HTTPS + 支持七牛云图片

生效后再打开文章就可以看到图片了。