Skip to content

Repository files navigation

Logo
Blog

简体中文 | English | 日本語

A Modern, Minimalist Digital Garden

用心感受生活的温度,用代码构建数字的花园。

Next.js Supabase Tailwind CSS TypeScript License: MIT PRs Welcome


📖 项目简介 (Introduction)

这是一个基于 Next.js 16 (App Router)Supabase 构建的现代化 个⼈博客系统。

它不仅仅是一个内容管理系统(CMS),更是一个注重阅读体验和视觉美感的数字空间。项目融合了极简主义设计风格、流畅的交互动画以及强大的写作工具,旨在为创作者提供最纯粹的表达平台,为读者提供最舒适的阅读环境。

✨ 核心特性 (Features)

🎨 极致的视觉体验

  • 现代化设计: 采用 shadcn/ui 组件库,结合 Glassmorphism (毛玻璃) 效果,界面干净、通透。
  • 响应式交互: 完美适配移动端与桌面端,包含优雅的侧滑菜单与手势交互。
  • 深色模式: 完美的系统级深色模式支持,护眼且炫酷。
  • 排版美学: 集成 Noto Serif SC (思源宋体),为标题和文学内容带来印刷品般的阅读质感。
  • 流畅动画: 基于 Framer Motion 的页面转场、开屏动画 (Splash Screen) 和微交互。

✍️ 强大的写作系统

  • 双模编辑器: 基于 Tiptap 构建,支持 所见即所得 (WYSIWYG)Markdown 源码 双向切换。
  • 智能辅助: 支持图片粘贴自动上传、拖拽排序、智能目录生成。
  • 内容变现: 集成了作者个人名片页设置与打赏码配置(支持微信/支付宝打赏)。

🛡️ 坚实的技术架构

  • 全栈类型安全: TypeScript + Supabase 生成类型,确保前后端数据链路安全。
  • 企业级认证: 完整的用户认证流程,支持头像上传(自动压缩与清理)、资料管理。
  • 高性能: Next.js 服务端组件 (RSC)、服务端 Markdown、流式评论与按需资源加载;基线和回归标准见 页面加载性能与服务端边界
  • SEO 友好: 自动生成 Sitemap、Robots 配置与 JSON-LD 结构化数据,搜索引擎完美抓取。

🛠️ 技术栈 (Tech Stack)

🚀 快速开始 (Quick Start)

环境要求:Node.js >= 22.0.0。

1. 克隆项目

git clone https://github.com/ZiYan416/Blog
cd blog

2. 安装依赖

推荐使用 npm 进行依赖管理:

npm install

3. 配置环境变量

复制 .env.local.example.env.local 并在其中填入你的 Supabase 配置信息:

cp .env.local.example .env.local

文章图片默认保存到 Supabase Storage。若要启用 CloudFlare-ImgBed,请仅在服务端配置可选的 IMGBED_API_TOKEN;不要使用 NEXT_PUBLIC_ 前缀。部署、权限与图片清理策略见 图片存储与生命周期管理

4. 启动开发服务器

npm run dev

现在你可以访问 http://localhost:3000 预览项目。

🧭 项目结构 (Architecture)

源码采用“路由编排 + 领域模块 + 共享基础设施”的组织方式:

  • src/app:Next.js 路由、页面和 Route Handlers。
  • src/features:认证、文章、评论、标签、资料、后台等领域代码。
  • src/components:仅保留跨页面布局和领域无关 UI。
  • src/server / src/db:服务端仓储、缓存与数据库类型边界。

新增或移动代码前,请阅读 项目结构与模块边界

🤝 参与贡献 (Contributing)

我们非常欢迎且感谢任何形式的贡献!无论是提交 Issue, 增加 Feature 还是改进文档,所有的工作都有助于让项目变得更好。

参与贡献前,请务必阅读我们的 贡献指南 (CONTRIBUTING.md)项目结构规范。如果你遇到 Bug 或有好的建议,可以参阅对应的模板:

📄 开源许可证 (License)

本项目基于 MIT License 许可开源。你可以自由地学习、修改和用于任何商业或非商业项目。

About

This is a modern personal blog system built with Next.js 16 (App Router) and Supabase.

Resources

Contributing

Stars

Watchers

Forks

Packages

Contributors

Languages