花费不多的预算即可将您的网站切换到HTTPS

Google的Search Console小组最近向网站所有者发送了一封电子邮件， 警告说Chrome浏览器将从今年10月开始采取措施，以识别和显示具有表单输入内容的非安全网站上的警告。

这是进入我的收件箱的通知：

Google Search Console小组关于HTTPS支持的通知

如果您的站点URL不支持HTTPS，则此通知将直接影响您。 即使您的网站没有表单，也应优先考虑使用HTTPS，因为这只是Google识别不安全网站的策略中的一步。 他们在邮件中清楚地说明了这一点：

新警告是长期计划的一部分，该长期计划将通过HTTP服务的所有页面标记为“不安全”。

适用于具有HTTP支持的网站和具有HTTPS的网站的当前Chrome的UI

问题在于，安装SSL证书并将站点URL从HTTP转换为HTTPS的过程（更不用说编辑现有内容中的所有那些链接和链接图像）听起来像一项艰巨的任务。 谁有时间并且想花钱为此更新个人网站？

我使用GitHub Pages免费托管许多站点和项目，包括一些使用自定义域名的项目。 为此，我想看看是否可以快速，廉价地将站点从HTTP转换为HTTPS。 我最终以小额预算找到了一个相对简单的解决方案，希望对其他人有帮助。 让我们深入探讨。

在GitHub Pages上执行HTTPS

托管在GitHub Pages上的网站具有启用HTTPS的简单设置。 导航到项目的“设置”，然后翻转开关以实施HTTPS。

GitHub Pages设置以在项目上实施HTTPS

但是我们仍然需要SSL

当然，第一步是轻而易举的事，但这并不是我们满足Google对安全网站的定义所需要做的全部事情。 原因是，启用HTTPS设置既不会提供安全套接字层（SSL）证书，也不会在使用自定义域的站点上安装SSL。 使用GitHub Pages提供的默认Web站点的站点在此设置下是完全安全的，但是我们这些使用自定义域的站点必须采取额外的步骤在域级别保护SSL。

这真是令人难以置信，因为SSL虽然不是很昂贵，但又是另一种成本，并且可能在您试图降低成本时不愿承担。 我想找到一种解决方法。

我们可以免费从CDN获取SSL…！

这就是Cloudflare出现的地方。Cloudflare是一个内容交付网络（CDN），它还提供分布式域名服务器服务。 这意味着我们可以利用他们的网络来设置HTTPS。 真正的关键是他们有一个免费计划，使这一切成为可能。

值得注意的是，在CSS-Tricks上有很多不错的帖子都在吹捧CDN的好处。 尽管我们在本文中重点介绍安全性，但CDN是一种有助于减轻服务器负担并提高性能的绝佳方法。

从现在开始，我将逐步完成将Cloudflare连接到GitHub Pages的步骤，因此，如果您还没有，可以注册一个免费帐户并继续。

第1步：选择“ +添加站点”选项

首先，我们必须告诉Cloudflare我们的域存在。 Cloudflare将扫描DNS记录，以验证该域是否存在以及有关该域的公共信息是否可访问。

Cloudflare的“添加网站”设置

步骤2：查看DNS记录

在Cloudflare扫描完DNS记录后，它将把它们吐出来并显示出来供您查看。 Cloudflare表示它认为状态良好，而“状态”列中的橙色云表示该状态良好。 查看报告并确认记录与您的注册服务商的记录匹配。 如果一切正常，请单击“继续”继续。

Cloudflare中的DNS记录报告

步骤3：取得免费方案

Cloudflare会询问您要使用什么级别的服务。 瞧！ 我们可以选择一个免费选项。

Cloudflare的免费计划选项

步骤4：更新名称服务器

此时，Cloudflare为我们提供了其服务器地址，我们的工作是前往购买域名的注册商，并将这些地址粘贴到DNS设置中。

Cloudflare提供了用于更新注册商设置的名称服务器。

做到这一点并非难事，但可能有些令人不安。 您的注册商可能会提供有关如何执行此操作的说明。 例如，以下是GoDaddy的有关为通过其服务注册的域更新名称服务器的说明 。

