如何在预算有限的情况下将您的网站切换到 HTTPS

Avatar of Christopher Schmitt
Christopher Schmitt

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!

谷歌的 Search Console 团队 最近向网站所有者发送了一封电子邮件,其中包含 警告,警告称从今年 10 月开始,Google Chrome 将采取措施识别并显示对非安全网站的警告,这些网站包含表单输入。

以下是发送到我的收件箱的通知

来自 Google Search Console 团队关于 HTTPS 支持的通知

如果您的网站 URL 不支持 HTTPS,那么此通知将直接影响您。 即使您的网站没有表单,也应将迁移到 HTTPS 作为一项优先事项,因为这只是谷歌识别不安全网站策略中的一个步骤。 他们在消息中明确说明了这一点。

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

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

问题在于,安装 SSL 证书并将网站 URL 从 HTTP 迁移到 HTTPS 的过程(更不用说编辑现有内容中的所有这些链接和链接图像)听起来像一项艰巨的任务。 谁有时间和愿意花钱来更新个人网站以实现这一点?

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

在 GitHub Pages 上强制使用 HTTPS

托管在 GitHub Pages 上的网站有一个简单的设置可以启用 HTTPS。 导航到项目的“设置”,并将开关切换到“强制使用 HTTPS”。

GitHub Pages 设置,用于在项目上强制使用 HTTPS

但我们仍然需要 SSL

当然,第一步轻而易举,但它并非满足谷歌对安全网站定义的全部内容。 原因是,启用 HTTPS 设置既不提供也不安装安全套接字层 (SSL) 证书到使用 自定义域名 的网站。 使用 GitHub Pages 提供的默认网络地址的网站通过该设置完全安全,但我们这些使用自定义域名的用户必须在域级别采取额外的步骤来确保 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 的服务器,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,所以我们也可以利用它的性能优势。我们可以通过自动缩减文件来加快性能,并延长浏览器缓存过期时间。

在设置中选择“速度”选项,并允许 Cloudflare 自动缩减我们网站的 Web 资源。

允许 Cloudflare 缩减网站的 Web 资源。

我们还可以设置浏览器缓存的过期时间,以最大限度地提高性能。

在 Cloudflare 的速度设置中设置浏览器缓存。

通过将过期日期推迟到比默认选项更长的时间,浏览器将避免在每次访问时请求网站资源——也就是说,那些不太可能发生更改或更新的资源。这将为访问者节省一个月的重复访问时的额外下载。

步骤 7:使外部资源安全

如果你在你的网站上使用外部资源(我们中的许多人都会使用),那么这些资源也需要以安全的方式提供。例如,如果你使用一个 Javascript 框架,而它不是从 HTTP 源提供,那么就 Google Chrome 而言,这会破坏我们安全的保障,我们需要修补它。

如果你使用的外部资源没有提供 HTTPS 作为源,那么你可能需要考虑自己托管它。我们现在有了 CDN,这使得提供它的负担不再是一个问题。

步骤 8:激活 SSL

哇,我们到了!自从我们在 GitHub Pages 设置中启用 HTTPS 以来,SSL 一直是我们自定义域名和 GitHub Pages 之间的缺失环节,在这里,我们可以激活我们网站上的免费 SSL 证书,这得益于 Cloudflare。

从 Cloudflare 中的加密设置开始,首先确保 SSL 证书处于活动状态。

Cloudflare 在加密设置中显示了一个活动的 SSL 证书。

如果证书处于活动状态,请转到主菜单中的“页面规则”,并选择“创建页面规则”选项。

在 Cloudflare 设置中创建页面规则。

…然后点击“添加设置”,选择“始终使用 HTTPS”选项。

强制整个域使用 HTTPS!请注意格式中的星号,这是至关重要的。

之后点击“保存并部署”,然后庆祝吧!我们现在拥有了一个在 Google Chrome 眼中完全安全的网站,而且我们没有修改太多代码,也没有花太多钱。

总结

Google 推动 HTTPS,这意味着前端开发人员比以往任何时候都更加需要优先考虑 SSL 支持,无论是为了我们自己的网站、公司网站还是客户网站。此举为我们提供了一个做出改变的额外动力,而且我们能够通过使用 CDN 获得免费 SSL 和性能增强,这使得它更有价值。

你是否写过关于迁移到 HTTPS 的冒险经历?请在评论中告诉我,我们可以互相交流。同时,享受一个安全快捷的网站!