在过去的五年左右时间里,Web 变化很大,曾经 dev-op 实践被奉为圭臬,如今却略显过时。

发布网站到线上,过去的标准做法是给服务商支付费用,比如 NameCheap 或者 GoDaddy。现在虚拟主机仍然是一个不错的选择,不过已经有一些更简便的方法。接下来会介绍我免费部署个人网站到线上的方法。

开始的开始

需要准备网站的静态文件(HTML/CSS/JS)。这个教程讲述的是托管静态站。

还需要一个域名。域名价格一般是一年 15 美元左右,不同的顶级域名价格不同。如果你想要打造个人品牌,那么购买一个域名还是很有必要的。

此外还需要在 CloudflareAWS 注册账号。如果没用过这两个服务,没关系---我会一步步讲解每个平台的操作步骤。干就完了。

设置 AWS S3 文件桶

登录 AWS 控制台,进入 S3 管理控制台

点击创建存储桶按钮,弹出一个存储桶信息表单的对话框。

image-25
AWS S3 管理控制台

在“存储桶名称”栏,填写完整的域名。在这个教程里,我会使用 tutorial.joey.dev。“区域”栏,选择离我比较近的州,US East (N.Virginia)。当然你可以选择离你比较近的地区。选好后点击下一步。

image-26
AWS S3 创建存储桶,步骤一

在步骤二,直接点击下一步。在步骤三,取消阻止所有公共访问选项,我们也用不到 S3 日志传输服务,直接点击下一步。

image-27
AWS S3 创建存储桶,步骤三

在步骤四,直接单击创建存储桶按钮。在 S3 管理控制台会看见新创建的存储桶。点击新创建的存储桶,会出现下面的界面:

image-28
AWS S3 新创建的存储桶

点击屏幕顶部的属性选项卡,然后选择第一行的静态网站托管卡片。选中使用此存储桶托管网站选项。索引文档,直接填写 idnex.html然后点击保存。

留意一下卡片顶部终端节点的值,记下来。

image-29
AWS S3 静态网站托管配置

漂亮!最后一步就是上传网站文件到存储桶里了。点击概述标签页然后点击上传按钮,出现下面的弹窗,开始上传吧。

image-30
AWS S3 上传文件,步骤一


在选择上传的文件后,点击下一步按钮。在第二步,点击管理公共权限下拉框选择为此对象授予公共读取访问权限选项。点击下一步。

image-31

第三步,所有选项都不用更改,直接点击下一步。在第四步点击上传按钮。上传完成后,通过访问终端节点地址就可以访问网站了。

厉害了,接下来设置 Cloudflare。

image-32

设置 Cloudflare

这里假设你是第一次使用 Cloudflare 服务,Cloudflare 并没有绑定任何域名。在 Cloudflare 控制台,点击 Add a Site 按钮,输入网站地址,点击 Next。再点击 Next,选择 Free plan。

进入 DNS 查询结果页面后,删除扫描到的所有记录。结果看起来如下:

image-33

这里需要两个不同的CNAME记录。

第一个记录,name,输入wwwDomain name,输入不包含 http:// 的域名,如tutorial.joey.dev

第二个记录,name 输入域名,Domain name,输入我们之前提到的 S3 存储桶的终端节点。确保添加这些记录的时候橙色的云是可用的。

image-34
Cloudflare DNS 记录配置


对照着上图,如果确定设置没有问题,点击 Continue。现在需要把你的域名的 nameservers 从域名注册商指向 Cloudflare 的 nameservers。这涉及到域名注册商网站的一些操作,可以阅读一下相关的文档。

修改完 nameservers,还需要设置一些页面规则。在这之前,先确保 SSL 证书设置正确。在 Cloudflare 控制台,点击域名进入到域名控制台,点击 Crypto 选项卡确保 SSL 的设置是 Flexible

image-35

好事将近。点击 Page Rules 选项卡。这里需要创建两个页面规则,把非 SSL 的流量跳转到 SSL,把 www.joey.dev 跳转到更简短的 joey.dev,在这里合并成了一条规则(按需配置)。

image-36

至此,.dev 域名自动跳转到了 SSL,当有人访问 www.domain.dev 时,也会跳转,一箭双雕。

如果你的顶级域名不是 .dev,需要额外配置下面的规则:

image-37


访问域名。哈哈哈,现在可以访问 SSL 加密版部署在 AWS S3 存储桶集成 cdn 的网站啦。

Happy coding!

原文链接:https://medium.com/better-programming/how-to-host-your-personal-website-for-free-3101c4ab2e49,作者:Joey Colon