GitHub页面和Cloudflare的无限规模和免费Web托管 _Github

本文概述

为什么是静态内容？
GitHub页面
SSL和Cloudflare
善用Cloudflare
总结和安全注意事项
缩放, 无限缩放
摘要, 自白和链接

我有一个秘诀, 可以为客户节省大量资金, 保持他们的网站安全, 并具有内置备份。
秘诀：我将他们的网站设为静态。然后, 我使用GitHub存储和托管它, 并使用Cloudflare通过HTTPS提供服务, 并使其变得更快。我的客户只为他们的域名付费, 但是他们得到的价格比他们讨价还价还要多。

文章图片
为什么是静态内容？静态站点的速度非常快, 因为它不需要服务器处理时间。同样, 通过在git存储库中提交静态资产的代码库, 回滚更改仅是恢复为先前提交的问题。备份是一个麻烦事, 实际上, 你可以从缓存为整个网站提供服务, 这意味着你的服务器几乎不再需要再次处理请求。
建立一个复杂的UI？
随着诸如React及其近亲之类的前端框架的到来, 你可以仅凭HTML / CSS和JavaScript创造神奇的体验。不过, 你必须将后端逻辑与前端分开, 但即使Ruby on Rails现在也提供API模式。
每当我被委托建立网站时, 我都会考虑一个静态网站是否足以满足客户的需求, 在很多情况下, 静态网站已经足够。
你是否想知道我打算使用哪种用例？大！让我们讨论一些你可能需要考虑静态内容的情况, 并说明这种方法如何节省你和客户的时间。
宣传册网站
宣传册网站旨在提供有关业务的信息, 并且在一生中都不会发生重大变化。对于这些网站来说, 动态应用程序显然是过大的, 并且由于这些网站多年未维护, 几乎没有更新(即使有更新), 因此通常很容易成为黑客攻击的目标。
静态HTML模板比CMS同类模板便宜得多, 并且将来更容易进行调整。被要求更新此类网站的开发人员不需要有关特定CMS的专门知识。通常, 我总是为宣传册站点创建静态站点。
奖励：小型企业喜欢不支付经常性的每月托管费。当然, 托管并不是很大的费用, 但是客户不必费心支付域名以外的任何费用, 这很棒。
单页应用
你是否在展示一个依靠现代前端框架的精彩, 酷炫的新应用程序？
你的应用程序基本上已经是静态的。采取一些额外的步骤将所有服务器端逻辑隔离到一个单独的应用程序中, 并获得完全由Cloudflare的缓存提供服务的全部好处。
你的应用程序将始终可用。
网志
这是一个艰难的挑战。很难说服人们可以在博客中使用静态网站, 但请读一下-我还没有深入。
博客无非就是用模板呈现的内容。你完全不需要一个成熟的应用程序来解析每个请求并呈现一个新页面。静态站点非常适合此用例。
考虑杰基尔。你为它提供Liquid模板和Markdown内容, 并将它们组合到一个静态网站中。无需即时处理, 你的博客突然感觉更快。
该工作流程特别有用, 因为GitHub页面支持Jekyll构建。突然, 博客文章可以通过请求请求添加, 并且你的所有内容都存储在版本控制中。非开发人员仍然可以通过Stackedit发布他们在Markdown中的帖子。
实际上, 我现在正在使用Stackedit撰写这篇文章！
另外, 如果你想在博客文章中发表评论, Disqus通过插入一段JavaScript为你提供强大的评论系统。
你正在阅读的页面也使用了Disqus。
GitHub页面 GitHub Pages是GitHub对项目页面的答复, 它使你可以直接从存储库中服务任何静态网站。由于GitHub页面支持自定义域, 因此你可以直接从Git进行部署, 免费在GitHub页面上托管静态网站。
部署到GitHub Pages。
聊够了, 让我们看看它的实际效果！
我继续制作了一个页面的React应用, 该应用可通过公共API获取并显示巴基斯坦卢比的当前汇率。让我们将其部署到GitHub Pages。
首先, 让我们创建一个新的GitHub存储库。

文章图片
新的GitHub Repo
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

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

文章图片
网站托管在GitHub页面上
重要注意事项：

GitHub页面在项目的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指向USERNAME.github.io上GitHub的DNS：

文章图片
将CNAME指向我们的域
注意：请勿将其用于顶点域！将CNAME记录添加到你的域的根目录将禁用MX和TXT记录。仅将其用于你的子域。 Apex域将在后面讨论。
此时, 我们的网站应该在HTTP的自定义域上运行：

文章图片
配置为使用自定义域
【GitHub页面和Cloudflare的无限规模和免费Web托管】重要注意事项：

默认的* .github.io域通过HTTPS提供。
我们的自定义域名是通过不安全的HTTP提供的。
除非你想杀死你的电子邮件, 否则请勿在你的顶点域上使用CNAME记录。

GitHub页面的局限性：