完成此步骤后，您的域将被有效地映射到Cloudflare的服务器，这将充当域和GitHub Pages之间的中介。 但是，这有点等待中，可能需要Cloudflare最多24小时来处理请求。

如果您使用的是带有子域而不是自定义域的GitHub Pages，则需要执行一个额外的步骤。 转到GitHub Pages设置，然后在DNS设置中添加CNAME记录。 将其设置为指向<your-username>.github.io ，其中<your-username>当然是您的GitHub帐户句柄。 哦，您将需要在GitHub项目的根目录中添加一个CNAME文本文件，实际上是一个名为CNAME的文本文件，其中包含您的域名。

这是一个屏幕截图，其中包含在Cloudflare的设置中添加GitHub Pages子域作为CNAME记录的示例：

将GitHub Pages子域添加到Cloudflare

步骤5：在Cloudflare中启用HTTPS

当然，从技术上讲，我们已经在GitHub Pages中完成了此操作，但是我们也需要在Cloudflare中进行此操作。 Cloudflare将此功能称为“加密”，它不仅强制执行HTTPS，而且还提供了我们一直想要的SSL证书。 但是，我们稍后会谈到。 现在，为HTTPS启用加密。

Cloudflare主菜单中的“加密”选项

打开“始终使用HTTPS”选项：

在Cloudflare设置中启用HTTPS

现在，来自浏览器的所有HTTP请求都将切换到更安全的HTTPS。 我们离让Google Chrome浏览器更快乐又迈进了一步。

步骤6：利用CDN

嘿，我们正在使用CDN来获取SSL，因此我们不妨在使用CDN时充分利用其性能优势。 我们可以通过自动减少文件并延长浏览器缓存的有效期来提高性能。

在设置中选择“速度”选项，并允许Cloudflare自动缩小我们网站的网络资产：

允许Cloudflare缩小站点的Web资产

我们还可以在浏览器缓存上设置到期时间以最大化性能：

在Cloudflare的Speed设置中设置浏览器缓存

通过将过期日期移动到比默认选项更长的时间，浏览器将避免每次访问时都请求网站资源，也就是说，很有可能尚未更改或更新的资源。 这样一来，访客就可以在一个月内重复访问，从而节省了额外的下载量。

步骤7：确保外部资源安全

如果您使用网站上的外部资源（我们中的许多人都这样做），那么也需要安全地提供这些资源。 例如，如果您使用Javascript框架而不是通过HTTP来源提供服务，那么就Google Chrome而言，这会打击我们的安全范围，因此我们需要对其进行修补。

如果您使用的外部资源未提供HTTPS作为源，则您可能要考虑自己托管它。 我们现在有一个CDN，这使得为其提供服务的负担不再存在。

步骤8：激活SSL

哇，我们来了！ 自从我们在GitHub Pages设置中启用HTTPS以来，SSL一直是自定义域和GitHub Pages之间缺少的链接，这是我们能够在我们的网站上激活免费SSL证书的能力，这由Cloudflare提供。

首先，从Cloudflare的Crypto设置中，确保SSL证书处于活动状态：

Cloudflare在“加密”设置中显示了活动的SSL证书

如果证书处于活动状态，请移至主菜单中的“页面规则”，然后选择“创建页面规则”选项：

在Cloudflare设置中创建页面规则

…然后单击“添加设置”，然后选择“始终使用HTTPS”选项：

在整个域上强制使用HTTPS！ 请注意格式中的星号，这一点至关重要。

之后，单击“保存并部署”并庆祝！ 现在，我们在Google Chrome浏览器中拥有一个完全安全的网站，而无需花费很多代码或进行大量更改即可完成此工作。

结论

Google大力支持HTTPS，这意味着前端开发人员比以往任何时候都需要优先考虑SSL支持，无论是针对我们自己的网站，公司网站还是客户网站。 这一举动使我们有更多的动力去做这个举动，而且我们可以通过使用CDN来获得免费的SSL和性能增强的事实，使它变得更加值得。

您是否撰写过有关使用HTTPS的经历的文章？ 在评论中让我知道，我们可以比较笔记。 同时，享受安全快速的网站！

翻译自: https://css-tricks.com/switching-site-https-shoestring-budget/