cloudflare免费证书_通过亚马逊 S3 和 Cloudflare 免费托管网站

原文：https://medium.com/better-programming/how-to-host-your-personal-website-for-free-3101c4ab2e49

作者：Joey Colon

译者：ZhichengChen

校对者：Miya

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

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

开始的开始

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

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

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

设置 AWS S3 文件桶

登录 AWS 控制台，进入 S3 管理控制台。

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

AWS S3 管理控制台

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

AWS S3 创建存储桶，步骤一

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

AWS S3 创建存储桶，步骤三

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

AWS S3 新创建的存储桶

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

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

AWS S3 静态网站托管配置

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

AWS S3 上传文件，步骤一

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

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

厉害了，接下来设置 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 存储桶的终端节点。确保添加这些记录的时候橙色的云是可用的。

Cloudflare DNS 记录配置

对照着上图，如果确定设置没有问题，点击  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!

---

非营利组织 freeCodeCamp.org 自 2014 年成立以来，以“帮助人们免费学习编程”为使命，创建了大量免费的编程教程，包括交互式课程、视频课程、文章等。线下开发者社区遍布 160 多个国家、2000 多个城市。我们正在帮助全球数百万人学习编程，希望让世界上每个人都有机会获得免费的优质的编程教育资源，成为开发者或者运用编程去解决问题。

你也想成为 freeCodeCamp 社区的贡献者吗？

招募丨freeCodeCamp 翻译计划