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

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

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

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

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

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

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

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

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

选择github

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

选择要用的静态页面源代码仓库

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

填写build方式和publish的目录

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

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

Deploying

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

Deployed

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

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

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

添加自定义域名

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

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

添加CNAME记录

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

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

校验域名

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

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

生成https证书

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

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

tls证书信息

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

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


分享到:


相關文章: