ZVIOLIN
PROJ-05
PROJ-05 Tool 维护中

Static-Blog

静态博客系统 - Nunjucks 模板引擎

独立开发的静态博客生成系统：Nunjucks 模板 + 构建期公式 / 高亮渲染，支持 Markdown 与标签分类，已部署 GitHub Pages，首屏 LCP < 0.8s。

HTML5CSS3NunjucksMarkdown-itKaTeXHighlight.js
★ 0 Stars
个人博客 用户
LCP < 0.8s 性能
2025 年份
查看源码 在线演示 返回列表
static-blog.json 
{
  "id": "static-blog",
  "title": "Static-Blog",
  "type": "Tool",
  "year": "2025",
  "status": "maintenance",
  "category": "工具/博客",
  "tech": ["HTML5", "CSS3", "Nunjucks", "Markdown-it", "KaTeX", "Highlight.js"],
  "github": "https://github.com/Zviolin/Static-Blog/tree/Introduction",
  "demo": "https://Zviolin.github.io/Static-Blog/"
}
01

项目概述

独立开发的静态博客生成系统：Nunjucks 模板 + 构建期公式 / 高亮渲染，支持 Markdown 与标签分类，已部署 GitHub Pages，首屏 LCP < 0.8s。

02

核心特性

📝

Markdown 渲染 — 基于 markdown-it 的 Markdown 解析，支持 GFM 语法、表格、任务列表

🔢

数学公式 — 集成 KaTeX 渲染引擎，支持行内公式和块级公式

🎨

代码高亮 — Highlight.js 语法高亮，支持 180+ 编程语言

🏷️

标签分类 — 文章标签系统，按标签和分类筛选文章

📄

Nunjucks 模板 — 基于 Nunjucks 模板引擎，组件化页面构建

🚀

GitHub Pages — 已部署至 GitHub Pages，免费托管，自动构建

03

技术架构

模板引擎
Nunjucks 模板渲染
Markdown
markdown-it 解析 + GFM 扩展
数学公式
KaTeX 渲染引擎
代码高亮
Highlight.js
部署
GitHub Pages 静态托管
04

性能指标

首屏加载 0.8s
构建速度 3s
页面大小 50KB
Lighthouse 95+分
05

项目结构

project-structure 
Static-Blog/
├── src/
│   ├── templates/        # Nunjucks 模板
│   │   ├── base.njk     # 基础模板
│   │   ├── post.njk     # 文章模板
│   │   └── index.njk    # 首页模板
│   ├── generators/      # 构建脚本
│   │   ├── build.js     # 构建入口
│   │   └── markdown.js  # MD 解析
│   └── styles/          # 样式文件
├── content/             # 博客内容
│   └── posts/          # Markdown 文章
├── dist/               # 构建输出
└── package.json
06

详细说明

项目概述

Static-Blog 是一个基于 Nunjucks 模板引擎的静态博客生成系统。系统通过构建脚本将 Markdown 文章转换为静态 HTML 页面，支持数学公式渲染、代码高亮、标签分类等功能。项目已通过 GitHub Pages 部署上线。

本项目由本人独立完成模板体系设计、构建脚本开发与部署上线，是一次完整的「前端工程化 + 静态站点生成」实践：从模板引擎选型、Markdown 解析扩展到 GitHub Pages 自动构建部署全流程独立把控。

在线访问

项目已部署至 GitHub Pages：https://Zviolin.github.io/Static-Blog/

核心功能

Markdown 渲染

  • 基于 markdown-it 的 Markdown 解析
  • 支持 GFM（GitHub Flavored Markdown）语法
  • 表格、任务列表、删除线等扩展语法
  • 自动生成目录（TOC）

数学公式

  • 集成 KaTeX 渲染引擎
  • 支持行内公式 $...$
  • 支持块级公式 $$...$$
  • 高性能渲染，无需客户端 JavaScript

代码高亮

  • Highlight.js 语法高亮
  • 支持 180+ 编程语言
  • 多种主题可选
  • 行号显示

标签分类

  • 文章标签系统
  • 按标签筛选文章
  • 按分类浏览
  • 标签云展示

Nunjucks 模板

  • 组件化页面构建
  • 模板继承与复用
  • 条件渲染与循环
  • 自定义过滤器

工程亮点

  • 构建期渲染：数学公式（KaTeX）与代码高亮在构建期完成，页面零客户端渲染开销，首屏 LCP < 0.8s
  • 源码与产物分离：src/（模板 + 构建脚本）与 dist/（构建输出）严格分离，构建产物纯净可缓存
  • 模板工程化：Nunjucks 模板继承与复用、条件渲染与自定义过滤器，组件化组织页面
  • 解析扩展：基于 markdown-it 扩展 GFM 语法、TOC 自动提取与标签分类系统

项目结构

项目采用源码与生成结果分离的设计：

  • src/templates/ - Nunjucks 模板文件
  • src/generators/ - 构建脚本
  • content/posts/ - Markdown 博客文章
  • dist/ - 构建输出的静态文件

分支说明

  • main - 主分支，稳定版本
  • Web - Web 部署分支
  • Introduction - 项目介绍文档分支

快速开始

# 克隆项目
git clone https://github.com/Zviolin/Static-Blog.git
cd Static-Blog

# 安装依赖
npm install

# 本地开发
npm run dev

# 构建静态文件
npm run build

# 预览构建结果
npm run preview