个人博客系统

一个基于 Next.js 16 和 Supabase 构建的现代化个人博客系统，注重优雅的排版和沉浸式的阅读体验。

✨ 特性

• 🎨 优雅的设计：使用 Noto Serif SC 字体，大行距排版，提供舒适的阅读体验
• ✍️ 极简编辑器：Markdown 编辑器支持实时预览，简洁高效
• 🌓 深色模式：完整支持亮色/暗色主题切换
• 🔐 用户认证：基于 Supabase Auth 的完整认证系统
• 📱 响应式设计：完美适配桌面和移动设备
• 🎭 个性化：支持自定义笔名字体偏好

🛠️ 技术栈

• 框架: Next.js 16.0.10 (App Router)
• 数据库: Supabase (PostgreSQL)
• 样式: Tailwind CSS 4.1.18 + @tailwindcss/typography
• UI 组件: Radix UI + shadcn/ui
• 动画: Framer Motion
• Markdown: react-markdown + remark-gfm + rehype-highlight
• 包管理: pnpm

📦 安装

# 克隆项目
git clone <your-repo-url>
cd blog

# 安装依赖
pnpm install

# 配置环境变量
cp .env.example .env.local
# 编辑 .env.local，填入你的 Supabase 配置

🚀 开发

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

📝 环境变量

在 .env.local 中配置以下变量：

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

🗄️ 数据库结构

posts 表

• id: UUID (主键)
• title: 文章标题
• slug: URL 标识符
• content: Markdown 内容
• excerpt: 文章摘要
• tags: 标签数组
• is_published: 发布状态
• author_id: 作者 ID (外键)
• created_at: 创建时间
• updated_at: 更新时间

profiles 表

• id: UUID (主键，关联 auth.users)
• display_name: 显示名称
• pen_name: 笔名
• avatar_url: 头像 URL
• font_preference: 字体偏好
• created_at: 创建时间
• updated_at: 更新时间

🎨 设计理念

• 极简主义：去除不必要的装饰，专注内容本身
• 艺术化排版：大行距（2.4）、大段落间距（3rem），营造舒适的阅读节奏
• 字体选择：
  • 正文：Noto Serif SC（优雅的衬线字体）
  • 装饰：Dancing Script（艺术化手写体）
• 色彩克制：使用柔和的色调，避免视觉疲劳

📄 许可证

MIT License

👤 作者

Tianyu Fu

注意：本项目仅供学习和个人使用。