低成本将你的网站切换为 HTTPS

时间 2019-11-17

原文原文链接

原文地址：Switching Your Site to HTTPS on a Shoestring Budget

原文做者：CHRISTOPHER SCHMITT

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：lsvih

校对者：ahonn, Cherry

低成本将你的网站切换为 HTTPS

Google 的 Search Console 小组最近向全部站长发了一封 email，警告 Google Chrome 将从 10 月起，在包含表单但没有使用安全措施的网站中显示警告信息。css

下图为我收件箱里的通知：前端

图为 Google Search Console 团队发来的关于 HTTPS 支持的通知

若是你的网站还不支持 HTTPS，那这个通知就直接与你相关。即便你的网站并无用到表单，也应当早日将网站迁移为 HTTPS。由于如今这项措施只不过是 Google“标识非安全网站”策略的第一步。他们在消息中明确表示：react

这个新的警告仅仅是将全部经过 HTTP 提供服务的页面标记为“不安全”的长期计划的一部分。android

当前 Chrome 用以表示支持 HTTP 的站点以及支持 HTTPS 站点的 UI 设计

问题在于：安装 SSL 证书、将网站 URL 从 HTTP 转换为 HTTPS、以及将全部连接和图像连接等都换成 HTTPS 并非一项简单的任务。谁会为了本身的我的网站去费时费钱呢？ios

我使用 GitHub Pages 免费托管了一系列的网站和项目，其中的一部分还使用了自定义域名。所以，我想看看我可否快速、低成本地将这些网站从 HTTP 迁移为 HTTPS。最后我找到了一种相对简单且低成本的方案，但愿可以帮助到大家。下面让咱们来探究一下这种方法吧。git

对 GitHub Pages 强制启用 HTTPS

托管在 GitHub Pages 上的网站能够经过设置很方便地启用 HTTPS。进入项目设置页面，勾上“Enforce HTTPS”便可。github

但咱们仍然须要 SSL

第一步十分的简单，但它并不符合 Google 对安全网站定义的要求。咱们启用了 HTTPS 设置，可是没有为使用自定义域名的网站安装、提供 SSL 证书。直接使用 GitHub Pages 提供的网址的站点已经彻底符合要求了，可是使用自定义域名的站点必需要进行一些额外的步骤，让其在域名的层面上使用安全证书。web

还有个问题，SSL 证书虽然并不贵，但也须要花一笔钱，在你尽量但愿下降成本时可不想为此增长花费。因此得找个办法解决这个问题。后端

咱们能够经过 CDN 免费试用 SSL！

在这儿就不得不提 Cloudflare 了。Cloudflare 是一个内容分发网络（CDN）提供商，同时它也提供分布式域名服务，这也意味着咱们能够利用他们的网络来设置 HTTPS。使用这个服务真正的好处在于他们提供了免费的方案，让这一切成为可能。浏览器

另外，值得一提的是在 CSS-Tricks 论坛里也有许多帖子描述了使用 CDN 的好处。虽然这篇文章中主要探讨的是安全性问题，但其实 CDN 除了能帮你使用 HTTPS 以外，仍是下降服务器负载、提高网站性能的绝佳方式。

在下文中，我将简述我使用 Cloudflare 链接 Github Pages 的步骤。若是你尚未 Cloudflare 帐号，你能够点击这儿注册帐号再跟着步骤操做。

第一步：选择“+ Add Site”选项

首先，咱们须要告诉 Cloudflare 咱们使用的域名。Cloudflare 将会扫描 DNS 记录，以验证域名是否存在，并检查域名的公开信息。

第二步：查看 DNS 记录

Cloudflare 扫描 DNS 记录后会将结果展现出来供你查看。若是 Cloudflare 认为这些信息符合要求，就会在“Status”列中显示一个橙色的云的图标。你须要检查这份报告，确认其中的信息与你在域名注册商中留的信息相符，若是没问题的话，点击“Continue”按钮继续。

第三步：获取免费方案

Cloudflare 会询问你须要哪一种级别的服务。瞧~你能够在这儿选择“免费”选项。

第四步：更新域名解析服务器（NS 服务器）

