从 0 到上线：Abits / Wandering 博客搭建记录

开始之前：不是再做一个普通博客

Abits / Wandering 的目标不是做一个文章列表，而是做一个可以长期维护的个人数字空间。首页要像一个轻量 Dashboard：先告诉访客我现在在读什么、做什么、构建什么，再把 Life、Tech、Projects 这些入口展开。

这张首页截图基本确定了站点的气质：大留白、冷色 Aurora 背景、固定毛玻璃导航、状态模块和卡片流。视觉参考 Apple、iOS / Vision Pro 和 Linear，但没有直接照搬组件，而是把它们翻译成适合个人博客的结构。

技术栈：把前台、后台和 API 放进同一个系统

项目使用 Next.js 15 App Router。前台页面、后台管理和 API Routes 都在同一个代码库里，这样个人项目的维护成本更低：

• 前台：Next.js 15、TypeScript、TailwindCSS、Framer Motion。
• 数据：PostgreSQL + Prisma，覆盖用户、文章、分类、标签、评论和媒体。
• 存储：Cloudflare R2，图片上传后直接返回可写入 Markdown 的 URL。
• 限流：Redis 可选，评论接口没有 Redis 时会回退到内存限流。
• 部署：Docker Compose + 1Panel 反向代理。

这种结构的好处是简单直接。文章系统不依赖外部 SaaS CMS，数据库结构也足够清晰，后续要加摄影图库、时间轴、阅读记录或知识图谱，都可以沿着现有表结构继续扩展。

视觉系统：先做阅读体验，再做装饰

我把整体色彩压在冷白、浅蓝、青色和石墨色之间，避免过度鲜艳。所有卡片都使用半透明背景、边框和 backdrop blur，但毛玻璃只服务于层次，不抢文字内容。

交互上只保留轻量动作：滚动出现、卡片 hover 微微上浮、导航滚动后增强模糊。移动端优先保证可读性，按钮和卡片在窄屏下改成单列。

后台：写作、发布、审核都要足够直接

后台入口是 /admin。登录后可以写 Markdown、选择 Life / Tech / Projects 分类、添加标签、控制草稿或发布状态、上传图片，并审核评论。

文章编辑器没有做成复杂的富文本，而是保留 Markdown。原因很简单：个人博客长期维护时，Markdown 更容易迁移、备份和批量处理。图片通过媒体上传接口进入 R2，再把 URL 粘到文章里。

评论系统默认进入待审核状态，同时支持回复。为了降低垃圾评论，接口做了两层基础防护：一个隐藏蜜罐字段，一个按 IP 哈希的限流。管理员可以在后台批准、标记垃圾或删除评论。

数据库：先把长期需要的结构设计好

这次没有只做前台 Demo，而是直接设计了上线所需的表：

users       管理员账号
posts       文章、草稿、发布状态
categories  Life / Tech / Projects
tags        标签
post_tags   文章标签关系
comments    评论与回复
media       R2 文件记录

Prisma migration 已经写好，Docker 启动时会自动执行 prisma migrate deploy。第一次部署后只需要运行一次 seed，就能创建管理员、默认分类和这篇搭建记录。

部署：用 1Panel 做长期运维入口

服务器使用 Ubuntu 22.04 x64，域名已经解析到 blog.abits.top。部署方式不是手写一堆散落的 Nginx 命令，而是用 1Panel 管理：

1. 在 1Panel 的「容器 -> 编排」里加载 docker-compose.yml。
2. Compose 启动 Next.js、PostgreSQL 和 Redis。
3. Next.js 只绑定 127.0.0.1:3000。
4. 在 1Panel 的「网站」里创建反向代理站点，把 blog.abits.top 转发到 http://127.0.0.1:3000。
5. 用面板申请 HTTPS 证书，并定期备份 PostgreSQL 卷。

这样的部署方式对个人网站比较稳：应用是容器化的，数据库有卷，域名和证书交给面板，后续升级时只需要重新拉代码、重建镜像、启动编排。

这次搭建完成了什么

当前版本已经具备长期运行的基本条件：

• 前台页面完整：Home、Life、Tech、Projects、About、Now、Post。
• 后台完整：登录、文章 CRUD、评论审核、媒体上传。
• 数据库结构完整：管理员、文章、评论、标签、分类、媒体。
• 部署链路完整：Docker Compose、1Panel 指南、Nginx/OpenResty 备用配置。
• 性能基线可控：生产构建通过，公开页面首载 JS 保持在可接受范围内。

后续更值得做的不是继续堆功能，而是慢慢把真实内容填进去：生活记录、技术复盘、项目日志、摄影图库和阶段性 Now。等内容增长起来，这个网站才会真正从“博客系统”变成“个人数字空间”。