AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

静态网站生成器将会成为下一个大热门

  • 2015-11-10
  • 本文字数:2325 字

    阅读完需:约 8 分钟

Matt Biilmann 是现代静态网站托管服务Netlify 的联合创始人兼CTO,在开发工具构建、内容管理系统和Web 基础架构方面有10 多年的经验。他从开源目录 StaticGen 及 GitHub 上发现,静态网站生成器发展迅速。像 Nest MailChimp 这样专注于设计的公司现在就使用静态网站生成器构建他们的主要站点。 Vox Media 基于 Middleman 构建了一个完整的发布系统 Carrot 使用自己的开源生成器 Roots 为一些世界上最知名的品牌创建网站。近日,Matt撰文分析了这一现象背后的原因,并预言静态网站生成器将成为下一个大热门。

像Dreamweaver 和FrontPage 这样的桌面应用程序,通过WYSIWYG 编辑器为构建以内容为驱动的网站提供了解决方案。网页被分成了导航栏、标题栏、页脚栏等可重用的部分。在某种程度上,这就是最早的静态网站生成器。但随着发展,这样的工具逐渐无法满足现代网站构建中设计与内容相分离的要求。于是,LAMP 技术栈及诸如 WordPress Drupal Joomla 这样的 CMS 成为主流,Web 进入 2.0 时代。用户不再只是跟随超链接浏览内容,而是可以订购产品、参与社区及创建内容。

但是,动态网站容易遭受蠕虫攻击。据保守估计,超过 70% 的 WordPress 部署容易因为已知漏洞遭受攻击(超过 23% 的 Web 网站以 WordPress 为基础构建)。而几个月前, 1200 万个 Drupal 站点需要紧急打补丁。此外,即使是最为优化的动态网站,其性能也无法同静态网站相比。并且,对于动态网站而言,缓存失效非常难以恢复,尤其是需要充分利用 CDN 的分布式缓存。WordPress 网站并不保证同一个 URL 不会返回不同的 HTML。跟踪页面缓存是否失效非常复杂。在这一点上,静态网站完全不同。它们遵循一个非常简单的缓存约定:在 URL 所对应的文件没有更新的情况下,任何 URL 都会返回相同的 HTML。

近年来,作为传统动态网站基础架构的替代方案,现代静态网站生成器日渐盛行。许多导致静态网站失败的限制已不复存在。现在,每周都会有新的静态网站生成器发布。通常,它们都有如下特点:

  • 模板:允许将网站分解成布局组件和包含组件,以便消除重复,这是静态网站生成器的基本要素之一。

  • 支持 Markdown:Markdown 的兴起是静态网站生成器流行的根本原因之一。所有主要的静态生成器都支持 Markdown,也有一些支持 reStruturedText 或其它标记格式。但通常,它们都允许内容开发人员以结构化的格式编写纯文本文档,保证了内容与设计的分离。

  • 元数据:在文档顶部,通常采用 YAML 格式,如下所示: 标题:文档标题

    分类:类 A 类 B

    # 具体内容

    文档正文

    这使得使用元数据为单个文档作注解非常简单。

  • 资源管道:现在的前端开发几乎总是用到多种构建工具和编译器。大多数现代静态网站生成器都包含了一个资源管道,用于处理资源编译、转译、压缩和打包。

另外,静态网站生成器通常会提供一个命令行 UI,用于构建网站或运行本地服务器。例如, Jekyll 就提供了 jekyll build 命令。

Matt 认为,静态网站生成器技术现在之所以崛起,主要是因为如下几个原因:

  • 浏览器发展:现代浏览器本身就是一个操作系统。它不再只是显示从 Web 上下载的文档,而是能够运行成熟的 Web 应用程序,过去许多需要动态代码的特性现在都可以移到客户端了。例如,可以使用 Disqus Isso 添加评论功能,使用 Twitter 或 Facebook 的 JavaScript 组件集成社交应用,使用 Swiftype 添加搜索功能,等等。基于浏览器的网站插件越来越多,而使用 Ember.js、AngularJS 或 React 构建的现代 Web 应用通常也完全作为静态网站部署。
  • CDN 成为主流:任何人都可以注册 Amazon AWS,并在网站前端设置 CloudFront 服务。 Fastly MaxCDN CloudFlare 等公司提供了小企业也用得起的 CDN 服务。虽然动态网站也能使用 CDN,但缓存失效是个棘手的问题,而静态网站很容易直接部署到 CDN,并可以直接从离用户近的本地缓存提供服务。
  • 高性能不可或缺:越来越多的用户通过移动设备访问网站,网站性能变得前所未有的重要。移动设备不支持多任务,浏览网页时几乎无法做其它事,等待页面加载会格外让人沮丧。然而,动态网站无论如何优化,其性能也永远不如一个托管在 CDN 上的静态网站有保障。此外,静态网站生成减少了许多开发过程中需要考虑的性能问题,例如,无需考虑数据库查询的效率。
  • 构建工具应用广泛:前端开发人员大量地使用构建工具、包管理器和各种编译器、转译器。Grunt 是第一个成为主流的前端构建工具,大多数新项目都有构建步骤。构建工具的普及使得静态网站生成器更自然地成为前端工具集的一部分。

