一个基于 Next.js 和 Supabase 构建的现代化个人博客系统，支持文章发布、归档、标签分类等功能。 特点：文章增删改查无需服务器 supbase大致支持上万篇文章 文章支持markdown编辑，推荐将图片上传至专门的图床平台使用https访问。 这只是一个项目胚子，基本功能都可以，后面慢慢迭代吧 demo view

• 前端框架: Next.js 16
• 数据库: Supabase
• 开发语言: TypeScript
• 样式: Tailwind CSS
• 部署: 支持 Vercel、Netlify 等静态部署平台

• ✅ 文章发布与管理
• ✅ 文章归档（按年/月分类）
• ✅ 标签管理
• ✅ 分类管理
• ✅ 响应式设计
• ✅ 深色/浅色主题切换
• ✅ 支持 Markdown 写作
• ✅ 支持代码高亮
• ✅ 支持 TOC 目录
• ✅ 支持特色图片

git clone https://github.com/galokpeng/LoveWriting.git
cd love-writing

推荐使用 pnpm 安装依赖：

pnpm install

1. 访问 Supabase 并创建一个新项目
2. 在项目设置中获取以下信息：
   • SUPABASE_URL
   • SUPABASE_ANON_KEY

在 Supabase 的 SQL 编辑器中执行 lib/supabase/schema.sql 文件，创建博客所需的数据库表：

# 或者使用命令行执行
npx supabase db push

复制 .env.example 文件为 .env.local，并填写相应的环境变量：

cp .env.example .env.local

编辑 .env.local 文件，配置以下环境变量：

# Supabase配置
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

SUPABASE_TABLE_NAME=blog_posts

# 博客基本配置
NEXT_PUBLIC_BLOG_NAME=你的博客名称
NEXT_PUBLIC_BLOG_DESCRIPTION=你的博客描述

# 布局配置
HEADER_LAYOUT=sidebar # 可选值：top（顶部）或sidebar（侧边栏）
TOC_POSITION=right # 可选值：left 或 right
ARCHIVE_TIME_DIMENSION=year # 可选值：year（按年）或month（按月）

pnpm dev

访问 http://localhost:3000 查看博客首页。

pnpm build

1. 登录 Vercel
2. 点击 "New Project"，选择你的 GitHub 仓库
3. 在环境变量配置页面，添加 .env.local 中的所有环境变量
4. 点击 "Deploy" 部署项目

1. 登录 Netlify
2. 点击 "Add new site" -> "Import an existing project"
3. 选择你的 GitHub 仓库
4. 在构建配置中：
   • 构建命令：pnpm build
   • 发布目录：.next
5. 在环境变量配置页面，添加 .env.local 中的所有环境变量
6. 点击 "Deploy site" 部署项目

.
├── app/                    # Next.js App Router
│   ├── admin/              # 后台管理页面
│   ├── posts/              # 文章详情页面
│   ├── archive/            # 文章归档页面
│   ├── tags/               # 标签页面
│   ├── categories/         # 分类页面
│   └── about/              # 关于页面
├── components/             # React组件
├── lib/                    # 工具库
│   └── supabase/           # Supabase配置
├── services/               # 业务逻辑
├── types/                  # TypeScript类型定义
├── .env.example            # 环境变量示例
├── .env.local              # 本地环境变量
└── README.md               # 项目说明

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm start

# 运行类型检查
pnpm typecheck

# 运行代码格式化
pnpm format

访问 /admin/dashboard 进入后台管理页面，可进行文章的发布、编辑和删除操作。

(MIT License)[https://github.com/GalokPeng/LoveWriting/tree/main?tab=MIT-1-ov-file]