项目经历

个人博客全栈站点「番薯头个人博客」— Nuxt 4 前台与 Go 运营后台

May 21, 20269 min read59 views

项目概述

番薯头个人博客（线上域名 sweetphotohead.com）是一套前后端分离的全栈个人站点：前台负责阅读体验与互动，Go 后端负责 API、鉴权、文件存储与支付回调。仓库采用 pnpm Monorepo，无 Turborepo，结构清晰、便于独立部署。

端	路径	角色
前台站点	`apps/frontend`	Nuxt 4 博客：首页、文章详情、分类列表、联系合作、会员中心
API 服务	`apps/backend`	Go（Gin + GORM）：REST API、JWT 鉴权、本地上传（OSS 目录）、支付与邮件

前端通过 Nitro 同源代理 /api/**、/oss/** 到 Go 服务；生产环境前台部署 Vercel，API 部署在自有服务器 Docker 容器（如 8.136.148.143:8080）。

业务背景与价值

内容运维：文章正文全部以 Markdown 维护，后台发布后在详情页由 @nuxtjs/mdc 渲染，支持目录（TOC）、标签与分类。
读者侧：首页与联系页支持构建期预渲染（SSG），文章列表与详情客户端拉取 API，兼顾首屏与 SEO。
运营侧：独立管理后台，覆盖文章发布/下架、分类、评论审核、用户管理、联系页配置、访问统计与文章举报处理。
创作者侧：会员注册登录后可投稿、维护个人资料与头像上传。
商业化触点：联系页支持合作咨询解锁（支付宝 / 微信 / PayPal 等支付能力，密钥与回调在 Go 侧配置）。
社区延伸：友链采用 一人一篇 独立 Markdown 文章记录（如第一位友链 Heureka's Blog），便于长期维护与互链 SEO。

前台站点（`apps/frontend`）

技术栈

框架：Nuxt 4 + Vue 3 + TypeScript
UI：Nuxt UI 4、Tailwind CSS 4
内容：@nuxtjs/mdc Markdown 渲染、文章目录与阅读时长估算
工程：pnpm workspace（包名 frontend）、ESLint、Husky + lint-staged
部署：Vercel（apps/frontend 为 Root Directory，vercel.json 从仓库根安装依赖并构建）

路由与渲染策略

模块	路径示例	说明
首页	`/`	预渲染；展示精选文章、分类筛选
博客列表	`/blog`	分类 / 分页列表
文章详情	`/article/:slug`	Markdown 正文、评论、举报、上下篇
联系合作	`/contact`	预渲染壳 + API 拉取联系配置与支付解锁
会员	`/auth/`、`/member/`	注册、登录、投稿、个人资料（`ssr: false`）
管理后台	`/admin/*`	仪表盘、文章、分类、评论、用户、联系设置、举报（`ssr: false`）

nuxt.config.ts 中通过 routeRules 将 /api、/oss 代理到 NUXT_API_PROXY_TARGET 指向的 Go 服务，避免浏览器跨域；管理端与会员端关闭 SSR，降低服务端依赖与部署复杂度。

主要职责与实现要点

Markdown 文章体系
- 后台编辑 title、slug、content（Markdown）、封面、分类与标签。
- 详情页解析 TOC、标签条、封面与评论线程；列表接口与详情接口分离，控制 payload 体积。
组件与体验
- 自研 Ink* 页面组件（首页、导航、页脚、博客列表、联系页等），配合骨架屏组件优化加载态。
- 暖色系视觉（品牌色 #e05a4e / #a83129），与 stitch 设计稿对齐。
Monorepo 与上线
- 根目录 pnpm-workspace.yaml 仅纳入 apps/frontend；根脚本 pnpm dev:frontend / pnpm build:frontend 统一调度。
- 处理 Vercel + pnpm 的构建与运行时依赖（如 entities、Nitro vercel preset、友链与管理端路由规则）。

个人收获（可写进简历的表述）

在 Nuxt 4 下实践 SSG/CSR 混合、routeRules 代理与 Monorepo 发布流程。
完成 Markdown 内容站 从编辑、渲染到评论互动的完整前台链路。
积累 Vercel 部署排错 经验（输出目录、filter 包名、serverless 依赖解析等）。

API 服务（`apps/backend`）

技术栈

语言 / 框架：Go 1.23+、Gin
数据：GORM + MySQL（自动迁移、启动时 bootstrap 管理员）
鉴权：JWT（管理员 / 会员分轨）
配置：YAML（config/config.yaml），支持 Docker 挂载与 CONFIG_PATH
其他：Resend 邮件验证码、支付宝 / 微信支付、PayPal Server SDK、本地文件「OSS」目录

接口分层（节选）

分组	能力
`/api/public/*`	公开文章、分类、评论、联系页、导航 spotlight、访问统计
`/api/auth/*`	会员注册、登录、找回密码、邮箱验证码
`/api/member/*`	会员投稿 CRUD、资料、图片上传
`/api/admin/*`	文章发布流、分类、评论、用户、联系配置、统计、举报、上传
`/api/payments/*`	国内支付创建、订单查询、支付宝 / 微信 / PayPal 回调
`/oss/**`	静态文件（封面、头像、正文插图）

上传按 purpose 分目录：article-covers、avatars、article-content，返回可外链 URL，与前端 Markdown 插图配合。

部署与运维

Docker：多阶段构建镜像 personal-blog-server，docker-compose 挂载宿主机 ./data/oss 与配置文件。
数据库：MySQL 独立容器，DSN 通过 host.docker.internal 或同 Docker 网络连接。
与 Vercel 前台分离：前台只负责页面与代理，业务与密钥集中在 Go 服务，便于安全与扩展。

个人收获（可写进简历的表述）

使用 Gin + GORM 设计 REST API 与分层（handler / service / repository）。
实现 JWT 双角色鉴权、文件上传、支付回调与邮件验证等典型后端场景。
掌握 Docker 化部署 与前后端分域联调（本地代理 / 线上 NUXT_API_PROXY_TARGET）。

协作与工程侧说明

前后端契约：前端统一 $fetch('/api/...')，字段与错误码以后端为准；类型在 app/types/* 与 composables 中对齐。
内容模型：文章、分类、标签、评论、用户、联系设置、支付订单、举报与访问记录等表结构由 GORM 模型与迁移维护。
仓库结构：personal-blog 根目录为 pnpm Monorepo；apps/backend 可单独 go run ./cmd/server，不纳入 Node workspace。
发布到本站：将本文复制到后台「文章」→ 分类选 项目经历 → Slug 建议 project-personal-blog → 正文粘贴 Markdown（可去掉顶部 YAML，或仅保留给静态站生成器使用）。

仓库路径备忘

personal-blog/
├── apps/frontend/     # Nuxt 4 前台 → Vercel
├── apps/backend/      # Go API → Docker / 云服务器
├── pnpm-workspace.yaml
├── package.json
└── pnpm-lock.yaml

本地开发：

# 根目录
pnpm install && pnpm dev:frontend

# 另开终端
cd apps/backend && cp config/config.example.yaml config/config.yaml && go run ./cmd/server

文档根据当前仓库 personal-blog 代码结构整理；日期与标签可按博客后台习惯调整。

Comments (0)