🌿 Cbiu 个人网站

基于 Next.js 15 打造的现代化全栈个人网站，采用「高级极简主义」设计理念，具备流畅动画、国际化支持和强大的后台管理系统。

🌐 在线访问：www.cbiu.fun

✨ 核心特性

🎨 前端体验

• 精致设计：高级极简主义美学，融合玻璃态、动态网格和噪点纹理
• 流畅动画：基于 Framer Motion 的页面过渡和元素动画
• 响应式布局：移动优先设计，适配所有设备
• 国际化：通过 next-intl 实现中英文无缝切换

🛠️ 功能模块

• 首页：动态 Hero 区域，系统状态可视化，交错入场动画
• 关于：现代化 Bento Grid 布局，展示个人信息、技术栈和社交链接
• 文章：完整的博客系统，Markdown 渲染、目录导航、文章分类
• 项目：作品集展示，包含演示链接和源码链接
• 分享：精选资源合集（软件、工具），支持分类筛选和动态搜索

🔐 管理后台

• 安全认证：基于 NextAuth.js v5 的身份验证系统
• 内容管理：
  • 文章编辑器：Markdown 编辑器 + 元数据管理
  • 项目管理：添加/编辑/删除作品集项目
  • 资源管理：高级资源管理，支持动态分类和自动获取元数据
  • 数据统计：内容统计仪表盘
• 私密账户：交互式账户创建，密码 bcrypt 加密，凭证不存在代码中

🚀 技术栈

技术	说明
框架	Next.js 15 (App Router, Turbopack)
语言	TypeScript 5
样式	Tailwind CSS v4
UI 组件	Radix UI + Iconify
动画	Framer Motion
数据库	Prisma ORM + MySQL
国际化	next-intl
认证	NextAuth.js v5
部署	Docker + GitHub Actions

📦 快速开始

环境要求

• Node.js 18+
• pnpm（推荐）或 npm
• MySQL 8.0+（生产环境）

本地开发

1. 克隆仓库

   git clone https://github.com/wuchib/cbiu-website.git
   cd cbiu-website

2. 安装依赖

   pnpm install

3. 环境配置

   创建 .env 文件：

   # 数据库连接
   DATABASE_URL="mysql://root:password@localhost:3306/cbiu_webside"
   
   # NextAuth 认证
   # 生成密钥：openssl rand -base64 32
   AUTH_SECRET="your-secret-key-at-least-32-chars"
   AUTH_URL="http://localhost:3000"

4. 初始化数据库

   # 生成 Prisma Client
   npx prisma generate
   
   # 同步数据库结构
   npx prisma db push
   
   # 填充初始数据（分类等）
   npx prisma db seed

5. 创建管理员账户

   pnpm run setup-admin

   按提示输入邮箱、用户名和密码（密码会加密保存）

6. 启动开发服务器

   pnpm dev

   访问 http://localhost:3000

🏗️ 项目结构

cbiu-website/
├── app/                      # Next.js App Router
│   ├── [locale]/             # 公开页面（首页、关于等）
│   │   ├── page.tsx          # 首页
│   │   ├── about/            # 关于页面
│   │   ├── articles/         # 文章列表和详情
│   │   ├── projects/         # 项目展示
│   │   └── share/            # 资源分享
│   ├── admin/                # 后台管理（需登录）
│   │   ├── articles/         # 文章管理
│   │   ├── projects/         # 项目管理
│   │   └── share/            # 资源管理
│   ├── login/                # 登录页面
│   └── api/                  # API 路由
├── components/               # React 组件
│   ├── layout/               # 布局组件（Header, Footer, Nav）
│   ├── ui/                   # UI 基础组件
│   ├── admin/                # 后台专用组件
│   └── articles/             # 文章相关组件
├── actions/                  # Server Actions
├── lib/                      # 工具函数
├── i18n/                     # 国际化配置
├── prisma/                   # 数据库 Schema
│   ├── schema.prisma         # 数据模型
│   └── seed.ts               # 初始数据
├── scripts/                  # 实用脚本
│   └── setup-admin.ts        # 管理员账户创建
├── public/                   # 静态资源
└── middleware.ts             # 路由中间件（认证 + i18n）

🚢 生产部署

详细部署文档请参考：DEPLOY.md

使用 Docker Compose 快速部署：

1. 配置 .env 文件（参考 DEPLOY.md）
2. 启动服务

   docker-compose up -d --build

3. 初始化数据库

   docker-compose exec app npx prisma db push
   docker-compose exec app npx prisma db seed

4. 创建管理员账户

   docker-compose exec app npm run setup-admin

使用 GitHub Actions 自动化部署：

• 每次推送到 master 分支会自动触发构建和部署
• 查看 .github/workflows/deploy.yml 了解详情

📝 使用说明

访问后台管理

1. 访问 https://www.cbiu.fun/admin
2. 未登录会自动跳转到登录页面
3. 使用创建的管理员账户登录
4. 登录成功后自动进入管理后台

编写文章

1. 进入后台 → 文章管理 → 新建文章
2. 填写标题、描述、分类、标签
3. 使用 Markdown 编辑器编写内容
4. 可选上传封面图
5. 选择是否发布
6. 保存即可

添加项目

1. 进入后台 → 项目管理 → 新建项目
2. 填写项目信息（标题、描述、链接等）
3. 上传缩略图
4. 设置排序和特色标记
5. 保存发布

🔒 安全特性

• ✅ 密码加密：使用 bcrypt 哈希算法
• ✅ 凭证私密：管理员账号密码不存在代码中
• ✅ 会话管理：NextAuth 自动处理 session 和 token
• ✅ 路由保护：中间件自动拦截未授权访问
• ✅ 环境变量：敏感信息通过环境变量管理

📄 开源协议

本项目采用 MIT License 开源协议。

🙏 致谢

感谢以下开源项目：

• Next.js
• Tailwind CSS
• Prisma
• NextAuth.js
• Radix UI
• Framer Motion

---

如有问题或建议，欢迎 提交 Issue

喜欢这个项目？给个 ⭐️ Star 吧！