使用 GitHub Pages 和 Cloudflare 的无限规模和免费虚拟主机

我有一个秘密可以为我的客户节省大量资金，保证他们的网站安全，并且有内置备份。

秘诀：我将他们的网站设为静态。 然后，我使用 GitHub 存储和托管它，并使用 Cloudflare 通过 HTTPS 为其提供服务，并使其快速运行。 我的客户只为他们的域名付费，但他们得到的比他们讨价还价的要多得多。

为什么是静态内容？

静态站点非常快，因为不涉及服务器处理时间。 此外，通过在 git 存储库中提交静态资产的代码库，回滚更改只需恢复到先前的提交即可。 备份是一个git push ，您基本上从缓存中为您的整个网站提供服务，这意味着您的服务器几乎不需要再次处理请求。

构建复杂的用户界面？

随着前端框架的出现，比如 React 和它的同类，你可以只用 HTML/CSS 和 JavaScript 来创造神奇的体验。 不过，您必须将后端逻辑与前端分开，但即使是 Ruby on Rails 现在也带有 API 模式。

每当我签约建立网站时，我都会考虑静态网站是否足以满足我客户的需求，并且在很多情况下确实如此。

你想知道我想到了什么样的用例吗？ 伟大的！ 让我们讨论一些您可能需要考虑静态内容的情况，并解释这种方法如何可以节省您和您的客户的时间。

宣传册网站

Brochureware 网站旨在提供有关企业的信息，并且在其整个生命周期中不会发生重大变化。 对于这样的网站来说，动态应用程序显然是矫枉过正的，而且由于这些网站多年来无人维护，几乎没有收到任何更新，它们通常很容易成为黑客攻击的目标。

静态 HTML 模板比 CMS 模板便宜得多，而且将来更容易调整。 要求更新此类站点的开发人员不需要有关特定 CMS 的专业知识。 通常，我总是为小册子网站制作静态网站。

奖励：小企业喜欢不支付经常性的每月托管费用。 诚然，托管成本并不高，但客户只需支付域名以外的任何费用，这很棒。

单页应用

您是否正在展示一个依赖现代前端框架的精彩、酷炫的新应用程序？

您的应用程序已经大部分是静态的。 采取一些额外的步骤将任何服务器端逻辑隔离到一个单独的应用程序中，并充分利用 Cloudflare 的缓存为您的应用程序提供服务。

您的申请将随时可用。

博客

这是一个艰难的销售。 很难说服人们静态站点可以用于博客，但请读出来——我还没有走深路。

博客只不过是使用模板呈现的内容。 您根本不需要一个成熟的应用程序来解析每个请求并呈现一个新页面。 静态站点非常适合此用例。

考虑杰基尔。 你给它 Liquid 模板和 Markdown 内容，它会将它们组合成一个静态网站。 无需即时处理，您的博客突然感觉速度明显加快。

这个工作流程特别有用，因为 GitHub 页面支持 Jekyll 构建。 突然之间，可以通过拉取请求贡献博客文章，并且您的所有内容都存储在版本控制中。 非开发人员仍然可以通过 Stackedit 发布他们的帖子，在 Markdown 中贡献帖子。

事实上，我现在正在使用 Stackedit 撰写这篇文章！

此外，如果您想对您的博客文章发表评论，Disqus 通过插入一段 JavaScript 为您提供强大的评论系统。

您正在阅读的这个页面也使用了 Disqus。

GitHub 页面

GitHub Pages 是 GitHub 对项目页面的回应，它允许您直接从您的存储库提供任何静态网站。 由于 GitHub 页面支持自定义域，您可以在 GitHub 页面上免费托管静态网站，直接从 Git 进行部署。

部署到 GitHub 页面。

废话不多说，让我们来看看它的实际效果！

我已经着手制作了一个单页 React 应用程序，该应用程序从公共 API 获取并显示巴基斯坦卢比的当前汇率。 让我们将其部署到 GitHub Pages。

首先，让我们创建一个新的 GitHub 存储库。

GitHub 页面来自一个名为gh-pages的分支，所以让我们为我的项目创建一个。

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

让我们把网站推上去：

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

