1 Theory

静态网站如何工作:How to work of staticGen

静态网站构建原理: Introduction of static web

静态generator: Static Gen

2 Workflow

2.1 Step

静态网站generator的工作流程大体分为如下的步骤:

  • 读取源文件(例如约定为markdown)
  • 预处理资源(解析)
  • 渲染模板(使用引擎进行渲染)
  • 生成目标文件(HTML)
  • 启动

2.2 Read

约定markdown格式源文件, 灵活的自定义:源目录, 目标目录, 页面标题等, 之后进行读取工作

2.3 Parse

  • 解析头部, 使用yaml-parser/json-parser等解析对应格式的头部
  • 解析内容, 使用marked解析为 HTML 标签
  • 解析静态资源, 使用工具链(CSS 预处理器, 编译器, 打包器, 流程构建工具), 整合全部资源

2.4 Rendering

将parse得到的 HTML 片段嵌入预先定义好的模板中(主题), 复用页面中的公共部分(导航栏,
侧边栏, 底部等), 嵌入变量(自定义配置)和静态资源

2.5 Generate

清理目标目录, 将生成的文件输出到目标目录.

2.6 Running

  • local server: 启动node.js server实时预览, 结合live-reload触发页面刷新(或者使用webpack热替换)
  • file DB: 持久化部分数据(e.g. 博客发表时间,文件哈希值,文件修改时间),重新编译可以跳过未改动的文件
  • log system: 记录编译过程和编译结果,增强 debug 可行性,按 log 层级格式化输出不同信息到控制台
  • auto deploy: 整合 Git 和 WebHook,一键发布到 GitHub Pages 或者自己的网站上

3 Tools

3.1 List

jekyll: ruby, 构建效率慢, github page页面, 历史悠久, 开源9年

hexo: node.js, 构建速度一般, 个人博客和产品展示, 页面酷炫, 前端开发者居多

hugo: go, 构建速度极快, 个人博客和产品展示, 开源四年, 后端开发者居多

3.2 Jelyll

  • No Magic:简单易懂
  • It “Just Works”:初始化网站配置,不需要为让用户操心
  • Content is King:内容为王,这是用于应该真正关心的部分
  • Stability:向后兼容,容易维护
  • Small & Extensible:核心功能满足90%用户的需求,其它功能使用插件形式,易于集成

这里理念被之后的静态网站构建器所传承

3.3 hugo

hugo说明.

3.3 hexo

hexo说明.