回购文件的大小必须小于1 GB。
网站的文件大小必须小于1 GB。
每月带宽限制为100 GB。稍后我们将绕过此操作。

使用apex域作为自定义域
克服此限制的最简单方法是使用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 欢迎来到后斯诺登时代。我们对政府批准的侦听和黑客的所有最可怕的担忧都得到了证实, 全世界都在争相保护传输中的数据和静止数据。

文章图片
加密所有东西
作为一名现代化的网络管理员, 你应该在你的网站上至少提供SSL, 且没有混合内容。
到了谷歌浏览器将普通的HTTPS网站标记为不安全的地步, 并且Google搜索开始在排名中开始更青睐HTTPS网站。稍后, 我们将讨论更多使前端安全的策略, 但是目前, 我们仅讨论SSL。
幸运的是, 我们现在有了” 加密” 。
这是一个非盈利且完全自动化的证书颁发机构(CA), 可让你以编程方式为你控制的任何域颁发短期的90天SSL证书。使用起来轻而易举；它是开源的；该项目得到了Mozilla和电子前沿基金会等众多公司的支持。
善用Cloudflare Cloudflare是DNS, CDN和DDoS保护服务。
它缓存你的网站, 并通过地理位置临近的服务器将其提供给用户, 从而使你的网站速度更快。这样做还有一个好处, 那就是使你不受GitHub的100GB带宽限制, 因为即使你的网站变得异常流行, 大多数请求也会进入缓存, 而永远不会到达服务器。
最重要的是, Cloudflare提供了一项称为” 通用SSL” 的服务, 该服务会向其CA合作伙伴颁发免费的SSL证书, 因此你可以永久免费获得HTTPS。
为什么选择Cloudflare？
我知道你在想什么：吉拉尼, 你刚刚告诉我” 加密” 功能真棒。你为什么要谈论Cloudflare？好吧, 这全都归结为简单性。
作为一项智力活动, 想象一下在全球范围内设置多个Nginx缓存和反向代理, 为它们提供所有有效的SSL证书, 并从最近的位置为用户提供网页。
即使源服务器没有SSL证书, 这也会导致你的网站通过SSL进行服务, 尽管Cloudflare为你提供了特殊的自签名证书, 你可以将其放在源服务器上, 以确保与Cloudflare服务器之间的连接安全。这就是Cloudflare为你提供的免费计划, 你甚至不必每90天更新一次证书。
作为一名自由职业者, 我吸引了那些想要尽快启动并运行其网站的客户。他们不了解也不关心安全问题, 困扰现代网络或在传输过程中进行加密。一些客户难以理解域名的概念, 当他们不得不支付15美元的年费” 只是为了保持我的网站正常运行” 时, 就会感到烦恼。因此, 请尝试向他们解释为什么他们需要支付大量反向代理费用来保护其在免费托管本身上运行的网站。
设置Cloudflare SSL
让我们再次弄脏双手。首先, 切换到通过Cloudflare路由所有流量：

文章图片
DNS和代理
接下来, 在” 加密” 下, 将SSL级别设置为” 完全” 。

文章图片
将加密切换为完整
强制执行” 自动HTTPS重写” 以杀死混合内容警告。

文章图片
启用自动HTTPS重写
至此, 我们的网站将可以同时使用HTTP和HTTPS。让我们对域中的所有内容强制使用HTTPS。

文章图片
HTTPS无处不在
全部完成。我们的网站应始终通过HTTPS加载, 并在Chrome中显示绿色的” 安全” 等级。

文章图片
总结和安全注意事项我上面没有讨论过几件事, 我想花一点时间澄清几点。
你们之间的精明会指出, 此设置存在一些明显的安全问题, 即没有安全的HTTP标头, 例如：

内容安全策略：从主机白名单中加载脚本和资产, 并且可以禁止内联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存储库中无疑可以使你更轻松地下载网站的副本, 但它不会暴露尚未公开的任何内容。
缩放, 无限缩放本文中提出的想法不仅限于小型应用程序的免费网络托管。
你可以基于现代JavaScript框架构建前端层, 将其连接到基于大型云的后端即服务(BaaS)(如Firebase), 并创建复杂的应用程序而不必担心服务器, 正常运行时间, 或任何其他与基础架构相关的问题。
制作一个新的令人兴奋的基于Web的游戏？看看GameSparks, 一切顺利。
不建议将Github Pages用作可处理高带宽网站的” 标准” 托管服务, 不应这样做。在GitHub Pages上添加Cloudflare CDN可使此解决方案起作用。 Cloudflare不仅仅是免费的SSL服务。这是一家拥有全球CDN的公司, 可保护你的网站免遭激增, 并使GitHub页面上的负载最小化。
摘要, 自白和链接在本文中, 我看起来就像是我将我的React应用程序手动发布到gh-pages上一样。我没有这样的事情。我在master上工作, 当需要进行部署时, 我运行了npm run deploy, 它启动了构建脚本并将构建推到gh页。请查看我的存储库的master分支以了解其工作方式。
外卖
优点：