我们完成了！ 此时，该网站将在https://amingilani.github.io/price-check上提供免费 SSL：

需要注意的重要事项：

• GitHub pages 在项目的gh-pages分支中提供index.html文件
• 该网站在USERNAME.github.io/REPOSITORY-NAME提供服务

自定义域名。

在 GitHub 上提供网站服务很好，但任何体面的网站都需要自定义域名。 幸运的是，GitHub 允许您将自己的域带入聚会！

首先，让我们创建一个特殊的CNAME文件并将我们的域名放在那里。 这将使 GitHub 知道要将哪个域名路由到存储库。

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

其次，让我们将子域的CNAME指向 GitHub 在USERNAME.github.io的 DNS：

注意：请勿将其用于顶级域！ 将CNAME记录添加到您的域的根目录将禁用您的MX和TXT记录。 仅将其用于您的子域。 Apex 域将在后面讨论。

此时，我们的网站应该在 HTTP 上的自定义域上运行：

需要注意的重要事项：

• 默认*.github.io域通过 HTTPS 提供服务。
• 我们的自定义域名是通过不安全的 HTTP 提供的。
• 不要在您的顶级域上使用CNAME记录，除非您想杀死您的电子邮件。

GitHub 页面的限制：

• 存储库的文件大小必须小于 1 GB。
• 网站的文件大小必须小于 1 GB。
• 每月带宽限制为 100 GB。 我们稍后会绕过这个。

使用顶级域作为您的自定义域

解决此限制的最简单方法是使用www作为您的子域，并将所有 HTTP 流量从顶点重定向到www 。 在我的示例中，我会将gilani.me重定向到www.gilani.me ，它指向我的静态站点，但我不喜欢以简单的方式做事。

如果您真的想使用顶级域，请检查您的 DNS 提供商是否允许您设置ANAME记录。 这些（简化）介于CNAME记录之间，因为它们允许您指向域和A记录，因为它们不会使同一区域上的其他记录无效。

没有ANAME ？ 最后一个选项是更改为支持此功能的 DNS 提供商：输入 Cloudflare。 Cloudflare 在顶点域上提供CNAME扁平化，这相当于ANAME记录。 最好立即进行切换，因为我们将在下一节中介绍 Cloudflare。

TLDR ：切换到 Cloudflare 的免费 DNS 并在您的顶级域上设置CNAME 。 他们用他们的CNAME做了一些特别的事情，使它工作。

SSL 和 Cloudflare

欢迎来到后斯诺登时代。 我们对政府批准的窥探和黑客攻击的所有最严重的恐惧都得到了证实，全世界都在争先恐后地保护传输中和静止的数据。

作为现代 Web 管理员，您应该至少在您的网站上提供 SSL，并且没有混合内容。

已经到了谷歌浏览器将普通 HTTPS 网站标记为不安全的地步，而谷歌搜索开始在排名中更青睐 HTTPS 网站。 稍后我们将讨论使您的前端安全的更多策略，但现在，我们将仅介绍 SSL。

幸运的是，我们现在有了 Let's Encrypt。

它是一个非盈利且完全自动化的证书颁发机构 (CA)，可让您以编程方式为您控制的任何域颁发短期 90 天 SSL 证书。 使用起来轻而易举； 它是开源的； 该项目得到了众多公司的支持，包括 Mozilla 和电子前沿基金会。

充分利用 Cloudflare

Cloudflare 是一项 DNS、CDN 和 DDoS 保护服务。

它缓存您的网站，并将其从地理位置附近的服务器提供给用户，从而使您的网站更快。 它还有一个额外的好处，就是让你保持在 GitHub 的 100GB 带宽限制之下，因为即使你的网站变得非常流行，大多数请求也会到达缓存，而永远不会到达服务器。

最重要的是，Cloudflare 提供了一项名为 Universal SSL 的服务，他们会从他们的 CA 合作伙伴那里向您颁发免费的 SSL 证书，这样您就可以免费获得 HTTPS……永远。

为什么选择 Cloudflare？

我知道你在想什么：Gilani，你刚刚告诉我 Let's Encrypt 有多棒。 为什么要谈论 Cloudflare？ 好吧，这一切都归结为简单。

