转载注明作者和出处, peace~

首先, 什么是 JAMstack ?

JAMstack就是 javascript + apis + makeup

其中js处理动态显示的部分; APIS则是一些可重用的API, 比如一些云函数和第三方服务; Makeup就是用来生成站点的模板了. 近年在国外发展势头迅猛.

一句话就是增强版的静态网站.

基本理念就是提供更加简便迅速的开发体验; 因为这种模式以更低的成本, 更高的性能和更好的伸缩性让jamstack在网站构建方案中脱颖而出.

• 更好性能: 通过CDN分发静态资源等内容
• 更加安全: 没有传统的web服务器, 不需要担心常见的网络攻击
• 更方便: 直接托管在相应的服务中, 而且很便宜甚至免费, 比如githubpage/netlify, 国内的有gitee和腾讯云等都有相关服务
• 更加分离: 不需要限制在传统的开发体系中, 做到敏捷开发部署, 实时预览
• 更有伸缩性: 依托在CDN网络上, 网络性能伸缩性很好, 不需要担心传统服务器性能受限等问题.

使用技巧

• CDN
• 原子发布: 每一次发布都是一次独立版本
• 无效缓存, 一旦重新发布, CDN就会更新原来的资源
• 通过版本系统控制, 如git, 轻易追踪文件地改动
• 自动构建: 当网站发布时, 通过webhook通知sever进行构建, server会构建项目并且更新CDN

常见的构建方式

1. 先本地开发, 现在一般通过静态站点生成器SSG如Hexo, Hugo, Getsby,Next等去生成静态资源. 我用的Hexo是使用Markdown文档作为模板输入而生成静态网页资源.

2. 版本控制系统如git进行管理, 一般这些SSG都会有相应的集成, 发布到远程仓库如github

3. 之后可以托管这些静态资源到相应的服务提供商上, 由他们曲部署构建和更新CDN, 常见有githubPage, Netlify, 国内的话可以用giteePage或者腾讯云的托管.

当然上面这些提到的都是静态资源的部分, 那么如果有一些动态更新的地方, 就可以通过第三方API和云函数实现动态调用.

一般有

• 云开发: 添加自定义的云函数, 如腾讯云开发/netlify funciton/AWS; 可以添加云数据库来存储用户数据等.
• 评论: 有很多相关的评论服务可以使用, 如valine/twikoo/gittalk等. 一般一些JAMstack产品都会提供
• 其他: 搜索服务/表单服务/统计脚本/电子商务.

此外还有一种究极省事的方式, 就是通过CMS去完成内容管理和自动部署, 这种被叫做无头CMS, 如语雀/notion一类的内容管理平台.

这种CMS 系统会对外提供 API，网站生成器可以调用这些 API 拉取数据，将动态数据渲染成为静态页面

这样内容创作者只需要专注于内容而不需要花费大量精力在web构建上.

相比较传统类型构建方案

类型	JAMstack的优势
纯静态	JAMstack在纯静态上做了动态处理和内容管理上的增强, 所以相比纯静态, 交互性和管理体验更好
传统前端-后台服务器模式	在安全性/速度/可伸缩性上无可比拟. 传统的模式需要一个在线的服务器实时渲染和提供页面数据, 对于突变的请求量则很难控制, 而且扩容迁移都比较麻烦. JAMstack使用CDN分发静态页面, 这是太最大的优势
SPA	SPA的强大有目共睹, 当时缺点也很明显, 那就是SEO不友好, 即使现状有所改善, 但也无法避免性能问题.

JAMstack适用场景

• 大量静态内容
• 如wiki, 博客网站, 文档, 电商网站, 企业官网等

不适用

• 大量动态更新内容
• 如聊天室\视频直播\论坛等.

本博客的JAMstack构建方案

博主经历了githupage-->giteePage-->Netfily的艰辛构建史.

期间升级了一次Hexo3.2.0-->Hexo5.4.0,

以及主题版本Fluid-->1.89.

本方案适合几乎无费用/访问量一般的阶段使用, 全部白嫖 XD

目前使用的构建方案是:

