技术前线，关注最前沿的技术，概念及产品
本周，我和大家聊下Jamstack。Jamstack并非一个具体的技术，而是一个概念。
Jamstack是为了解决网页中的一部分需求而存在。
我们都知道，Web网页是现在主流的UI形式，无论是在桌面还是移动端，Web网页都是必不可少的。而对于Web，其本质上是区分为静态网页与动态网页两种模式。
这两者模式各有优缺点的。而Jamstack则是一种试图混合两者各自的优势的解决方案。
Web网页，动静之分
如果内容都是以HTML静态资源提供，内容都固化在网页中的，这种为静态网页。
而与之相对应的，内容由后台服务提供，访问网页的时候从后端实时查询出来的，这种我们称之为动态网页。
显而易见，现今的时代，完全的纯静态资源已经很少了，所以大部分网页的内容其实都是从后端实时查询出来的，也就是动态方式。
但静态网页相对动态网页，有着天然的优势，包括但不限于：
对系统资源的占用极少
如果内容是以纯静态方式提供，则意味着它们对系统资源的占用极少，与动态方式需要部署一个后端服务并需要时时查询而比较而言，静态方式对资源的占用几乎可以忽略不计
易于缓存
CDN这种技术，本质是就是缓存静态资源，静态网页与CDN整合的话，可以极大的提高不同地方不同网络的访问速率。
虽然近些年，CDN也开发一些动态加速的概念，但与静态加速相比，其效果仍差距较大，且实现较为复杂
更易于搜索
搜索引擎当然对静态HTML的收录与搜索更方便，使用静态网页对搜索引擎更友善。
当然，静态网页的缺点也是非常明显的，就是它的内容不是动态的，这对于大多数业务来说，完全使用静态内容，根本不具备可行性。
动态内容静态化
存在一种情况，就是内容并不是完全动态的，有一些动态内容具备以下特性：
•内容的变更并不频繁，只在少数情况下需要•内容更多的是为了展现•内容不具备复杂的业务逻辑
比如博客，博客具备上述特性，如果你要建立一个博客网站，那做成动态网页当然是可选方案，但动态博客非常不利于搜索，而稍微想下，我们完成可以把博客这种动态的内容静态化。
这就是Jamstack。如果用一句话表述Jamstack，就是：Jamstack是一种将动态内容静态化的理念
如果基于Jamstack的理念，那意味着，你的博客在是存放在内容管理中，这个是动态的，但是构建工具，会根据内容生成静态网页，也就是如果你的内容管理中有10篇博客，那它就会为你生成10个静态页面。
开源的博客系统hexo就是这个方案。它的内容管理使用的是本地文件系统，也就是你的博客是以markdown放在source目录，然后hexo在构建过程中，会读取这个目录，并生成相应的网页。
Jamstack的组成
所以，一个完善的Jamstack解决方案，必然包含以下两个部分：
•内容管理•构建工具
内容管理
内容管理是负责管理你的内容的地方，它是一个动态的，你可以这个地方任意的添加，修改或删除你的内容。
严格说来，类似hexo这种使用本地文件系统的模式，是属于最简单方便，但功能极其单一的内容管理。所以，它只是用来做博客网站的。
另外，如果你使用过gitbook，你会发现它也是Jamstack的实现之一。
但事实上，真正的内容管理比单纯的文件系统复杂强大的多。这个我在后面会说。
构建工具
构建工具实质上有两个功能：
1.构建工具负责读取内容，并生成合适的页面2.构建工具负责内容的展现，也就是页面
基于这两点，再结合这些年前端技术的发展，基于前端技术来做这个是最好不过的了。
做前端开发的人都知道，现在主流的类似React或Vue Webpack的技术组合，本来就有一个编译的过程，将你编码的东西最终生成html js css。
所以，在这个编译过程中，添加一个新的阶段，读取内容并生成相应的页面，就是非常自然的做法了。
这也是为什么hexo,gitbook等都是前端技术及工具。
当然，这并是说后端不能做这个事，比如，你当然也能基于Java freemarker来做这个事，但比起前端的技术来说，会复杂许多。而前端只需要在现有的过程中增加一个小的预生成阶段就好了
Jamstack的优点及缺点
很明显，Jamstack结合了动态与静态的优点：
1.一方面，它支持内容的动态管理，你可以使用内容管理服务来管理你的内容，这意味着你不需要直接为这些动态内容编写静态的HTML。2.在此之上，内容与UI做到了完美的分离，在内容不变的情况下，你可以随时修改你的样式或UI，甚至可以支持不同的载体，比如网页，小程序，App等3.另一方面，它最终生成的是静态页面，意味着静态网页所具有的高性能，易于缓存，对搜索友善等特点它都具备。
当然，这不是说Jamstack是万能的。
Jamstack的局限性
* 其一是它仅仅适合一部分以展现为主的动态内容。比如博客，文档，视频，产品展现等，它并不适合业务逻辑很强的动态内容，比如库存管理，雇员管理或订单管理这些。
* 其二是它的更新比较频繁，每次动态内容的变更都需要重新生成网页
我与Jamstack
事实上，我在很久之前就与Jamstack有交集，但直至今年，我在计划做微言码道的官网时，去了解及调研一些技术时，才看到并理解这个概念。
hexo
我曾在数年前基于hexo搭建过个人博客网站，如我在前文所述，hexo是基于本地文件系统来做内容管理的，它属于非常简单的一种实现。
gitbook
很多程序员可能使用过gitbook，与hexo类似，它也是使用本地文件系统来做，只不过它不是用来生成博客，而是用来生成文档。
如上图所示，这些年，我大量使用过gitbook，但之前我一直不知道这个概念。
gitbook与hexo类似，也是基于本地文件系统而构建。
WorkPlus Lite官网
如果Jamstack只能搞博客或文档，那估计很多人对它就没有兴趣了，因为作用范围有限。
事实上，Jamstack的范围并不是这么小，我在前面说过，Jamstack构建这个过程大多是基于前端技术来做的，所以Jamstack并不只是生成静态网页，本身前端技术就可以编写静态或动态页面，所以这样一结合起来，可以构建相对复杂的网站。
我在2020年做的WorkPlus Lite官方网站，就是这么回事。它是基于docusaurus开源技术构建而来。
https://lite.workplus.io
它是完全静态的。
微言码道官网
事实上，在2021年之前，我仍未完全意识到Jamstack能做的事情，是因为在这之前我还没有接触到headless cms这个概念。
headless cms是Jamstack中内容管理的一个很重要的实现与部分，但直到我在构思自己怎么做微言码道的官网的时候，我才接触到headless cms这个概念。并意识到Jamstack能构建更强大的网站。
我的需求很简单，我要为微言码道构建一个网站，在我的计划中，我并不会单纯的以文章来承载微言码道，微言码道会包含文章，视频，音频，开源项目及其文档教程等各种内容。
这意味着我要构建一个网站，能承载这些东西，我一直在构思如何能快速的构建出这么一个东西。
过往，我构思的可选的方案包括：
1.基于hexo开源博客系统构建
这是比较快速但非常不匹配的做法，hexo的模式非常单一，就是以展现文章为主，而微言码道的东西并不仅仅只是文章，还包含我前述的很多内容。我每次查阅hexo最喜欢做的事情就是找主题，查找是否有合适的主题样式满足我的需求。但每次都非常失望，因为它永远是以文章为中心
2.自己构建后台 前端
做为全栈式技术人员，自己写个后台，再写个前端并不是不可以，但一来这个非常费时，再来这个做出来的东西也是个动态网页，性价比并不高。而微言码道的东西是非常适合静态化的。
直到我2020年末在寻找hexo类似替代方案时，无意间发现了gatsby这个别人推荐可以取代hexo做博客的开源技术后，我就开始关注它。在阅读官方文档后，我发现这个东西远比hexo灵活与强大，最重要的是，通过它，我又关联发现headless cms这个概念。（因为gatsby在它的官网中大量提到了它支持各种headless cms)
这简直如获至宝。我一下子就找到了我所需要的东西。
所以，仅仅是在2021元旦假期3天左右多一点的时间，我就为微言码道构建了一个完整的官方网站，它是结合headless cms gatsby而构建的，是符合Jamstack理念的。
微言码道官网：https://taoofcode.cc
微言码道的内容其实是在一个headless cms中进行管理
而网站则是纯静态的
你想知道它是如何构建出来的么？
下篇文章继续，我会讲述headless cms这个东西。它是另一个非常有意思的技术，它不仅仅是能用在支撑Jamstack的，事实上它能做的远远大于这个范围。
