Skip to content

sealye09/blog

Repository files navigation

静态博客生成器

一个简洁、高效的静态博客生成器,专为 GitHub Pages 设计。

✨ 特性

  • 🚀 快速构建:使用 TypeScript 编写,构建速度快
  • 📝 Markdown 支持:使用 Markdown 编写文章,支持 Front Matter 元数据
  • 🤖 AI 生成摘要:支持 OpenAI、DeepSeek 等 AI 服务自动生成文章摘要
  • 🎨 现代设计:响应式布局,完美适配各种设备
  • 🌓 主题切换:支持浅色/深色模式
  • 💡 代码高亮:基于 Highlight.js 的代码语法高亮
  • 📂 归档页面:按年份自动组织文章
  • 🔗 SEO 友好:生成的页面结构清晰,利于搜索引擎收录
  • 📋 结构化日志:统一的日志系统,支持多级别日志和彩色输出

📦 技术栈

  • 构建工具:TypeScript + tsx
  • Markdown 解析:markdown-it
  • 代码高亮:highlight.js
  • 日期处理:dayjs
  • AI 集成:Vercel AI SDK (支持 OpenAI、DeepSeek 等)
  • 日志系统:统一的结构化日志,支持多级别和彩色输出
  • 包管理:pnpm

🚀 快速开始

环境要求

  • Node.js >= 22.0.0
  • pnpm >= 8.0.0

安装

# 克隆项目
git clone https://github.com/sealye09/blog.git
cd blog

# 安装依赖
pnpm install

配置

编辑 scripts/config.ts 文件,配置你的博客信息:

export const config: BlogConfig = {
  FROM_DIR: "__blogs", // Markdown 文件目录
  POSTS_DIR: "posts", // 生成的文章目录
  ASSETS_FROM: "assets", // 静态资源目录
  USERNAME: "Your Name", // 显示名称
  GITHUB_USERNAME: "username", // GitHub 用户名
};

写作

__blogs 目录下创建 Markdown 文件,使用 Front Matter 设置文章元数据:

---
title: 文章标题
date created: 2025-01-01T00:00:00+08:00
date modified: 2025-01-01T00:00:00+08:00
tags: [标签1, 标签2]
summary: 文章摘要
---

# 文章内容

这里是正文...

构建

# 构建博客
pnpm build

构建完成后,生成的网站将位于 {GITHUB_USERNAME}.github.io/ 目录下。

部署到 GitHub Pages

方法一:自动部署(推荐)

  1. 在 GitHub 创建名为 {username}.github.io 的仓库
  2. 确保 scripts/config.ts 中的 GITHUB_USERNAME 配置正确
  3. 运行构建和部署命令:
pnpm deploy # 部署到 GitHub

注意

  • deploy 命令会强制推送(git push -f),本地会覆盖远程仓库
  • 首次部署会自动初始化 Git 仓库并配置远程地址
  • 默认推送到 main 分支

方法二:手动部署

如果你想手动控制部署过程:

cd {GITHUB_USERNAME}.github.io
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/{username}/{username}.github.io.git
git push -u origin main

配置 GitHub Pages

  1. 在仓库设置中启用 GitHub Pages(选择 main 分支)
  2. 访问 https://{username}.github.io 查看你的博客

🤖 AI 生成摘要

本项目支持使用 AI 自动为文章生成摘要,兼容 OpenAI、DeepSeek 等 OpenAI API 兼容的服务。

配置

创建 .env 文件并配置以下环境变量:

# API 密钥(必需)
OPENAI_API_KEY=sk-your-api-key-here

# API 端点(可选)
# OpenAI: 不设置或使用 https://api.openai.com/v1
# DeepSeek: https://api.deepseek.com
OPENAI_API_BASE=https://api.deepseek.com

# 模型名称(可选,默认: gpt-3.5-turbo)
# OpenAI: gpt-3.5-turbo, gpt-4, gpt-4o, gpt-4o-mini
# DeepSeek: deepseek-chat, deepseek-reasoner
OPENAI_MODEL=deepseek-chat

