feat: add article about architecture evolution from static to front-back separation

- cover image from hello-world
2026-07-23 21:35:37 +08:00
parent 20180085cc
commit 5efcaaae9f
3 changed files with 205 additions and 0 deletions
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" style="background-color:#ffffff">
+  <defs>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#e94560"/>
+      <stop offset="100%" stop-color="#059669"/>
+    </linearGradient>
+  </defs>
+
+  <!-- 白底 -->
+  <rect width="1200" height="630" fill="#ffffff"/>
+
+  <!-- 极简装饰：一条渐变线 -->
+  <rect x="0" y="80" width="1200" height="2" fill="url(#accent)" opacity="0.3"/>
+
+  <!-- 左侧垂直线 -->
+  <rect x="80" y="0" width="2" height="630" fill="#e94560" opacity="0.08"/>
+
+  <!-- 标题 -->
+  <text x="120" y="200" font-family="system-ui,-apple-system,sans-serif" font-size="48" font-weight="700" fill="#0f172a" letter-spacing="2">
+    尼克的小窝
+  </text>
+  <text x="120" y="260" font-family="system-ui,-apple-system,sans-serif" font-size="48" font-weight="700" fill="#0f172a" letter-spacing="2">
+    架构变迁
+  </text>
+
+  <!-- 副标题 -->
+  <text x="120" y="320" font-family="system-ui,-apple-system,sans-serif" font-size="18" fill="#94a3b8" letter-spacing="6">
+    从纯静态到前后端分离
+  </text>
+
+  <!-- 小标签 -->
+  <rect x="120" y="365" width="180" height="32" rx="16" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
+  <text x="210" y="386" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" fill="#64748b">Nuxt → React + Go</text>
+
+  <!-- 右侧极简装饰：两个小方块 -->
+  <rect x="980" y="180" width="140" height="140" rx="8" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
+  <text x="1050" y="238" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" font-weight="600" fill="#e94560">静态</text>
+  <text x="1050" y="260" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#94a3b8">Monolith</text>
+
+  <rect x="980" y="340" width="140" height="140" rx="8" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
+  <text x="1050" y="398" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" font-weight="600" fill="#059669">分离</text>
+  <text x="1050" y="420" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#94a3b8">Front-end + Back-end</text>
+
+  <!-- 两个方块之间的箭头 -->
+  <text x="1050" y="325" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" fill="#cbd5e1">↓</text>
+</svg>
@@ -0,0 +1,159 @@
+---
+title: 尼克的小窝 架构变迁：从纯静态到前后端分离
+published: 2026-07-23T12:00:00
+updated: 2026-07-23
+description: 记录尼克的小窝从 Nuxt 3 纯静态博客演进到 React + Go 前后端分离架构的全过程，包括架构设计的思考、技术选型的变化，以及新增的账号注册功能。
+image: /posts/sublog-evolution/img/cover.jpg
+tags: ['架构', 'React', 'Next.js', 'Go']
+draft: false
+series: 尼克的小窝 开发记录
+seriesOrder: 1
+difficulty: 入门
+---
+
+## 📝 写在前面
+
+SuBlog 最初只是一个简单的技术博客——Nuxt 3 静态生成，Markdown 写文章，部署到静态托管完事。但随着功能需求的增长，纯静态的架构开始显露出局限性。
+
+这篇文章记录从 **纯静态** 到 **前后端分离** 的演进过程，带你了解每一步背后的思考。
+
+## 📦 第一代：纯静态（Nuxt 3 + @nuxt/content）
+
+### 🏗️ 架构图
+
+```text
+┌─────────────────────────────────────┐
+│          静态托管 (Nginx/Vercel)      │
+│                                     │
+│  ┌───────────────────────────────┐  │
+│  │     Nuxt 3 SSG 产物            │  │
+│  │                               │  │
+│  │  pages/ + content/ + public/  │  │
+│  └───────────────────────────────┘  │
+│                                     │
+│  Giscus (GitHub Discussions 评论)    │
+└─────────────────────────────────────┘
+```
+
+### 🔧 做了什么
+
+- **Nuxt 3** + **TypeScript** + **Tailwind CSS v4** 搭建前端
+- **@nuxt/content** 管理 Markdown 文章，编译时生成静态页面
+- **Giscus** 嵌入评论，依赖 GitHub Discussions
+- 部署通过 `nuxt generate` 输出 `.output/public`，丢到 Nginx 或 Vercel
+
+### ✅ 优点
+
+- 部署极简，一个 `nuxt generate` 搞定
+- 加载飞快，全是 HTML，没有服务端开销
+- 无需后端，零运维成本
+
+### ❌ 局限
+
+随着时间的推移，纯静态的问题越来越明显：
+
+| 问题 | 具体表现 |
+|------|----------|
+| 🐢 **内容更新慢** | 改一篇文章要重新构建、重新部署，不能实时发布 |
+| 👤 **没有用户体系** | 无法区分读者和管理员，所有内容对所有人一致可见 |
+| 🔒 **评论受限** | Giscus 需要 GitHub 账号才能评论，门槛高 |
+| 🚫 **无法做动态功能** | 点赞、收藏、阅读统计、个性化推荐……统统做不了 |
+| 🔗 **前端锁死** | 被 Nuxt/Vue 生态绑定，想换技术栈得重写 |
+
+## ⚡ 第二代：前后端分离（React + Go）
+
+### 🏗️ 架构图
+
+```text
+┌───────────────────────┐       ┌────────────────────┐
+│    静态托管 (Vercel)    │       │   Go 服务端         │
+│                       │       │                    │
+│  ┌─────────────────┐  │       │  ┌──────────────┐  │
+│  │   sublog-react   │  │  API  │  │  HTTP API    │  │
+│  │  (Next.js SSG)  │──┼───────┼─>│              │  │
+│  │                  │  │       │  │ 文章 / 用户  │  │
+│  │  首页 / 文章 /   │  │       │  └──────────────┘  │
+│  │  用户中心        │  │       │                    │
+│  └─────────────────┘  │       │  ┌──────────────┐  │
+│                       │       │  │   数据库      │  │
+└───────────────────────┘       │  └──────────────┘  │
+                                └────────────────────┘
+```
+
+### 🖥️ 前端：sublog-react
+
+选用 **Next.js**（App Router） + **React 19**，理由是：
+
+- 🎨 **React 生态**——组件库成熟，开发效率高
+- 📐 **App Router**——支持布局嵌套，页面组织清晰
+- 📦 **静态导出**——仍可部署到静态托管
+- ⚙️ **运行时配置**——API 地址可动态注入，切换环境无需重新构建
+
+前端不再直接读取 Markdown 文件，而是通过 HTTP API 获取文章数据。静态导出 + 客户端数据获取的组合，既保留了首屏加载速度，又实现了内容的动态更新。
+
+### ⚙️ 后端：sublog-s
+
+后端使用 **Go** + **Gin**，按业务逻辑分层组织代码。
+
+核心技术选型：
+
+| 技术 | 用途 |
+|------|------|
+| 🚀 **Gin** | HTTP 框架 |
+| 🗄️ **GORM** | ORM，数据库操作 |
+| 🔐 **JWT** | 用户认证 |
+
+## 📊 前后对比
+
+| 维度 | 第一代（纯静态） | 第二代（前后端分离） |
+|------|-----------------|---------------------|
+| 🎨 **前端框架** | Nuxt 3 (Vue) | Next.js (React 19) |
+| 🖥️ **后端** | 无 | Go + Gin |
+| 📄 **内容来源** | Markdown 文件 | API 数据库 |
+| 🚀 **发布方式** | 全量重新构建 | API 实时发布 |
+| 👤 **用户系统** | ❌ 无 | ✅ 注册/登录 |
+| 💬 **评论** | Giscus（需 GitHub） | 自有评论系统（规划中） |
+| 📦 **部署** | 1 个静态目录 | 前端静态 + 后端二进制 |
+| ⚡ **更新体验** | 改文章 → 构建 → 部署 | 改文章 → 立即生效 |
+
+## 🎉 新功能：注册账号
+
+伴随着架构升级，**用户账号系统**也上线了。
+
+### 📋 目前支持
+
+现在你可以在尼克的小窝 **注册一个账号**：
+
+```
+1. ✏️ 填写用户名、邮箱、密码
+2. 📧 查收激活邮件
+3. 🔗 点击链接激活账号
+4. 🚪 登录后查看和管理个人信息
+```
+
+## 🗓️ 后续计划
+
+正在开发或规划中的功能：
+
+- [x] 用户注册/登录（已上线 🎉）
+- [x] 个人资料编辑（已上线 🎉）
+- [ ] 💬 站内评论系统
+- [ ] 🔖 文章收藏
+- [ ] 📚 阅读历史
+- [ ] 👍 文章点赞
+- [ ] 🔔 关注通知
+- [ ] 🎨 个人首页定制
+
+## 💡 结语
+
+从 Nuxt 3 纯静态到 React + Go 前后端分离，SuBlog 的架构变迁本质上是一个**功能驱动**的过程。静态博客有它的位置——写写文章、展示内容完全够用。但当你想做的不仅仅是"展示"时，后端的能力就不可或缺了。
+
+这次重构最大的感触是：**架构选型不是越复杂越好，而是刚好够用最好**。纯静态阶段用 Nuxt 3 一点问题没有，直到功能需求超出了静态的边界，才自然推动到前后端分离。
+
+如果你也在纠结"要不要上后端"，不妨先问问自己：**你要做的是"展示内容"还是"提供服务"？**
+
+前者，静态就够了；后者，来吧，后端欢迎你。😄
+
+---
+
+**🎉 目前注册功能已经可以用了，后续更多好玩的功能正在路上。部分功能可能需要登录才能体验，快注册一个账号吧！**