作为一项脑力练习，想象一下在世界各地设置多个 Nginx 缓存和反向代理，为它们提供所有有效的 SSL 证书并从最近的位置为用户提供网页服务。

即使原始服务器没有 SSL 证书，这也会导致您的网站通过 SSL 提供服务，尽管 Cloudflare 为您提供了特殊的自签名证书，您可以将其放在原始服务器上以保护与 Cloudflare 服务器的连接。 这就是 Cloudflare 为您提供的免费计划，您甚至不必每 90 天更新一次证书。

作为一名自由职业者，我得到了希望尽快为他们的业务建立和运行网站的客户。 他们不了解也不关心安全问题、困扰现代网络或传输过程中的加密。 一些客户很难理解域名的概念，当他们不得不支付 15 美元的年费“只是为了让我的网站正常运行”时，他们会觉得很烦人。 因此，请尝试向他们解释为什么他们必须支付一组反向代理来保护他们在免费托管本身上运行的网站。

设置 Cloudflare SSL

让我们再弄脏手。 首先要做的是，切换到通过 Cloudflare 路由所有流量：

接下来，在 Crypto 下，将 SSL 级别设置为“Full”。

强制“自动 HTTPS 重写”以终止混合内容警告。

此时，我们的网站将通过 HTTP 和 HTTPS 运行。 让我们为我们域中的所有内容强制使用 HTTPS。

全做完了。 我们的网站应始终通过 HTTPS 加载，在 Chrome 中具有绿色“安全”评级。

最后的话和安全注意事项

有几件事我没有在上面讨论，我想花点时间澄清几点。

精明的人会指出，这种设置存在一些明显的安全问题，即没有安全的 HTTP 标头，例如：

• Content-Security-Policy ：从主机白名单加载脚本和资产，并且可以禁止内联 js。
• X-Frame-Options ：禁止在 iframe 中加载您的网站。

你是对的。 GitHub 页面甚至 Cloudflare都不允许您自定义 HTTP 标头。 但是，您可以使用 HTML meta标记设置 CSP。

只需将其插入您的网页：

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

然而，目前还没有实用的方法在 GitHub 页面上设置X-Frame-Options标头，这意味着攻击者可以将您的网页加载到特制的iframe中并发起 XSS 攻击。 但是，如果您是专心的，则可以通过要求用户在每个敏感操作时确认他们的密码或 2FA 令牌，或者在每个经过身份验证的请求时传递一个 CSRF 令牌来解决此问题。

一些人主要担心的是，通过使用 GitHub 上的免费公共存储库，您的网站和源代码可供任何想要分叉或下载它的人使用。 所以我认为这里的担忧是错误的。

静态内容不是源代码，因为它在提供给用户之前没有被编译或处理为脚本。 如果他们要运行指向您网站的网络爬虫，您的用户将获得完全相同的网站静态副本。 虽然将代码托管在 GitHub 存储库中确实可以更轻松地下载您网站的副本，但它不会公开任何尚未公开的内容。

缩放，无限缩放

本文中提出的想法不仅限于小型应用程序的免费 Web 托管。

您可以基于现代 JavaScript 框架构建前端层，将其连接到大型基于云的后端即服务 (BaaS)，例如 Firebase，并创建复杂的应用程序而无需担心服务器、正常运行时间、或任何其他基础设施相关问题。

制作一个新的令人兴奋的基于网络的游戏？！ 查看 GameSparks，一切顺利。

摘要、自白和链接

在这篇文章中，我让它看起来好像我手动将我的 React 应用程序发布到了gh-pages 。 我没有做这样的事情。 我在master上工作，到了部署的时候，我运行了npm run deploy ，它启动了一个构建脚本并将构建推送到gh-pages 。 请查看我的存储库的master分支以了解它是如何工作的。

外卖

优点：

• 即时部署
• 轻松协作
• 安全的托管环境

注意事项：

• 无法访问 HTTP 标头
• 轻松下载网站副本
• 需要 GitHub 知识
• 取决于技术供应商

链接：

• 您可以在 amingilani/price-check 找到我的应用程序的源代码
• 这个应用程序在 pricecheck.gilani.me 上发布，应该可以无限期使用。