Jamstack用于小型网站建设

 

什么是 Jamstack

Jamstack 代表 Javascript + API + Markup, 更具体地说是 Javascript Framework + Content APIs from Headless CMS + Markup, 它是一种广泛意义上的架构，设计的目的是让网站开发能够更快、更安全、更简单。

Jamstack 架构理念起源于2015年，由 Netlify 的创始人 Billmann 首先提出。如今，对 Jamstack 有各种不同的实现，但它们有两大共性：

• 预渲染 （Pre-rendering）
• 解耦 （Decouping）

用 Jamstack 实现的网站，网页前端的实现并非一开始就写好的，而是通过 SSG 预先构建，从而生成高度优化的、渲染的静态页面。这种预渲染静态网页的方法，可以很好地结合 CDN，提高性能，减少建站的成本、复杂性和风险。网站开发人员甚至不需要懂HTML/CSS/Javascript，只需要了解 SSG 的简单语法便可以编写网页。

Jamstack 可以利用 Javascript 和 API 同后台 services 通信，这些后台 services 是相关领域更专业的供应商提供的服务，比如搜索引擎、支付系统、认证系统等 。这种方式利用了受信任的工具和框架，而让网站开发者能更专注于网站的业务和产品。这种把网站系统和服务拆分开的方式叫解耦。

下面这张图从开发者的角度描述了 Jamstack 架构的workflow：

Headless CMS 是无头内容管理系统 （翻译出来有点难听😅），它将后端内容（例如创建、管理和存储）与前端功能（例如呈现和发布）分离；无头内容管理系统通过静态站点生成器，生成网页的前端，并推送到 CDN，CDN 部署好之后，用户便可以访问该静态网站。同时，网站通过调用 API 集成了第三方服务，用户可以在网页上使用这些服务。

如果你想了解更多 Jamstack 细节，推荐 Netlify 工程师 Hawksworth 的视频：

 

为什么是 Jamstack

我们的初衷是想建立小型网站，那为什么选择 Jamstack 框架呢 ？先看看 Jamstack 有哪些优点：

• 安全性：它对数据库几乎没有依赖，因为内容由静态页面提供；
• 性能：因为它专注于前端的构建和交付，没有后端的处理，比如内容或图像这类资源，通常已经部署在 CDN 中，易于缓存，所以可以快速响应和处理请求。
• 成本低：Jamstack 不需要自行负责建立服务器、带宽、网路安全，而仅仅依赖 CDN，所以成本低廉。
• 开发简单：前面提到过，开发人员甚至不需要懂 HTML/CSS/Javascript，只需要了解 SSG 语法，便可以开发网站。

Jamstack 也有缺点：

• 仅适合以展现为主的网站，不适合业务逻辑很强的动态内容，比如库存管理、订单管理这些。
• 构建频繁，内容的每次更新都需要重新构建生成网页。
• 部分功能依赖第三方 API。

好在我们想建立小型网站，恰恰可以利用 Jamstack 的优点，而忽视它的缺点。小型网站，最主要考虑的是成本低和开发简单，特别是对于非计算机科班出身、对网页前端技术不了解的人，Jamstack 也可以满足他们的需求。小型网站一般也不需要复杂的业务逻辑，只需要内容展现，所以静态页面可以满足；小型网站对于频繁构建也不敏感，况且现在可以利用很多免费的内容托管系统和低廉的 CDN 实现一键构建和部署；另外也很少依赖第三方 API 服务，虽然有些第三方服务可以给网站增色，但并非必须。

为什么是 Hugo

既然 Jamstack 是广义上的架构，那我们到底应该选取哪种站点生成器来实现小型网站呢？前言部分已经介绍过，Jamstack 官网上专门列出了支持 Jamstack 的站点生成器。注意，罗列的生成器既包括静态站点生成器，也包括其它类型的生成器如动态站点生成器、文档站点生成器等。

其中，最流行的三款静态站点生成器是：Hexo、Jekyll 和 Hugo。它们有各自的特点：

Hexo

• 实现语言：Javascript，Node.js；
• 在 Github Pages 部署简单；😄
• 中文社区；😄
• 主题丰富；😄
• 构建速度偏慢；😟
• 国际化支持较差；😟

Jekyll

• 实现语言：Ruby
• Github 官方支持；😄
• 使用简单；😄
• 构建速度偏慢；😟

Hugo

• 实现语言：Go
• 构建速度快；😄
• 安装简单，依赖少；😄
• 网站国际化支持好；😄
• 主题不够丰富；😟

最终选择

截止当前，Github上，stars 数量排行，Jekyll 最多，其次 Hugo。Hugo 起步晚，但已经超过了 Hexo，直逼 Jekyll。

关于构建速度，据说有人做过测试，构建生成585篇文章，三个 SSG 各自需要的时间为：

• Jekyll：15.9 s
• Hugo：4.9 s
• Hexo：介于两者之间

原因在于 Hugo 使用 Go 语言是一种编译型语言，速度非常快，而 Jekyll 使用 Ruby 编写，Hexo 使用 Node.js 编写，Ruby 与 Nodejs 都是面向对象的高级解释型语言，执行效率比编译型语言要低。

本人最终选择了 Hugo，主要因为它构建快、依赖少，至于主题，有看得顺眼的就行，是不是丰富无所谓，毕竟不可能经常换主题。

先这样，至于 Hugo 建站的具体步骤，后面再慢慢聊。

参考：

https://gohugo.io/about/what-is-hugo/

https://jamstack.org/generators/

---

- 全文完 -