🚀 TechBlog - 科技感个人博客系统
一个功能强大、科技感十足的个人博客系统。支持多用户、高性能、Docker 一键部署。
✨ 特性
🎨 科技风设计
- 暗色/亮色主题切换
- 玻璃态设计语言
- 粒子动画与渐变背景
- 响应式布局（移动端优先）
- 自定义滚动条与交互动画
📝 内容管理
- Markdown/MDX 富文本编辑
- 文章分类与标签系统
- 草稿与定时发布
- 阅读时间估算
- 代码语法高亮
- 图片优化（WebP/AVIF）
👥 用户系统
- 多角色支持（管理员/编辑/作者/读者）
- 邮箱密码登录
- OAuth 登录（GitHub/Google）
- 个人资料管理
- 权限分级控制
💬 互动功能
- 嵌套评论系统
- 评论审核管理
- 文章点赞收藏
- RSS 订阅支持
🚀 性能优化
- ISR (增量静态再生成)
- 图片懒加载与优化
- Gzip/Brotli 压缩
- Nginx 反向代理 + 缓存
- Redis 缓存层（可选）
- 速率限制保护
🐳 Docker 部署
- 多阶段构建优化
- Docker Compose 一键部署
- Nginx + PostgreSQL + Redis
- 自动健康检查
- 定时数据库备份
🏗️ 技术栈
| 层级 | 技术 |
|---|---|
| 框架 | Next.js 15 (App Router) |
| 语言 | TypeScript 5 |
| 数据库 | PostgreSQL 16 / SQLite |
| ORM | Prisma 6 |
| 认证 | NextAuth.js v5 (Auth.js) |
| 样式 | Tailwind CSS 4 + Framer Motion |
| UI | Radix UI + shadcn/ui 风格 |
| 内容 | MDX + rehype/remark |
| 部署 | Docker + docker-compose |
| 反向代理 | Nginx |
| 缓存 | Redis 7 (可选) |
📦 快速开始
环境要求
Node.js >= 18
npm >= 9
Docker & docker-compose (可选)
本地开发
# 1. 进入项目目录
cd blog
# 2. 安装依赖
npm install
# 3. 配置环境变量
cp .env.example .env
# 编辑 .env 文件设置你的配置
# 4. 初始化数据库
npx prisma generate
npx prisma db push
npx tsx prisma/seed.ts
# 5. 启动开发服务器
npm run dev
访问 http://localhost:3000
默认管理员账号
- 邮箱:
admin@blog.com - 密码:
Admin123!
⚠️ 生产环境请务必修改密码！
🐳 Docker 部署
快速部署
# 1. 克隆项目
cd blog
# 2. 配置环境变量
cp .env.example .env.production
# 编辑 .env.production 设置生产配置
# 3. 创建 SSL 证书（如果没有）
mkdir -p nginx/ssl
# 生产环境请使用 Let's Encrypt
# 4. 构建并启动
export DOMAIN=your-domain.com
export DB_PASSWORD=your-strong-password
export AUTH_SECRET=your-auth-secret
docker compose build
docker compose up -d
仅启动应用（无 Nginx/DB）
# 使用外部数据库
docker compose up -d app
带缓存启动
docker compose --profile with-cache up -d
查看日志
docker compose logs -f app
停止服务
docker compose down
📁 项目结构
blog/
├── app/ # Next.js App Router
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ ├── globals.css # 全局样式
│ ├── posts/ # 文章页面
│ ├── categories/ # 分类页面
│ ├── tags/ # 标签页面
│ ├── about/ # 关于页面
│ ├── contact/ # 联系页面
│ ├── login/ # 登录页面
│ ├── admin/ # 管理后台
│ └── api/ # API 路由
├── components/ # React 组件
│ ├── ui/ # 基础 UI 组件
│ ├── layout/ # 布局组件（Header/Footer）
│ ├── blog/ # 博客组件
│ └── admin/ # 管理组件
├── lib/ # 工具函数
│ ├── auth.ts # 认证配置
│ ├── prisma.ts # 数据库客户端
│ ├── utils.ts # 通用工具
│ ├── markdown.ts # Markdown 处理
│ └── validations/ # Zod 验证
├── prisma/ # 数据库
│ ├── schema.prisma # 数据模型
│ └── seed.ts # 数据播种
├── types/ # TypeScript 类型
├── styles/ # 额外样式
├── scripts/ # 工具脚本
│ └── backup.sh # 备份脚本
├── docker/ # Docker 配置
├── nginx/ # Nginx 配置
├── Dockerfile # Docker 构建文件
├── docker-compose.yml # Docker Compose
├── next.config.ts # Next.js 配置
├── tailwind.config.ts # Tailwind 配置
└── package.json # 项目配置
⚙️ 配置说明
环境变量
| 变量 | 说明 | 默认值 |
|---|---|---|
DATABASE_URL |
数据库连接 | file:./dev.db |
AUTH_SECRET |
JWT 密钥 | （必填） |
NEXT_PUBLIC_SITE_URL |
站点 URL | http://localhost:3000 |
ADMIN_EMAIL |
管理员邮箱 | admin@blog.com |
ADMIN_PASSWORD |
管理员密码 | Admin123! |
完整配置见 .env.example
🧪 性能指标
| 指标 | 数值 |
|---|---|
| Lighthouse Performance | 95+ |
| First Contentful Paint | < 1s |
| Time to Interactive | < 2s |
| Bundle Size (First Load) | ~102KB JS |
| Docker 镜像大小 | ~200MB |
服务器推荐配置
| 访问量 | 推荐配置 |
|---|---|
| < 1,000/天 | 2核 2GB |
| 1,000 - 10,000/天 | 4核 4GB ✅ |
| 10,000 - 50,000/天 | 4核 8GB + Redis |
| > 50,000/天 | 8核 16GB + 负载均衡 |
🔧 常用命令
npm run dev # 启动开发服务器
npm run build # 生产构建
npm run start # 启动生产模式
npm run db:generate # 生成 Prisma 客户端
npm run db:push # 推送到数据库
npm run db:migrate # 创建迁移
npm run db:seed # 数据播种
npm run db:studio # 数据库管理界面
npm run docker:build # 构建 Docker 镜像
npm run docker:up # 启动 Docker
npm run docker:down # 停止 Docker
npm run db:backup # 备份数据库
npm run lint # 代码检查
npm run test # 运行测试
📄 许可证
MIT License
🤝 贡献
欢迎提交 Issue 和 Pull Request！