在过去的五年左右时间里,Web 变化很大,曾经 dev-op 实践被奉为圭臬,如今却略显过时。
发布网站到线上,过去的标准做法是给服务商支付费用,比如 NameCheap 或者 GoDaddy。现在虚拟主机仍然是一个不错的选择,不过已经有一些更简便的方法。接下来会介绍我免费部署个人网站到线上的方法。
开始的开始
需要准备网站的静态文件(HTML/CSS/JS)。这个教程讲述的是托管静态站。
还需要一个域名。域名价格一般是一年 15 美元左右,不同的顶级域名价格不同。如果你想要打造个人品牌,那么购买一个域名还是很有必要的。
此外还需要在 Cloudflare 和 AWS 注册账号。如果没用过这两个服务,没关系---我会一步步讲解每个平台的操作步骤。干就完了。
设置 AWS S3 文件桶
登录 AWS 控制台,进入 S3 管理控制台。
点击创建存储桶按钮,弹出一个存储桶信息表单的对话框。
在“存储桶名称”栏,填写完整的域名。在这个教程里,我会使用 tutorial.joey.dev。“区域”栏,选择离我比较近的州,US East (N.Virginia)。当然你可以选择离你比较近的地区。选好后点击下一步。
在步骤二,直接点击下一步。在步骤三,取消阻止所有公共访问选项,我们也用不到 S3 日志传输服务,直接点击下一步。
在步骤四,直接单击创建存储桶按钮。在 S3 管理控制台会看见新创建的存储桶。点击新创建的存储桶,会出现下面的界面:
点击屏幕顶部的属性选项卡,然后选择第一行的静态网站托管卡片。选中使用此存储桶托管网站选项。索引文档,直接填写 idnex.html
然后点击保存。
留意一下卡片顶部终端节点的值,记下来。
漂亮!最后一步就是上传网站文件到存储桶里了。点击概述标签页然后点击上传按钮,出现下面的弹窗,开始上传吧。
在选择上传的文件后,点击下一步按钮。在第二步,点击管理公共权限下拉框选择为此对象授予公共读取访问权限选项。点击下一步。
第三步,所有选项都不用更改,直接点击下一步。在第四步点击上传按钮。上传完成后,通过访问终端节点地址就可以访问网站了。
厉害了,接下来设置 Cloudflare。
设置 Cloudflare
这里假设你是第一次使用 Cloudflare 服务,Cloudflare 并没有绑定任何域名。在 Cloudflare 控制台,点击 Add a Site 按钮,输入网站地址,点击 Next。再点击 Next,选择 Free plan。
进入 DNS 查询结果页面后,删除扫描到的所有记录。结果看起来如下:
这里需要两个不同的CNAME
记录。
第一个记录,name,输入www
,Domain name,输入不包含 http:// 的域名,如tutorial.joey.dev
。
第二个记录,name 输入域名,Domain name,输入我们之前提到的 S3 存储桶的终端节点。确保添加这些记录的时候橙色的云是可用的。
对照着上图,如果确定设置没有问题,点击 Continue。现在需要把你的域名的 nameservers 从域名注册商指向 Cloudflare 的 nameservers。这涉及到域名注册商网站的一些操作,可以阅读一下相关的文档。
修改完 nameservers,还需要设置一些页面规则。在这之前,先确保 SSL 证书设置正确。在 Cloudflare 控制台,点击域名进入到域名控制台,点击 Crypto 选项卡确保 SSL 的设置是 Flexible。
好事将近。点击 Page Rules 选项卡。这里需要创建两个页面规则,把非 SSL 的流量跳转到 SSL,把 www.joey.dev 跳转到更简短的 joey.dev,在这里合并成了一条规则(按需配置)。
至此,.dev 域名自动跳转到了 SSL,当有人访问 www.domain.dev 时,也会跳转,一箭双雕。
如果你的顶级域名不是 .dev,需要额外配置下面的规则:
访问域名。哈哈哈,现在可以访问 SSL 加密版部署在 AWS S3 存储桶集成 cdn 的网站啦。
Happy coding!
原文链接:https://medium.com/better-programming/how-to-host-your-personal-website-for-free-3101c4ab2e49,作者:Joey Colon