这个Blog项目怎么搭起来的

最近把自己的个人博客基本搭起来了。

这个项目一开始的目的很简单：做一个能够长期维护的个人技术博客，用来记录 UE、C++、渲染、BIM 以及平时折腾的一些项目。随着功能慢慢增加，现在已经不只是几个静态页面，而是一个包含前台、后台管理、API 和数据库的完整 Web 应用。

目前主要技术栈是：

Next.js 16
React 19
TypeScript
Tailwind CSS 4
Prisma
PostgreSQL

整体架构大概是：

为什么选择 Next.js

这个项目没有采用传统的：

Vue / React 前端
+
Spring Boot / Node.js 后端

这种前后端完全分离的架构，而是直接使用 Next.js 做全栈。

Next.js 本身基于 React，但除了写页面，还可以在服务端执行代码以及提供 API，所以整个博客只需要维护一个项目。

例如：

src/app/blog

负责博客页面，而：

src/app/api/posts

可以直接提供文章相关接口。

对于个人博客来说，这种方式比较省力，少维护一套后端项目。

目前项目主要采用服务端渲染，页面请求到达服务器之后，从数据库读取数据，然后生成 HTML 返回给浏览器。

流程大概是：

用户访问文章
    ↓
Next.js Server Component
    ↓
Service
    ↓
Prisma
    ↓
PostgreSQL
    ↓
生成 HTML
    ↓
浏览器

Prisma 是干什么的

数据库使用的是 PostgreSQL，但业务代码不会到处直接写 SQL，而是在中间增加了一层 Prisma。

例如查询已经发布的文章：

const posts = await prisma.post.findMany({
  where: {
    status: "PUBLISHED",
  },
})

Prisma 会负责把这种查询转换成数据库能够执行的操作。

所以可以把它理解成：

TypeScript
    ↓
Prisma ORM
    ↓
PostgreSQL

Prisma 还有一个比较方便的地方，就是可以直接描述数据库结构。

例如：

model Post {
  id      BigInt @id @default(autoincrement())
  title   String
  content String
}

这份 schema.prisma 相当于整个数据库的数据模型定义。

目前博客里面主要有：

User            用户
Post            文章
Category        分类
Tag             标签
PostTag         文章标签关联
Comment         评论
Project         项目
MediaFile       媒体资源
SiteSetting     网站配置
ContentBlock    内容块

例如文章、用户和分类之间的关系：

erDiagram
    User ||--o{ Post : writes
    Category ||--o{ Post : contains
    Post ||--o{ Comment : has
    Post ||--o{ PostTag : has
    Tag ||--o{ PostTag : has

其中文章和标签是典型的多对多关系，所以中间增加了一张 post_tags 关联表。

项目的代码分层

虽然 Next.js 可以直接在页面里面查询数据库，但我没有把所有逻辑都堆在页面里，而是简单做了一层拆分。

目前主要结构类似：

src
├── app
│   ├── 页面
│   └── api
│
├── components
│   └── 通用 React 组件
│
├── modules
│   └── 页面业务模块
│
├── services
│   ├── content-service.ts
│   └── admin-service.ts
│
├── lib
│   └── Prisma、通用工具
│
└── types
    └── TypeScript 类型

其中我比较喜欢的是 services 这一层。

例如：

页面
 ↓
content-service
 ↓
Prisma
 ↓
PostgreSQL

前台页面不用关心数据库具体怎么查询，只需要调用对应的 Service。

后台也单独使用：

admin-service.ts

处理文章 CRUD、评论审核、系统配置等逻辑。

这样以后即使页面结构发生变化，数据库查询部分也不需要跟着大量修改。

前台和后台

目前整个网站可以简单分成两个部分。

前台主要是：

首页
文章
分类 / 标签
归档
项目展示
搜索
关于我
联系我

后台则主要负责：

登录认证
文章管理
分类 / 标签管理
媒体资源
评论审核
网站设置

文章正文最终还是存储在 PostgreSQL 的 posts.content 字段中，而不是直接把 Markdown 文件放在服务器目录里。项目虽然保留了 MDX 能力，但目前主要的数据源还是数据库。

这样做之后，文章管理就比较方便，可以直接在后台完成新增、编辑、发布和下线。

部署

开发完成之后，Next.js 会通过：

npm run build

生成生产版本。

目前整体部署流程可以理解成：

本地开发
   ↓
Git
   ↓
服务器拉取代码
   ↓
npm install
   ↓
npm run build
   ↓
Next.js
   ↓
PostgreSQL
   ↓
HTTPS
   ↓
用户访问

数据库也可以使用 Docker 单独运行 PostgreSQL，项目本身已经提供了对应的 Docker Compose 配置。

以后如果继续扩展，也可以逐渐增加：

对象存储
CDN
Redis
访问统计
邮件服务
AI 看板娘

这些能力，而不用推翻现在的主体架构。

最后

以前写 C++ 和 UE 的时候，我对 Web 的理解基本停留在：

浏览器 → HTTP → 服务器

真正自己做了一遍之后，才逐渐把 React、Next.js、API、ORM 和数据库这些东西串起来。

现在看这个博客，本质上其实就是：

React
负责 UI

Next.js
负责 Web 应用框架和服务端

Service
负责业务逻辑

Prisma
负责连接 TypeScript 和数据库

PostgreSQL
负责真正存储数据

整体并不复杂，但把这些层真正跑通之后，对一个 Web 应用是怎么工作的就清晰很多了。

后面准备继续给这个博客加一些有意思的东西，比如 Live2D 看板娘、AI 对话和语音功能。

暂无评论，来抢沙发吧。