Kodezio Blog Platform

基于 Next.js (App Router) 和 Supabase 构建的高性能全栈个人博客系统。旨在提供极致的用户阅读体验和高效的内容管理工作流。

✨ 核心特性

本项目分为用户端（前台）、管理端（后台）以及底层系统工程化三个维度。

1. 👤 用户端：极致的阅读与交互体验

专为访客打造，注重加载速度、信息密度与视觉体验。

• 首页 (Home)
  • Hero Section: 简洁的自我介绍与核心技术栈展示。
  • 精选文章: 手动置顶的高质量内容。
  • 最近更新: 自动流式加载最新的 3-5 篇文章。
• 文章列表与导航
  • 多维筛选: 支持按分类 (Categories) 或标签 (Tags) 过滤。
  • 时间轴归档: 按年份/月份回顾创作历程。
  • 全局搜索: 集成 Supabase Full-text Search 实现毫秒级全文检索。
• 文章详情页 (Post Detail)
  • Markdown/MDX 渲染: 完美支持 GFM 规范、数学公式 ($E=mc^2$)、脚注等。
  • 代码高亮: 使用 Shiki 实现 IDE 级别的语法高亮体验。
  • 自动目录 (TOC): 侧边栏随滚动自动高亮当前章节。
  • 阅读辅助: 顶部阅读进度条 + 智能估算阅读时间。
• 互动功能
  • 评论系统: 基于 Supabase Auth (GitHub/Google)，支持点赞、回复、通知。
  • 数据统计: 实时展示文章点赞数与阅读量。

2. 🛡️ 管理端：高效的内容生产中心

集成在主项目中，通过严格的路由权限控制，服务于内容创作者。

• 身份验证 (Auth)
  • 安全登录: 集成 Supabase Auth (GitHub/Google)。
  • 路由保护:
    Code

    ~/kodezio/blog

    /admin
    下所有路由强制 Session 校验，确保安全。
• 内容编辑器 (Editor)
  • 所见即所得: 左侧 Markdown 编辑，右侧实时渲染预览。
  • 自动保存: 本地/云端双重防丢失机制。
  • 元数据管理: 便捷配置 Slug、封面图、SEO 描述及发布状态。
• 媒体库 (Media Library)
  • 拖拽上传: 直接对接 Supabase Storage。
  • 自动优化: 配合 Next.js Image Optimization 自动压缩并转换为 WebP。
• 数据看板 (Dashboard)
  • 核心指标: 总文章数、阅读总量、近期访问趋势图表。

3. ⚙️ 工程化与系统底层

构建在现代 Web 标准之上，关注性能、SEO 与自动化。

• 性能优化
  • ISR (增量静态再生成): 兼具静态页面的加载速度与动态内容的时效性。
  • RSC (React Server Components): 最小化客户端 Bundle 体积，提升首屏速度。
• SEO 深度优化
  • 自动化元数据: 自动生成
    Code

    ~/kodezio/blog

    sitemap.xml
    和
    Code

    ~/kodezio/blog

    robots.txt
    。
  • 动态 OG 图片: 使用
    Code

    ~/kodezio/blog

    next/og
    为每篇文章自动生成社交分享卡片。
  • 结构化数据: 内置 JSON-LD，这有助于搜索引擎精准抓取。
• UI/UX 设计
  • 现代美学: 避免通用的蓝紫配色，采用 中性黑白灰 或 琥珀/翡翠 等自然色调。
  • 响应式设计: Mobile First，全终端完美适配。
  • 主题切换: 深度适配 Dark/Light 模式。
• 自动化工作流
  • CI/CD: GitHub Actions 自动部署至 Vercel。
  • Webhooks 通知: 新评论自动推送至 飞书/钉钉 或 邮件。

🛠️ 技术栈

模块	推荐工具	说明
框架	Next.js 16 (App Router)	最新 React 框架，支持 RSC 与 Server Actions
样式	Tailwind CSS v4	原子化 CSS 引擎
数据库	Supabase (PostgreSQL)	开源 Firebase 替代品，提供 DB、Auth、Storage
ORM	Supabase Client / Prisma	类型安全的数据库访问
组件库	shadcn/ui	优美、可在大程度上定制的组件集合
图标	Lucide React	一致且美观的图标库
部署	Vercel	Next.js 的最佳部署平台

🚀 快速开始

1. 克隆项目

bash
~/kodezio/blog
git clone <repository-url>
cd web

2. 安装依赖

bash
~/kodezio/blog
npm install
# 或 pnpm install

3. 配置环境变量

复制

为 并填入 Supabase 相关配置：

bash
~/kodezio/blog
cp .env.example .env.local

env
~/kodezio/blog
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. 启动开发服务器

bash
~/kodezio/blog
npm run dev

访问 http://localhost:3000 查看效果。

5. 数据库迁移 (Supabase)

bash
~/kodezio/blog
supabase start
supabase migration up

📄 License

MIT