这一步中，Cloudflare 给咱们提供了其服务器地址，咱们要作的就是将这个地址粘贴到本身的域名注册商中的 DNS 设置里。

这一步其实并不困难，但你可能会有些疑惑。你的域名注册商可能会提供这一步的操做指南。例如点此查看 GoDaddy 的指南，了解如何经过他们的服务更新域名解析服务器。

完成这一步以后，你的域名将会很快被映射到 Cloudflare 的服务器上，这些服务器将成为域名与 Github Pages 之间的中间层。不过，这一步须要耗费一些时间，Cloudflare 可能须要 24 小时来处理这个请求。

若是你没有用主域名，而是用了子域名来使用 GitHub Pages，则须要额外进行一步操做。打开你的 GitHub Pages 设置页面，在 DNS 设置中添加一条 CNAME 记录，设置它指向 <your-username>.github.io，其中 <your-username> 是你的 Github 帐号。此外，你须要在 GitHub 项目的根目录下添加一个文件名为 CNAME 的无后缀名文本文档，其内容为你的域名。

下面的屏幕截图为在 Cloudflare 设置中将 GitHub Pages 子域名添加为 CNAME 记录的例子：

第五步：在 Cloudflare 中启用 HTTPS

如今，咱们从技术上说已经为 GitHub Pages 启用了 HTTPS，可是咱们还须要在 Cloudflare 中作一样的事。Cloudflare 把这个功能称为“Crypto”，不只强制开启了 HTTPS，还提供了咱们求之不得的 SSL 证书。如今先让咱们为 HTTPS 启用 Crypto，以后的步骤中咱们会获取到证书的。

开启“Always use HTTPS”选项：

此时，任何来自浏览器的 HTTP 请求都会被切换成更安全的 HTTPS。咱们离“取悦” Google Chrome 又进了一步。

第六步：使用 CDN

咱们如今正在用 CDN 来获取 SSL 证书，因此咱们还能够利用它的性能优点来获得更多的好处。咱们能够经过自动压缩文件、延长浏览器缓存过时时间来提高网站性能。

选择“Speed”选项，容许 Cloudflare 自动压缩网站资源：

咱们还能够经过设置浏览器缓存过时时间来最大化地提高性能：

将过时时间设置为比默认选项更长，可让浏览器在访问网站时再也不须要每次都去请求那些没有变动过的网站资源。这将让访客在一个月内再次访问你的网站时节省额外的下载量。

第七步：使用安全的外部资源

若是你的网站还使用了一些外部资源（咱们不少人都这么作），那么还须要确保这些外部资源是安全的。例如，若是你使用了一个 Javascript 框架，但没有使用 HTTPS 源，那么 Google Chrome 将会认为其下降了咱们网站的安全性，所以咱们须要对其进行改进。

若是你使用的外部资源不提供 HTTPS 源，那么你能够考虑本身对其进行托管。反正咱们如今已经有了 CDN，作托管服务的负载并不成问题。

第八步：激活 SSL

已经作到这一步啦！咱们已经在 GitHub Pages 设置中开启了 HTTPS，如今还缺乏自定义域名与 GitHub Pages 的链接证书。Cloudflare 提供了免费的 SSL 证书，咱们能够在网站中使用它。

打开 Cloudflare 的 Crypto 设置页面，确认 SSL 证书处于激活状态：

若是证书处于激活状态，在主菜单中切换到“Page Rules”页面，选择“Create Page Rule”选项：

而后点击“Add a Setting”，选择“Always use HTTPS”选项：

点击“Save and Deply”，恭喜你！如今，咱们拥有了一个在 Google Chrome 眼中彻底安全的网站，而且在迁移的过程当中咱们并不须要接触、修改不少代码。

总结

Google 这样推动 HTTPS 意味着前端开发者们在开发本身的网站、公司网站、客户网站的时候须要优先考虑 SSL 支持。这一举措将会促使咱们将站点向 HTTPS 迁移。而使用 CDN 可让咱们使用免费的 SSL 并提高网站性能，如此超值的事何乐而不为呢？

你记录过迁移到 HTTPS 的经历吗？在评论里留言你的迁移方法，让咱们相互对比吧。

享受你的既安全又快速的网站吧！

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。