站内链接:

Workflow

优势

首先, 让我们先了解一下大部分静态博客生成器为何在过去几年迅速增长的原因以及静态博客生成器
的工作原理, 在Static Generator上几乎可以找到每一种语言实现的静态博客生成器版本, 那么其
优势是哪些呢?

  1. 无依赖, 纯静态页面, 只需要很少的系统资源即可
  2. 部署简单, 一个 nginx 即可实现静态博客的正常访问
  3. 特别适用于个人开发者静态博客

那么静态网站的工作流程是怎么样的呢?工作流程大体分为如下的步骤:

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

工作流

第一步, generator 会读取约定 markdown 格式源文件, markdown 以灵活的自定义:源目录, 目标目录, 页面标题等
被个人开发者喜欢, 生成器一般都会读取 md 格式的文件.

第二步, generator 需要对读取的 markdown 文件进行资源预处理, 分离头部元数据和主题内容, 其步骤如下

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

例如对于头部:

1
2
3
4
5
---
title: Hello World
---

Awesome static site generator

其会被解析成 js 语言:

1
2
3
4
5
6
const result = {
  'path/to/hello-world.md': {
    title: 'Hello World',
    content: new Buffer('Awesome static site generator.'),
  },
};

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

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

第六步, 那就是运行博客系统了:

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

静态博客搭建步骤

首先, 进行域名的备案

  • 备案
  • 域名解析
  • 安全组或者防火墙策略

其次, 在成功配置域名之后, 则需要在本地搭建static generator tool可以运行的本地环境, 确保能够
将 markdown 文件一键生成为 html 格式.

最后, 安装 web 服务器.

generatorj 介绍

目前比较火热的生成器有:

  • jekyll: ruby, 构建效率慢, github page 页面, 历史悠久, 开源 9 年
  • hexo: node.js, 构建速度一般, 个人博客和产品展示, 页面酷炫, 前端开发者居多
  • hugo: go, 构建速度极快, 个人博客和产品展示, 开源四年, 后端开发者居多

其中 jekyll 优点:

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

这里理念被之后的静态网站构建器所传承. 而关于另外两个生成器, 见另外两篇文章:
hexo

引用