我有个秘密，可以帮我的客户省很多钱, 确保网站安全, 并且有内置备份.

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

为什么是静态内容?

静态站点非常快，因为不需要服务器处理时间. 也, 通过在git存储库中提交静态资产的代码库, 回滚更改只是恢复到以前的提交. 备份是一种 git推 走了, 实际上，你可以从缓存中提供整个网站, 这意味着您的服务器几乎不必再次处理请求.

构建复杂的UI?

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

每当我接到建网站的合同, 我考虑一个静态站点是否足以满足我的客户的需求, 在很多情况下, 它是.

您是否想知道我脑子里有哪些用例? 伟大的! 让我们来讨论一些可能需要考虑静态内容的情况, 并解释这种方法如何节省你和你的客户的时间.

Brochureware网站

宣传品网站旨在提供有关企业的信息, 在他们的一生中不会有太大的改变. 对于这样的站点，动态应用程序显然是多余的, 由于这些网站多年无人维护, 收到几, 如果有任何更新, 它们通常是黑客容易攻击的目标, well, hack.

静态HTML模板比相应的CMS模板便宜得多, 而且它们在未来更容易调整. 要求更新此类网站的开发人员不需要对特定CMS有专门的了解. 作为一个规则，我总是为宣传品网站制作静态网站.

奖金: 小型企业喜欢不支付每月的托管费用. 授予, 托管不是一个巨大的成本, 但客户只是不需要麻烦支付任何东西，除了域名, 这很好.

单页面应用程序

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

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

您的应用程序将随时可用.

博客

这很难让人接受. 很难让人们相信静态站点可以用于博客, 但请把我的话读出来——我并没有做得太过火.

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

考虑 化身. 你给它 液体 模板和Markdown内容，并将它们组合成一个静态网站. 不需要即时处理，您的博客突然感觉快多了.

这个工作流程特别有用，因为GitHub页面支持化身构建. 突然, 博客文章可以通过pull请求来贡献, 所有的内容都存储在版本控制中. 非开发人员仍然可以在Markdown中发表文章 Stackedit.

事实上，我现在正在使用stackkedit来撰写这篇文章!

另外，如果你想在你的博客上留言， Disqus 通过插入一段JavaScript，为您提供了一个强大的注释系统.

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

GitHub页面

GitHub页面是GitHub对项目页面的回答, 它允许您直接从存储库中提供任何静态网站. 因为GitHub页面支持自定义域, 你可以在GitHub页面上免费托管一个静态网站, 直接从Git部署.

部署到GitHub页面.

说得够多了，让我们看看实际情况!

我已经做了一个 单页React应用 它从一个公共API获取并显示巴基斯坦卢比的当前汇率. 让我们将其部署到GitHub页面.

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

GitHub页面从一个名为 gh-pages 让我们为我的项目创建一个.

$ git checkout -b h-pages
切换到新分支“h-pages”

让我们把网站推高:

$ git remote add origin git@github.com: amin吉拉尼 /核对价格.git
$ git推 -u origin -page
计数对象:27，完成.
增量压缩使用多达8个线程.
压缩对象:100%(25/25)，完成.
写作对象:100% (27/27)，28.67 KiB | 0字节/秒，完成.
总计27(增量3)，重用0(增量0)
远程:解决delta: 100%(3/3)，完成.
到github.com: amin吉拉尼 /核对价格.git
 * [new 分支]      gh-pages -> gh-pages

完成了! 在这一点上，网站将可在 http://amin吉拉尼.github.io /核对价格 使用免费SSL:

需要注意的重要事项:

• GitHub页面提供 指数.html 文件在项目的 gh-pages 分支
• 该网站服务于 用户名.github.io /存储库名

自定义域名.

服务网站的GitHub是好的，但任何像样的网站需要一个自定义域名. 幸运的是，GitHub允许您 带上你自己的域名 去参加派对!

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

$ echo ' priccheck '.吉拉尼.me' > CNAME
$ git add .
$ git commit -m '添加自定义域'
...
$ git推
...

第二，让我们指出a CNAME 为我们的 子域名 到GitHub的DNS地址 用户名.github.io:

警告: Do NOT 将其用于顶域! 添加一个 CNAME 记录到根您的域将禁用您的 MX and TXT 记录. 仅对子域使用此方法. 稍后将讨论顶点域.

在这一点上，我们的网站应该在我们的自定义域名上运行HTTP:

需要注意的重要事项:

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

限制 GitHub页面:

• Repos的文件大小必须小于1gb.
• 网站的文件大小必须小于1gb.
• 每月带宽限制为100gb. 我们稍后会绕过这个.

