静态网站生成器将是下一个大事件 Modern Static Website Generators

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看235 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 235|回复: 2
收起左侧

静态网站生成器将是下一个大事件 Modern Static Website Generators

[复制链接]
女汉子 发表于 2016-7-26 11:51:11 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
本帖最后由 女汉子 于 2016-7-26 11:59 编辑

StaticGen,我们有一个关于静态站点生成器的开源目录,在这一年多我们追踪了超过一百个生成器。在那段时间里,我们见证着这些项目的数量和流行度在 Github 上高涨得不可思议——从只有 50 个到超过 100 个,直到有关静态站点的库获得了超过 10 万的 Stars。

像 Nest 和 MailChimp 这样专注于设计的知名公司,已经将静态站点生成器用于其主网站的开发。 Vox Media 围绕 Middleman 建立了一整套系统Carrot,一个大型的纽约中介、 Vice 帝国的一部分,用它自己的开源生成器 Roots 给世界的一些大品牌建站。一些 Google 的产品,像 “A Year In Search” 和 “Web Fundamentals” 也是静态的。

静态网站生成器将是下一个大事件 1

静态网站生成器将是下一个大事件 Modern Static Website Generators - 敏捷大拇指 - 静态网站生成器将是下一个大事件 1

StaticGen’s Graph of growth over the last year.

静态站点不是新事物,可以追溯到 Web 伊始之时。为什么会有爆发性的关注度?发生了什么?为什么是现在?




1、静态是什么时候产生的

第一个网站—— Tim Berners-Lee 的万维网处女页——就是静态的。那时的站点仅仅由一个文件夹下的一组 HTML 文档组成,而且HTML文件只包含18种标签。浏览器只是简单的文本导航器,它从服务器端抓 HTML,终端用户可以由超链接导航。Web基本上是静态的。

随着浏览器和 HTML 的演进,我们逐渐看到了纯静态站点的限制。

起初,网站只是无样式纯文档,但很快便被精心设计,带有图形头和复杂导航。从那时开始,管理自己网页的每个文档失去意义,模版语言进入大众视野。

显然,使用 HTML 作结构、CSS 作设计,无法抽象内容(像故事板、产品、零挂件等等)与设计分离的理念。

几乎同一时间,基于 SQL 的关系型数据库开始成为主流。对于许多在线公司而言,数据库成为了他们存储内容的圣地,由警惕的长胡子数据库管理员看守着。

像 Dreamweaver 和 FrontPage 一类的桌面应用也有建立内容驱动型网站的解决方案——使用所见即所得的编辑器——页面可以被分离成可重用组件,例如导航、头部、尾部。这些内容很大程度上也能被存到数据库中。虽然它们有很大的缺陷,从某种程度上讲,这就是最原始的静态站点生成器:从模版、部件、媒体库甚至是 SQL 数据库获得资源创建站点,通过 FTP 发布静态文件。直到 2004 年,我才得以在大型内容网站工作一段时间,成千上万的页面在不同的编辑组传播,全都通过 Dreamweaver 管理。

即使 Dreamweaver 在某种程度上能够与数据库整合,它却不具备内容模型,没有内容与形式分离的概念,无法将内容与形式用合适的工具独立编辑。

最主流的解决方案是 LAMP 栈和像 WordPress 、 Drupal 和 joomla 这样的 CMS ,这些在推动 Web 2.0 演进有着不可或缺的作用。 2.0 时代许多网站的关键功能是用户生成内容。用户从点击超链接变成了订购商品、参与社区,以及创建内容。




2、动态问题

我 15 年前第一次建立动态站点时,我遵循着 MySQL 文档的 LAMP 栈手册。这样建立的站点,每次有访客时都要执行一次这种流程,意识到这些时我简直疯了!

Web 服务器尽快把我的代码加载到 PHP 解释器里,然后打开数据库连接池,来回发送查询语句,使用模版中的数据并将文本字符串拼接到 HTML 文档中,之后呈现给访客。太神奇了!

不得不承认,几年之后当我再访问这个网站时就没那么有趣了。整个网页都被黑客的消息替换了,指出了配置中的安全漏洞。他很宽宏大量,只是在网站上涂涂画画,而不是把它当作传播恶意软件的媒介。

动态网站的结构推动 Web 前行,但也打开了蠕虫的蜜罐。保守估计,当下超过 70% 的 WordPress 源很容易受到已知的漏洞利用(同时 WordPress 驱动着超过 23% 的 Web 站点)仅仅几个月前,一千两百万的 Drupal 站点需要紧急补丁,任何在漏洞通知7小时内没打补丁的站点都该考虑是不是被注入了恶意软件…不到一周,我从社交媒体到站点的超链接就成了“数据库连接错误”。规模化动态网站的成本很高,想要保持站点的活力,动态站点所在的代理不得不千般戒备网络攻击。否则的话就得殊死挣扎让网站重新上线(往往发生在非工作时间)。

我们为跑在服务器上每个请求的复杂代码付了高额费用——要是不必这么复杂,就不用再花一分钱了。




3、动态网站和缓存

有时,我们尝试用缓存解决问题。没有 WP Super Cache 这类插件的话,那些知名的 WordPress 站点不可能跑起来。大型站点无疑要依赖其上层的代理缓存,比如 Varnish 、 Nginx 和 Apache Traffic Server 。

然而缓存的错误是臭名昭著的,并且即使是相当优化的动态站点通常也会比静态的解决方案慢几倍。

Smashing Magazine 显然是由最关注性能的团队做的,大体上是深层性能优化过的。所以,为这篇文章我做了一个实验。我用 HTTrack 抓了这个网站的一级拷贝,然后把静态版本部署到了 Netlify 上,后者是一个基于内容分发网络(CDN)的静态主机平台。我除了用深度 CDN 整合把静态版本部署到主机上之外,没做任何优化。

静态网站生成器将是下一个大事件 2

静态网站生成器将是下一个大事件 Modern Static Website Generators - 敏捷大拇指 - 静态网站生成器将是下一个大事件 2

Smashing Magazine 比大部分网站都快,但所有请求是一个数据中心承载的。

接着我又跑了几个测试看看第一比特传输时间和主页 index.html 下载完成所用时间。这是 Sucuri’s super-useful performance tool 的结果。

哪怕和高度优化的动态网站相比,静态版本平均要快六倍以上。诚然,不是每个静态主机都有这种差异。但不经过手动配置,这种基于 CDN 缓存的动态网站是做不出来的,至少没有相当变态的缓存神器是不行的。

静态网站生成器将是下一个大事件 3