原文：https://chinese.freecodecamp.org/news/how-to-host-your-personal-website-for-free/

在过去的五年左右时间里，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!