1. SSG框架: Hexo5.4.0
2. 版本控制: git, github
3. 免费托管服务: Netlify
4. 免费第三方API和公共CDN: jsdelivr , Leancloud

使用Hexo主题Fluid中集成了一些Jsdelivr的公共CDN, 并提供了Leancloud的评论接口, 非常nice!

因为是博客网站, 所以需要的动态服务不多, 最主要的是评论和访问统计, 这一块的配置方案建议使用基于Leancloud的Valine评论系统, PV统计建议使用不蒜子, 特别省心. 而且同第三方库可以是实现邮件通知等功能.

所以第一步就是去Hexo文档去构建部署自己的站点, 之后选择Fluid或者其他主题进行配置.

1. Hexo

2. hexo 主题: Fluid

3. valine无后端评论系统

4. 不蒜子极简统计

PS: 截至目前博客访问量🎉🎉

托管服务使用Netlify, 太香了~. 之前使用的是githubPage托管, 图个省心, 奈何首屏要11s, 简直是上古时代的速度😂, 果断放弃. 之后尝试了giteePage的托管, 效果和Netlify差不多, 前面一个是Gitee后面一个是Netfily:

相比下giteePage速度更快一些, 毕竟是国内托管服务. 但是最蛋疼的是, 它要PRO才能自定义域名, 不能白嫖, 这不符合我geek的精神. 如果不介意的话giteePage倒是不错的选择.

❌

✔

到阿里云等买一个域名(这个12块钱一年🤣), Netlify和githubPag而都支持自定义域名绑定, 只要到相应的提供商哪里解析一下DNS即可.

阿里云域名注册

不过有个坑🕳, 就是使用了不带www的二级域名会让Leancloud的PV和UV计数失效. 而且邮件提醒功能也无法进行, 非常蛋疼. 当然这是白嫖下的妥协, 如果不想要www, 可以通过氪金解决.

设置valine邮件提醒

而且, 选择Netfily可以直接监管github仓库的更新, 这样Hexo + github + Netlify + Leancloud的一条龙方案特别nice~.

当然也可以尝试使用其他托管服务, 这里仅仅是博主个人使用过的做分享.

Netlify

giteePage

githubPage

优化方案

大体上针对JAMstack的优化是CDN服务的优化和文件压缩. 而且也有很多现成插件可以在构建前打包, 非常便捷! 经过测试, 优化之后加载速度快了近一倍~.

以下是最新版本Fluid的优化方案:

• 压缩图片

  • 可以使用Fluid中内置的压缩功能
  • 使用hexo-all-minifier
  • 使用TinyPing等第三方压缩之后再上传.

• 压缩生成文件

  通过hexo-all-minifier压缩生成的前端静态文件和图片

  npm install hexo-all-minifier
  
  ### 在博客_config.yml中设置
  all-minifier: true

  其中自定义启动concator:

  • js_concator将生成的js合并, 打包成一个脚本文件并放在页面末尾, 以此减少请求数量和避免阻塞
  • bug: 使用js_concator打包之侯会让评论插件不可用, 可能是APIs与其冲突了.

• 使用 CDN服务

  hexo-fluid默认使用了jsDelivr服务, 将常用的第三方库配置公共 CDN

  • 也可以使用staticfile\bootcdn等
  • 可以购买私有CDN进行加速, cdn

以前弄过WordPress那一套, 太憋屈, 老是要安装各种插件, 一个贫民服务器还经常搞崩, 没钱购买安全防护就得承受到web攻击, 速度还一般. 通过简单的配置和加载优化就可以使用上和以前要花费大价钱配置的网站同样的体验, 美哉美哉.

所以对于博客网站来说, JAMstack YES!

核心概念-CDN

内容交付网络（CDN）是指一组在地理上分散的服务器，它们协同工作以提供互联网内容的快速交付。

CDN允许快速转移加载互联网内容所需的资产，包括HTML页面、javascript 文件、样式表、图像和视频。 CDN服务的受欢迎程度持续增长。如今，大多数网页流量都通过CDN提供服务，包括来自Facebook、奈飞和亚马逊等主要网站的流量。

more