# 摘要最大长度(可选,默认: 150)
AI_SUMMARY_MAX_LENGTH=150

使用方法

# 为指定文件生成摘要
pnpm gen __blogs/article1.md __blogs/article2.md

# 使用通配符
pnpm gen __blogs/*.md

# 为 git 暂存区的文件生成摘要
pnpm gen --staged
# 或使用简写
pnpm gen -s
# 或使用快捷命令
pnpm gen:staged

# 查看帮助
pnpm gen --help

注意

  • 必须指定要处理的文件或使用 --staged 参数
  • 默认会强制覆盖已有的摘要
  • 生成的摘要会自动写入文章的 Front Matter summary 字段

📋 日志系统

本项目实现了统一的结构化日志系统,为构建、优化、部署等过程提供清晰的日志输出。

特性

  • 多级别日志:DEBUG、INFO、WARN、ERROR、FATAL
  • 彩色输出:每个日志级别使用不同颜色和图标
  • 时间戳:精确到毫秒的时间记录
  • 专用日志器:为不同功能模块提供专用日志器
  • 环境适配:根据环境自动调整日志级别

使用示例

# 构建过程的日志输出
pnpm build
# [Blog] [2025-11-19 21:24:11.932] ℹ️ INFO 页面构建完成。
# [Blog] [2025-11-19 21:24:11.933] ℹ️ INFO 开始优化构建产物...

# 部署过程的日志输出
pnpm deploy
# [Blog] [2025-11-19 21:26:21.655] ℹ️ INFO 开始部署博客...
# [Blog] [2025-11-19 21:26:25.384] ⚠️ WARN 即将执行强制推送(会覆盖远程仓库)...

# AI 生成过程的日志输出
pnpm gen --staged
# [Blog] [2025-11-19 21:24:55.031] ℹ️ INFO 🤖 需要生成摘要的文件: 1 个
# [Blog] [2025-11-19 21:24:58.016] ℹ️ INFO ✅ [1/1] 生成成功

详细的日志系统文档请参考:docs/LOGGING.md

📁 项目结构

blog/
├── __blogs/              # Markdown 文章源文件
├── assets/               # 样式文件
│   ├── common.css       # 通用样式
│   ├── index.css        # 首页样式
│   ├── post.css         # 文章页样式
│   ├── archive.css      # 归档页样式
│   └── 404.css          # 404 页样式
├── templates/            # HTML 模板
│   ├── base.html        # 基础模板
│   ├── index.html       # 首页模板
│   ├── post.html        # 文章模板
│   ├── archive.html     # 归档模板
│   └── 404.html         # 404 模板
├── scripts/              # 构建脚本
│   ├── blog.ts          # 主构建脚本
│   ├── deploy.ts        # 部署脚本
│   ├── gen.ts           # AI 摘要生成(整合 staged 功能)
│   ├── ai.ts            # AI 通用调用函数
│   ├── config.ts        # 配置文件
│   ├── optimize-*.ts    # 构建产物优化脚本
│   └── utils.ts         # 构建工具函数
├── utils/               # 工具模块
│   └── logger.ts        # 统一日志系统
├── {username}.github.io/ # 生成的网站
├── .env                  # 环境变量配置(需自行创建)
└── package.json

🎨 自定义样式

所有样式文件位于 assets/ 目录下,你可以根据需要修改:

  • common.css - 全局样式、导航栏、页脚等
  • index.css - 首页文章列表样式
  • post.css - 文章内容页样式
  • archive.css - 归档页面样式
  • 404.css - 404 页面样式

样式使用 CSS 变量,支持主题定制。

📝 脚本命令

# 构建博客
pnpm build

# 部署到 GitHub Pages(强制推送)
pnpm deploy

# AI 生成摘要
pnpm gen <文件...>           # 为指定文件生成摘要
pnpm gen:staged              # 为 git 暂存区的文件生成摘要

# 格式化代码
pnpm format

🔧 开发

本项目使用 Lefthook 管理 Git Hooks,在提交前自动格式化代码。

📄 许可

MIT License

🙏 致谢


Happy Blogging! 🎉

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors