自建轻量 SSG 的思路与实现

为什么要自己写?

用过 Hexo、Hugo、VitePress,各有各的好,但也各有各的约束。

最终决定自己写一个,原因很简单:自由

核心需求

  1. Markdown 写作,文件夹即分类
  2. 本地图片自动同步
  3. 一键部署到服务器
  4. 酷炫的二次元主题

技术选型

Node.js
├── markdown-it    (Markdown 解析)
├── gray-matter    (Front Matter 解析)
├── ejs            (模板渲染)
├── prismjs        (代码高亮)
└── chokidar       (文件监听)

核心流程

writings/        扫描 .md 文件
    ↓            解析 front matter + content
    ↓            目录名 → 分类
    ↓            渲染 Markdown → HTML
    ↓            套用 EJS 模板
    ↓            复制图片/附件
dist/            输出静态文件
    ↓
rsync            部署到服务器

亮点功能

同名文件夹 = 附件目录

技术/
  ├── 我的文章.md
  └── 我的文章/
      ├── screenshot.png
      └── demo.gif

文章里用 ![](./我的文章/screenshot.png) 引用,构建时自动处理路径。

项目展示

支持开发进度条、版本 Timeline,这是普通博客系统没有的:

---
title: 我的项目
version: 1.2.0
progress: 75
status: active
timeline:
  - version: v1.2.0
    date: 2026-03-01
    desc: 新增暗色模式
  - version: v1.1.0
    date: 2026-02-15
    desc: 添加项目展示页
---

总结

整个 SSG 不到 500 行代码,但完全满足了我的需求。有时候,最好的工具就是自己写的工具。