静态网站生成器之React框架Gatsby(四）免费https自定义域名

前面我们从首页模板替换，到数据源连接，生成了静态门户首页介绍页面。这一篇，我们将把自己的静态的页面上传的网上，对外提供访问，展现自己。

首先，肯定是把静态页面的源代码放到github上面，现在github免费账户也可以用私有仓库了，所以我们可以把我们的页面源代码转成私有。

这里，大家可能首先想到的是直接用github pages，但是这里github pages的自定义域名的https设置起来比较麻烦，也是可以解决的，但这里我选择netlify(https://app.netlify.com)来作为我的静态页面存放的服务器。netlify支持直接从github，gitlab这些仓库中直接导入我们的代码，所以还是很方便的。

首先，我们使用我们的github账号登录。

登录之后，可以看到自己已经发布的一些静态网站服务。然后，我们点击Net site from Git，创建一个新的静态网站。

因为netlify原生是支持各种静态生成器框架的，所以，我们这里可以直接填写build命令是gatsby build，然后默认的build输出目录是public，所以publish目录，我们填写public/，然后直接deploy site就可以了。

部署成功之后，上面可以看到一个netlify给你生成的一个随机的二级域名，现在我们就可以直接访问这个域名，就可以直接看到我们的静态页面了。

下一步，我们需要添加自定义域名，把我们自己的域名指向这里，提供给外界访问。

然后，我们需要去自己的域名解析控制台，添加这个自定义域名的CNAME。

成功之后，回到netlify控制台，校验一下自定义域名是否指向了我们的那个app的二级域名。

校验成功之后，没有加密的http的域名就可以访问，这时我们可以看到下面https的一览，会自动在跑生成证书的程序，用的是现在流行的免费https证书发布，lets encrypt。

生成成功之后，我们就可以看到一个有效的证书信息。

到现在，整个页面发布到https加密就完成了，这个是我的demo网址https://gatsby.yuehaitao.cn，当然你可以自己上传自己的证书，如果你是通过其他第三方购买的证书的话。

之后，我们每次的页面的更新就不需要关心了，因为netlify会帮我们自动处理每一次的代码提交，每一次的master分支提交，都会触发netlify自动拉取代码，然后build，publish，所以还是非常爽的吧。谢谢大家。