![bf1cd8990fe6dd30f535853569dcd512.png](https://i-blog.csdnimg.cn/blog_migrate/2c554256a0ca463a1fff49d56454d5bd.jpeg)
原文: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 管理控制台。
点击创建存储桶按钮,弹出一个存储桶信息表单的对话框。
![117776f786921b16d0a6614d81ac281f.png](https://i-blog.csdnimg.cn/blog_migrate/a15806411899caa4d37ed3111804acfb.jpeg)
在“存储桶名称”栏,填写完整的域名。在这个教程里,我会使用 tutorial.joey.dev。“区域”栏,选择离我比较近的州,US East (N.Virginia)。当然你可以选择离你比较近的地区。选好后点击下一步。
![51c747da331713ea02f52b037a8dfdce.png](https://i-blog.csdnimg.cn/blog_migrate/d20d6bdd27a4e57558b2a244d8156265.jpeg)
在步骤二,直接点击下一步。在步骤三,取消阻止所有公共访问选项,我们也用不到 S3 日志传输服务,直接点击下一步。
![392fafa8d17c1bcd35eda1a7eec3b1ca.png](https://i-blog.csdnimg.cn/blog_migrate/ba81738c87dcf53506fe34de4e8084e9.jpeg)
在步骤四,直接单击创建存储桶按钮。在 S3 管理控制台会看见新创建的存储桶。点击新创建的存储桶,会出现下面的界面:
![525905a2adc82fef9fdf50d09349743e.png](https://i-blog.csdnimg.cn/blog_migrate/f0fe4767b715e842b7ba2dfb175c3f3a.jpeg)
点击屏幕顶部的属性选项卡,然后选择第一行的静态网站托管卡片。选中使用此存储桶托管网站选项。索引文档,直接填写 idnex.html
然后点击保存。
留意一下卡片顶部终端节点的值,记下来。
![67a995629a7f071b14f4df8cbc5e5251.png](https://i-blog.csdnimg.cn/blog_migrate/493bbe973d8a7b0dacbc39202fc044a4.jpeg)
漂亮!最后一步就是上传网站文件到存储桶里了。点击概述标签页然后点击上传按钮,出现下面的弹窗,开始上传吧。
![b64c7f0d7659d3d12c50a6c40f0fa8ea.png](https://i-blog.csdnimg.cn/blog_migrate/688769a787fac49d1bf839a141197bd4.jpeg)
在选择上传的文件后,点击下一步按钮。在第二步,点击管理公共权限下拉框选择为此对象授予公共读取访问权限选项。点击下一步。
![aa6ec77d43481dc0e905d10c56d515aa.png](https://i-blog.csdnimg.cn/blog_migrate/3cbada51412de81f672fe19799fc813a.jpeg)
第三步,所有选项都不用更改,直接点击下一步。在第四步点击上传按钮。上传完成后,通过访问终端节点地址就可以访问网站了。
厉害了,接下来设置 Cloudflare。
![43dc663cd977daf0fc79385bbda3e432.png](https://i-blog.csdnimg.cn/blog_migrate/fc089e18cba5d621eaf1f7b93e56dc99.jpeg)
设置 Cloudflare
这里假设你是第一次使用 Cloudflare 服务,Cloudflare 并没有绑定任何域名。在 Cloudflare 控制台,点击 Add a Site 按钮,输入网站地址,点击 Next。再点击 Next,选择 Free plan。
进入 DNS 查询结果页面后,删除扫描到的所有记录。结果看起来如下:
![bdbd046f860b52f48f655ec47ee55ccc.png](https://i-blog.csdnimg.cn/blog_migrate/df8de2a16bd2e19160f6a07e0b68bab8.jpeg)
这里需要两个不同的CNAME
记录。
第一个记录,name,输入www
,Domain name,输入不包含 http:// 的域名,如tutorial.joey.dev
。
第二个记录,name 输入域名,Domain name,输入我们之前提到的 S3 存储桶的终端节点。确保添加这些记录的时候橙色的云是可用的。
![b2b7bae5814d1df3385308f3ad18aa05.png](https://i-blog.csdnimg.cn/blog_migrate/2e197b9f248dac03613baae4aef99331.jpeg)
对照着上图,如果确定设置没有问题,点击 Continue。现在需要把你的域名的 nameservers 从域名注册商指向 Cloudflare 的 nameservers。这涉及到域名注册商网站的一些操作,可以阅读一下相关的文档。
修改完 nameservers,还需要设置一些页面规则。在这之前,先确保 SSL 证书设置正确。在 Cloudflare 控制台,点击域名进入到域名控制台,点击 Crypto 选项卡确保 SSL 的设置是 Flexible。
![4e0c5f0b4d5f8839b9704ad861ef5f2f.png](https://i-blog.csdnimg.cn/blog_migrate/6c0bd0ac29697c95ad106112b78220c0.jpeg)
好事将近。点击 Page Rules 选项卡。这里需要创建两个页面规则,把非 SSL 的流量跳转到 SSL,把 www.joey.dev 跳转到更简短的 joey.dev,在这里合并成了一条规则(按需配置)。
![37abe54f30d6aee14c6d103cf270fde4.png](https://i-blog.csdnimg.cn/blog_migrate/27d4d391cd32871a97890ac6cea8c257.jpeg)
至此,.dev 域名自动跳转到了 SSL,当有人访问 www.domain.dev 时,也会跳转,一箭双雕。
如果你的顶级域名不是 .dev,需要额外配置下面的规则:
![ca8621a81ca59a223b85910ef2fb2d20.png](https://i-blog.csdnimg.cn/blog_migrate/22c4515723745b459f3f6247bda1727b.jpeg)
访问域名。哈哈哈,现在可以访问 SSL 加密版部署在 AWS S3 存储桶集成 cdn 的网站啦。
Happy coding!