像搭积木一样自由布局你的个人博客首页
想象一下：你的博客首页不再是千篇一律的列表，而是一块可以自由拼搭的画布。时钟、日历、音乐播放器、最新文章...每个功能都是一个小卡片，你可以随心所欲地拖拽、摆放、调整大小。
这不是幻想，这是 NextBlog。
一个基于 Next.js 16 + React 19 的现代化个人博客系统，采用无服务器架构部署在 Cloudflare Workers。
在线预览: https://www.openaigc.fun
这是 NextBlog 最具创新性的功能！
- 🎨 自由布局 - 像搭积木一样自由摆放首页
- 🖱️ 拖拽交互 - 鼠标拖拽即可调整卡片位置
- 💾 配置持久化 - 你的布局会自动保存
- 🎭 多种卡片 - 问候、时钟、日历、音乐、社交...
问题：中文标题作为 URL 会导致编码问题
https://example.com/blog/%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
NextBlog 的解决方案：使用 UUID 作为文章 slug
https://example.com/blog/a1b2c3d4-e5f6-7890-abcd-ef1234567890
✅ URL 简洁美观
✅ 避免中文编码问题
✅ 天然唯一性，无需检查冲突
✅ 安全性更高，防止遍历攻击
- 💰 按需计费 - 只为实际使用的资源付费
- 🛠️ 零维护 - 无需管理服务器
- 🌍 全球分发 - 300+ 边缘节点，低延迟
- 📈 自动扩展 - 无需担心流量峰值
- 🔥 热门文章排行
- 📈 访问趋势图表
- 📂 分类/标签统计
- 📉 增长率计算
- 🎨 自动转换为 webp/avif 格式
- 📏 多尺寸生成
- 💾 智能压缩
- 🌐 CDN 全球分发
- ✅ 个人博客 - 想要一个有个性的个人博客
- ✅ 技术文档 - 需要代码高亮、目录导航
- ✅ 作品集 - 展示项目、图片、博客
- ✅ 知识库 - 记录学习笔记、技术文章
- ✅ 极客玩家 - 想要体验可拖拽首页的酷炫功能
本项目基于开源 2025-blog-public 二创，所有流程由 iFlow CLI 和 GLM-4.7 对话式完成开发。非常感谢 iFlow 团队和 GLM 大模型团队开发的伟大作品以及所有工作人员的辛勤付出！
- iFlow CLI - https://platform.iflow.cn/ - 超智能的极致心流体验
- GLM-4.7 - https://bigmodel.cn/ - Vibe Coding 能力全球开源第一
我们选择了最新的技术栈，确保项目快速、安全、易维护：
| 技术 | 用途 | 为什么选择它 |
|---|---|---|
| Next.js 16 | 全栈框架 | App Router、Server Components，性能极致 |
| React 19 | UI 框架 | 最新的并发特性，体验流畅 |
| TypeScript | 类型安全 | 避免低级错误，代码更可靠 |
| Tailwind CSS 4 | 样式框架 | 原子化 CSS，开发效率高 |
| Motion | 动画库 | Framer Motion，丝滑动画效果 |
| Zustand | 状态管理 | 轻量级，API 简洁直观 |
| SWR | 数据获取 | 自动缓存、重新验证，体验流畅 |
| Marked + Shiki | Markdown | 解析快、代码高亮美观 |
| Drizzle ORM | 数据库 | 类型安全，性能优于 Prisma |
| Neon PostgreSQL | 数据库 | 无服务器，按需计费 |
| Cloudinary | 图片存储 | 自动优化、CDN 分发 |
| Cloudflare Workers | 部署 | 全球边缘节点，零维护成本 |
| Recharts | 图表库 | 数据可视化，美观易用 |
| Zod | 数据验证 | 类型安全的验证库 |
src/
├── app/ # Next.js App Router
│ ├── (home)/ # 首页（可拖拽卡片系统）
│ │ ├── page.tsx # 首页入口
│ │ ├── *-card.tsx # 各类卡片组件
│ │ ├── config-dialog/ # 配置对话框
│ │ ├── stores/ # 首页状态管理
│ │ └── services/ # 首页服务
│ ├── api/ # API 路由
│ │ ├── posts/ # 文章 CRUD
│ │ ├── media/ # 图片上传/删除
│ │ ├── auth/ # 密码验证
│ │ ├── categories/ # 分类管理
│ │ ├── tags/ # 标签管理
│ │ ├── likes/ # 点赞
│ │ ├── search/ # 搜索
│ │ └── analytics/ # 数据分析
│ ├── blog/ # 博客列表/详情
│ │ ├── [id]/ # 文章详情
│ │ ├── components/ # 博客组件
│ │ └── services/ # 博客服务
│ ├── write/ # 编辑器（需认证）
│ │ ├── [slug]/ # 编辑已有文章
│ │ ├── components/ # 编辑器组件
│ │ ├── hooks/ # 编辑器 hooks
│ │ └── stores/ # 编辑器状态
│ ├── projects/ # 项目展示
│ ├── pictures/ # 图片画廊
│ ├── bloggers/ # 博主推荐
│ ├── share/ # 分享页
│ ├── snippets/ # 代码片段
│ ├── about/ # 关于页
│ ├── analytics/ # 数据分析页
│ ├── rss.xml/ # RSS 订阅
│ └── sitemap.ts # 站点地图
├── components/ # 共享组件
│ ├── card.tsx # 卡片组件
│ ├── dialog-modal.tsx # 对话框
│ ├── blog-preview.tsx # 博客预览
│ ├── blog-sidebar.tsx # 博客侧边栏
│ ├── blog-toc.tsx # 目录组件
│ ├── code-block.tsx # 代码块
│ └── analytics/ # 数据分析组件
├── db/ # 数据库 Schema
├── hooks/ # 自定义 Hooks
├── lib/ # 工具库
├── services/ # 业务逻辑层
├── config/ # 站点配置（JSON）
├── stores/ # Zustand 状态管理
└── styles/ # 全局样式
| 表 | 用途 |
|---|---|
users |
用户（StackAuth 集成预留） |
sessions |
会话管理 |
posts |
文章（UUID 作为 slug） |
categories |
分类 |
tags |
标签 |
post_tags |
文章-标签关联 |
media |
媒体记录 |
views |
访问统计 |
likes |
点赞记录 |
NextBlog 最具创新性的功能！
- 🎨 自由布局 - 像搭积木一样自由摆放首页
- 🖱️ 拖拽交互 - 鼠标拖拽即可调整卡片位置
- 💾 配置持久化 - 你的布局会自动保存
- 🎭 多种卡片 - 问候、时钟、日历、音乐、社交...
- 📅 智能分组 - 想看今天的文章？本周的？还是某个分类的？一键切换
- 🌈 Markdown 渲染 - 代码高亮、目录导航，阅读体验一流
- 📊 阅读状态 - 自动记录你读过的文章，不再重复阅读
- 🔍 批量管理 - 编辑模式下，批量删除、分配分类，效率翻倍
- 🔐 密码认证 - 保护你的编辑权限
- 👁️ 实时预览 - 左侧编辑，右侧实时预览
- 📸 图片上传 - 粘贴即上传，自动优化
- 🏷️ 分类标签 - 轻松管理文章分类和标签
- 🔥 热门文章 - 哪些文章最受欢迎？
- 📈 访问趋势 - 今日、本周、本月的数据一目了然
- 📂 分类统计 - 哪些分类内容最多？
- 📉 增长率 - 看到你的博客在成长
/projects- 项目展示/pictures- 图片画廊/bloggers- 博主推荐/snippets- 代码片段/share- 分享页
# 克隆项目
git clone https://github.com/stone100010/NextBlog.git
cd NextBlog
# 安装依赖
pnpm install
# 配置环境变量
cp .env.example .env.local
# 编辑 .env.local，填入你的配置
# 启动开发服务器
pnpm dev
# 访问 http://localhost:2025# 构建
pnpm run build:cf
# 部署
wrangler deploy🎉 完成！你的博客已经上线了！
# 生成迁移文件
pnpm db:generate
# 推送到数据库
pnpm db:push
# 打开 Drizzle Studio
pnpm db:studio| 路由 | 方法 | 功能 |
|---|---|---|
/api/posts |
GET/POST | 文章列表/创建 |
/api/posts/[slug] |
GET/PUT/DELETE | 文章详情/更新/删除 |
/api/categories |
GET/POST | 分类列表/创建 |
/api/categories/[id] |
PUT/DELETE | 分类更新/删除 |
/api/tags |
GET/POST | 标签列表/创建 |
/api/tags/[id] |
PUT/DELETE | 标签更新/删除 |
/api/media/upload |
POST | 上传图片 (FormData) |
/api/media/upload-base64 |
POST | 上传图片 (Base64) |
/api/media/[publicId] |
DELETE | 删除图片 |
/api/auth/verify |
POST | 密码验证 |
/api/likes/[slug] |
GET/POST/DELETE | 点赞查询/创建/删除 |
/api/search |
GET | 搜索文章 |
/api/analytics/* |
GET | 数据分析 |
/rss.xml |
GET | RSS 订阅 |
| 特性 | NextBlog | 传统博客 |
|---|---|---|
| 首页布局 | 🎨 可拖拽自由布局 | 📋 固定列表 |
| 部署方式 | ☁️ 无服务器，零维护 | 🖥️ 需要服务器 |
| URL 设计 | 🔑 UUID，简洁安全 | 📝 标题，编码问题 |
| 图片优化 | 🖼️ 自动转换 webp/avif | ⚙️ 需手动处理 |
| 数据分析 | 📊 内置可视化图表 | 📈 需第三方服务 |
| 成本 | 💰 按需计费 | 💵 固定费用 |
| 全球分发 | 🌍 300+ 边缘节点 | 📍 单一服务器 |
| 维护成本 | 🛠️ 零维护 | ⏰ 需定期维护 |
# 数据库
DATABASE_URL=postgresql://...
# Cloudinary
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=...
# 认证
ADMIN_PASSWORD=...
# 站点
NEXT_PUBLIC_SITE_URL=https://www.openaigc.fun- 无服务器架构 - 按需计费，零维护
- 边缘计算 - Cloudflare Workers 全球分发
- 类型安全 - TypeScript + Drizzle 全链路类型
- 图片优化 - Cloudinary 自动转换（webp/avif/多尺寸）
- UUID Slug - 解决中文标题 URL 编码问题
- 可拖拽 UI - 首页卡片自由布局
- 实时预览 - Markdown 编辑器即时预览
- 配置驱动 - JSON 文件控制站点外观
- 数据分析 - 内置访问统计和可视化图表
- RSS 订阅 - 自动生成 RSS feed
欢迎贡献代码、报告问题或提出建议！
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的修改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
本项目采用 Apache 2.0 许可证 - 查看 LICENSE 文件了解详情