»Personal Blog - 个人博客系统

项目简介

Personal Blog 是一个开源的个人博客系统，基于 Next.js 15 App Router 构建，使用 MDX 编写文章内容，通过 Velite 进行内容编译与管理。

博客以内容为核心，所有文章以 MDX 文件形式存储在仓库中，无需数据库即可完整运行。同时可选接入 PostgreSQL（Prisma）实现阅读量统计等扩展功能。

技术栈

层次	技术选型
框架	Next.js 15 (App Router)
语言	TypeScript
样式	Tailwind CSS v4 + CSS 自定义属性
内容管理	Velite (MDX/YAML → 类型安全 ESM)
动画	Framer Motion
数据库 (可选)	PostgreSQL + Prisma
部署	Docker / Vercel / 云服务器

功能特性

• ✍️ MDX 内容编写 — 使用 Markdown + JSX 编写文章，支持 GFM 语法
• 🏗️ Velite 编译管线 — 类型安全的内容编译，自动生成文章列表、分类、归档
• 🎨 三栏响应式布局 — 左侧信息栏 + 中间内容区 + 右侧侧边栏
• 🌓 深色模式 — 基于 next-themes 的亮色/暗色主题切换
• 🔍 全文搜索 — 客户端搜索，支持文章标题、分类、标签筛选
• 📡 RSS / Sitemap — 自动生成 RSS 订阅源和搜索引擎站点地图
• 📊 文章阅读统计 (可选) — 集成 PostgreSQL + Prisma，优雅降级
• 🐳 Docker 部署 — 提供多阶段构建的 Dockerfile，部署即用
• ⚡ 页面过渡动画 — 基于 Framer Motion 的路由切换动效
• 🛡️ 优雅降级 — 每个数据获取函数都有硬编码兜底，零配置即可运行

架构设计

内容管线

内容仓库 → Velite 编译 → 类型安全的数据服务 → 页面渲染

所有文章存储在 content/posts/ 目录下，通过 Velite 读取 MDX 文件、应用 schema 校验、运行 Remark/Rehype 插件链，最终输出类型安全的 ESM 模块。

三栏布局

• 左栏: 头像、个人信息、统计数据、社交链接、友链
• 中栏: 主内容区（文章列表 / 文章详情 / 页面）
• 右栏: 最新文章、分类导航

数据库层

数据库是可选的。当 DATABASE_URL 未设置或 DATABASE_ENABLED=false 时，所有数据库功能自动降级，不影响核心博客功能。

本地开发

# 克隆仓库
git clone https://gitee.com/shanhaia/personal-blog.git
cd personal-blog/blog-web

# 安装依赖
npm install

# 启动开发服务器（自动编译内容）
npm run dev

# 构建生产版本
npm run build

开源地址

项目已托管在 Gitee，欢迎 Star、Issue 和 PR：

👉 https://gitee.com/shanhaia/personal-blog.git