使用顶点域作为自定义域

绕过此限制的最简单方法是使用 www 作为子域，并将所有HTTP流量从顶点重定向到 www. 在我的例子中，我将重定向 吉拉尼.me to www.吉拉尼.me，指向我的静态站点，但我不喜欢简单的方式.

如果你真的想用顶域，检查一下你的 DNS 提供程序允许您设置 家乡 记录. 这些是(简化的)中间 CNAME 记录，因为它们让你指向域名和 A 因为它们不会使同一区域上的其他记录无效.

No 家乡? 最后一个选项是更改为支持此功能的DNS提供商:输入Cloudflare. Cloudflare提供 CNAME 压扁 在顶域上，它等价于an 家乡 记录. 最好现在就进行转换，因为我们将在下一节中介绍Cloudflare.

TLDR: 切换到Cloudflare的免费DNS并设置一个 CNAME 在顶点域上. 他们会做一些特别的事情 CNAME 这样就行得通了.

SSL和Cloudflare

欢迎来到后斯诺登时代. 我们最担心的政府批准的窥探和黑客行为都得到了证实, 全世界都在争先恐后地保护传输和静止的数据.

作为一名现代web管理员，您至少需要提供 SSL 在你的网站上，有 无混合成分.

它已经到了这样的地步 Google Chrome将纯HTTPS网站标记为不安全的 and 谷歌搜索开始在他们的排名中更青睐HTTPS网站. 稍后我们将讨论使前端安全的更多策略, 但是现在, 我们将只讨论SSL.

幸运的是，我们现在做到了 让我们加密.

它是一个非营利性和完全自动化的证书颁发机构(CA)，允许您以编程方式为您控制的任何域颁发90天的短期SSL证书. It’s a breeze to use; it’s open source; and the project is backed by a plethora of companies, 包括Mozilla和电子前沿基金会.

善用Cloudflare

Cloudflare是一个DNS、CDN和DDoS保护服务.

它会缓存你的网站, 并从地理位置较近的服务器向用户提供服务, 让你的网站更快. 它还有一个额外的好处，让你保持在GitHub的100GB带宽限制下，因为即使你的网站变得疯狂流行, 大多数请求都会命中缓存, 并且永远不会到达服务器.

除此之外，Cloudflare还提供了一项名为 普遍的SSL 他们会从他们的CA合作伙伴那里给你颁发免费的SSL证书, 所以你可以永远免费获得HTTPS.

为什么Cloudflare?

我知道你在想什么:吉拉尼，你刚刚告诉我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设置CSP meta tag.

简单地插入到您的网页:

然而，目前还没有切实可行的方法来设置 X-Frame-Options 这意味着攻击者可以将你的网页加载到一个特制的 iframe 发动跨站攻击. 如果你很专注, 虽然, 您可以通过要求用户在每个敏感操作时确认其密码或2FA令牌来解决此问题, 或者通过传递 CSRF令牌 每次经过身份验证的请求.

一些人主要担心的是，通过使用GitHub上的免费公共存储库, 你的网站和源代码对任何想要分叉或下载的人都是可用的. 所以我认为这种担心是多余的.

静态内容不是源代码，因为它在提供给用户之前没有作为脚本进行编译或处理. 你的用户将得到完全相同的静态副本的网站，如果他们运行一个网络爬虫指向你的网站. 虽然在GitHub存储库中托管代码肯定会使下载您的网站副本更容易, 它不会暴露任何尚未公开的东西.

扩展，无限扩展

本文中提出的想法并不局限于小型应用程序的免费web托管.

您可以基于现代JavaScript框架构建前端层, 将其连接到大规模的基于云的后端即服务(BaaS), like 重火力点, 创建复杂的应用程序而不用担心服务器, 正常运行时间, 或者任何其他基础设施相关的问题.

制作一款全新的网页游戏?! 看看 GameSparks，你就可以走了.

摘要、忏悔和链接

在本文中，我让它看起来像是我手动将React应用程序发布到 gh-pages. 我没有这么做. 我研究过 主 到了部署的时候，我就跑了 NPM运行部署 哪个启动了构建脚本并将构建推到 gh-pages. 请参阅 主 分支，看看它是如何工作的.

外卖

优点:

• 即时部署
• 容易合作
• 安全的托管环境

警告:

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

链接:

• 你可以找到我的应用程序的源代码 amin吉拉尼 /核对价格
• 这个应用程序是实时的 pricecheck.吉拉尼.me 而且应该可以无限期使用.