但是,在成为主流之前,静态网站生成器还有一些工作要做。例如,初次选择一个静态网站生成器并开始一个项目非常困难,因为这涉及许多复杂的细节,而且这些工具及其文档都还有很大的改进空间。另外,静态网站生成器距离成熟的主流市场还很远,无法提供同传统动态网站平台一样的服务,最为明显的就是内容编辑。对前端开发人员而言,在文本编译器中直接使用 Markdown 进行编辑并发送到 GitHub 是个理想的工作流程,但对非技术出身的终端用户而言,这种方式并不友好。这是内容编辑同静态网站生成之间存在的一个巨大鸿沟。该问题不解决,静态网站生成就不会成为主流。

所幸,目前已经有一些“非 CMS”方案。例如,The Verge 就一直使用Google Sheets 作为Middleman 的内容层 StaticGen 将 Gist 和 GitHub API 当作数据库用;Carrot使用Contentful 作为一个静态CMS 。Matt 还提到了其它一些内容编辑解决方案,如 Prose.io 、N etlify 的开源 CMS ,感兴趣的读者可以进一步研究。


感谢郭蕾对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群)。

2015-11-10 18:004746
用户头像

发布了 1008 篇内容, 共 423.2 次阅读, 收获喜欢 346 次。

关注

评论

发布
暂无评论
发现更多内容

FreeRTOS记录(七、FreeRTOS信号量、事件标志组、邮箱和消息队列、任务通知的关系)

矜辰所致

FreeRTOS 9月月更 任务通知 事件标志组 邮箱和消息队列

MobPush iOS推送功能最佳实现推荐

MobTech袤博科技

ios 消息推送

三个Spring的问题把我问懵逼了

知识浅谈

spring 9月月更

边缘计算和云计算之间的区别

Java-fenn

Java

多云管理的挑战以及如何克服这些挑战

Java-fenn

Java

web技术分享| 虚拟列表实现

anyRTC开发者

Vue 前端 Web 音视频 虚拟列表

一个不用写代码的案例,来看看Flowable到底给我们提供了哪些功能?

江南一点雨

Java springboot flowable

Java基础知识(一些需要注意的点)

自然

9月日更 Java core 9月月更

不是吧,还有人不知道三目运算符的BUG

自然

Java core 9月月更

如何设计一个面向未来的云原生数据库?

Zilliz

深度学习 数据库 云原生 信息检索 向量数据库

前端食堂技术周刊第 52 期:Babel 7.19.0、Fresh 1.1、React Native 0.70、新的 Web 性能指标 INP

童欧巴

CSS 有了:has伪类可以做些什么?

Java-fenn

Java

【1-2 Golang】Go语言快速入门—数组与切片

Java-fenn

Java

C++ 学习 ------cmath 头文件的源码学习 02

Java-fenn

Java

JavaScript 闭包难点剖析

Java-fenn

Java

TDengine 3.0 的 Update 有何区别?

TDengine

tdengine 时序数据库 企业号九月金秋榜

开源是什么意思?开源软件优缺点有哪些?

行云管家

开源 软件 开源软件 开源协议

2022年云堡垒机采购就选行云管家五大理由

行云管家

云计算 网络安全 数据安全 云堡垒机

供应链金融能否成为汽车行业发展的驱动力?

旺链科技

区块链 产业区块链 汽车 供应链金融 企业号九月金秋榜

聊聊如何利用p6spy进行sql监控

Java-fenn

Java

性能之巅-优化你的程序

Java-fenn

Java

leetcode 1110. Delete Nodes And Return Forest 删点成林(中等)

okokabcd

LeetCode 算法与数据结构

中小企业如何有效应对计算资源的弹性变化需求?

Serverless Devs

华为云为网站安全搭建一道智能高效屏障

科技怪咖

给分库分表的 ShardingSphere 提了个PR,这Bug居然改了

Java全栈架构师

MySQL 数据库 程序员 面试 分布分表

用typescript类型来实现快排

Java-fenn

Java

Java 流处理之收集器

Java-fenn

Java

阿里双十一是怎么做全链路压测的?

程序员小毕

数据库 程序员 架构 面试 系统设计

组装式应用小程序化,小程序容器技术必不可少

Speedoooo

小程序 小程序容器 组装式应用 组装式创新

敏捷发版:让灰度发布像commit一样简单

Speedoooo

小程序 灰度发布 小程序容器 A/B 测试

Java基础之Java枚举

自然

9月日更 Java core

静态网站生成器将会成为下一个大热门_音视频(后端)_谢丽_InfoQ精选文章