有审美、有边界感：FlecBlog 现代化全栈博客系统深度解析
来源: 码农先森（微信公众号）
GitHub: https://github.com/talen8/FlecBlog
发布平台: 程序员茄子（chenxutan.com）
标签: Go语言, 全栈博客, Vue, Nuxt, PostgreSQL, Docker
引言
做博客系统的项目很多，但真正能让人停下来多看两眼的不多。
FlecBlog 是一个基于 Go 语言开发的三端分离全栈博客系统，把前台博客、后台管理、后端服务拆成了清晰的三个部分。GitHub 上线不久已经获得了不少关注，被开发者评价为"有审美、有边界感"的现代化博客解决方案。
今天我们就来完整拆解一下这个项目。
什么是 FlecBlog？
FlecBlog 是一个围绕内容创作打造完整产品闭环的博客系统。它最大的特点是三端分离架构：
| 模块 | 技术栈 | 定位 |
|---|---|---|
| server | Go 1.25 / Gin / GORM / PostgreSQL | 后端服务、认证、接口、数据、定时任务 |
| admin | Vue 3 / Element Plus / Vite | 内容管理、仪表盘、编辑器、运营后台 |
| blog | Nuxt 4.2.2 / Vue 3 / SCSS | 博客前台、SSR、SEO、阅读体验 |
把前台博客、后台管理、后端服务拆成三个独立部分，好处很明显：既能保持表现力，也能维持长期可维护性。前台专注于阅读体验，后台专注于内容管理，服务端专注于业务逻辑和数据处理。彼此互不干扰，却又通过 API 有机协作。
为什么要选 FlecBlog？
市面上的博客系统多如牛毛，为什么 FlecBlog 能引起注意？作者在文章中总结了四点：
1. 有完整的工程结构
不是那种"做出一个页面来展示"的 Demo 项目。FlecBlog 有完整的分层架构、数据库设计、API 规范、中间件体系、Cron 定时任务。从代码组织到部署方案，都是按照生产级标准来设计的。
2. 管理端与博客端解耦
很多博客系统的管理后台和前台是同一个项目里的两个模块，代码耦合严重，改一处可能影响另一处。FlecBlog 把 admin（管理端）和 blog（前台）完全拆开，前后台体验更纯粹，各自独立迭代，互不影响。
3. 支持博客常见能力
文章、评论、友链、统计等博客常见能力都有覆盖。既适合个人品牌博客起步，也适合后续扩展成内容型产品。
4. 三端均可独立部署
server、admin、blog 三个模块各自有 Docker 镜像，可独立部署、单独扩容。结合 Nginx 配置可以轻松实现多服务协同。
技术栈详解
Server - 后端服务
Go 1.25 + Gin 框架是当前 Go Web 生态里最成熟的组合之一。GORM 作为 ORM 层，PostgreSQL 作为主数据库，整体架构清晰。
服务端提供了非常丰富的功能：
- 认证：JWT、OAuth2、Goth 支持多种登录方式
- API 文档：内置 Swagger，打开浏览器就能看到完整的接口文档
- 中间件：认证、CORS、日志、限流、RBAC 权限控制一应俱全
- 定时任务：内置 Cron 支持
- 扩展能力：User-Agent 解析、飞书 SDK、微信公众号 SDK
目录结构也值得一说：
server/
├── api/ # API 定义
│ ├── middleware/ # 中间件（认证、CORS、日志、限流、RBAC等）
│ ├── router/ # 路由配置
│ └── v1/ # API v1 版本接口
├── cmd/ # 应用入口
├── config/ # 配置管理
├── docs/ # Swagger 生成的文档
├── internal/ # 内部业务逻辑
│ ├── dto/ # 数据传输对象
│ ├── model/ # 数据模型
│ ├── repository/ # 数据访问层
│ └── service/ # 业务逻辑层
└── pkg/ # 可复用的包
DDD（领域驱动设计）的影子很明显，internal 下的 dto/model/repository/service 分层清晰，代码复用和维护都很方便。
Admin - 管理端
Vue 3 + Vite + Element Plus + TypeScript，当前前端开发的主流技术栈组合。
亮点功能：
- Markdown 编辑器：基于 CodeMirror 6，对写作者非常友好
- 数据可视化：ECharts + echarts-wordcloud，仪表盘的数据图表既实用又好看
- 状态管理：VueUse 提供 Composition API 风格的工具函数
Blog - 博客前台
Nuxt 4 是 Vue 的全栈框架，相比传统 SSR 方案，Nuxt 提供了开箱即用的路由、SEO、PWA 支持。
文章渲染方面：
- markdown-it 处理 Markdown 解析
- Highlight.js 提供代码高亮
- Mermaid 支持流程图、时序图等图表
- medium-zoom 图片放大体验
SEO 方面集成了 @nuxtjs/seo，支持动态 sitemap.xml、robots.txt、Atom Feed 订阅、Open Graph 标签、结构化数据。对 SEO 有要求的个人博客来说，这些功能非常实用。
快速部署
FlecBlog 提供了完整的 Docker Compose 一键部署方案，推荐使用。
步骤一：创建 .env 文件
# Database Configuration
DB_PASSWORD=your_database_password
# JWT Configuration
JWT_SECRET=your_jwt_secret_key
# Site Configuration
API_URL=https://api.yourdomain.com/api/v1
步骤二：创建 docker-compose.yml
FlecBlog 的 docker-compose 文件设计得很完整，包含：
- server：Go 后端服务，8080 端口
- blog：Nuxt 前台，3000 端口
- admin：Vue 管理端，4000 端口
- postgres：PostgreSQL 15 数据库
启动只需一行命令：
docker-compose up -d
部署后访问地址
| 服务 | 地址 |
|---|---|
| 博客前台 | http://localhost:3000 |
| 管理后台 | http://localhost:4000 |
| API 文档 | http://localhost:8080/swagger/index.html |
从源码运行
如果需要本地开发，从源码运行也很方便：
Server（需要 Go 1.25+）：
cd server
go mod download
cp .env.example .env
go run cmd/main.go
Admin（需要 Node.js 20+）：
cd admin
npm install
cp .env.example .env
npm run dev
Blog（需要 Node.js 20+）：
cd blog
npm install
cp .env.example .env
npm run dev
注意 PostgreSQL 15+ 的权限问题：如果使用 PostgreSQL 15+，且数据库用户不是 postgres 超级用户，需要额外授权：
GRANT CREATE ON SCHEMA public TO <用户名>;
核心特性深入解读
SSR 服务端渲染
FlecBlog 的博客前台采用 Nuxt 4 的 SSR 模式，这是它相对于传统博客系统的一个明显优势。
SSR 意味着：
- 更好的 SEO：搜索引擎能直接抓取到完整的 HTML 内容，不需要等待 JS 执行
- 更快的首屏加载：首屏内容在服务端直接渲染好，用户不用等白屏
- 更好的用户体验：即使网络较慢，用户也能快速看到有意义的页面内容
完整的 SEO 体系
Nuxt 4 的 SEO 能力加上 @nuxtjs/seo 模块，FlecBlog 提供了：
- 动态 sitemap.xml：自动生成，更新文章后自动同步
- robots.txt：搜索引擎爬虫规则配置
- Atom Feed：RSS 的替代方案，方便内容订阅
- Open Graph 标签：社交分享时显示精美的预览卡片
- 结构化数据：让搜索引擎更好地理解内容
JWT + OAuth2 双认证
服务端同时支持 JWT 和 OAuth2，这意味着：
- 普通用户可以通过用户名密码获取 JWT Token 访问 API
- 也可以接入第三方 OAuth 登录（如 Google、GitHub 等）
对于个人博客来说，OAuth2 可能用得不多，但这个设计思路很值得学习——把认证层设计成可插拔的，未来扩展很方便。
RBAC 权限控制
中间件层实现了完整的 RBAC（基于角色的访问控制），管理端的不同用户可以有不同权限：超级管理员、文章编辑、评论审核等。这个在运营类博客或多人协作场景下很有价值。
设计理念
作者在文章结尾说了一句很值得品味的话：
"FlecBlog 想做的不是'更复杂'，而是'更完整'。简约，不是把内容做空。高级，也不是故作夸张。它更像一个安静但可靠的内容容器，适合长期写作，也适合慢慢生长出自己的品牌风格。"
这句话道出了 FlecBlog 的核心定位——不追求功能堆砌，而是追求恰到好处。够用的功能、清晰的架构、好看的前台、稳定的性能，这才是长期运营一个博客真正需要的东西。
与其他博客系统的对比
| 维度 | FlecBlog | Hexo/Hugo | WordPress |
|---|---|---|---|
| 部署复杂度 | 中等（Docker一键） | 低（静态文件） | 中等 |
| 扩展性 | 高（API驱动） | 低（主题插件） | 高 |
| SSR/SEO | ✅ 完整 | ❌ 需额外配置 | ✅ |
| 技术栈 | Go+Vue+Nuxt | 各不相同 | PHP |
| 管理后台 | ✅ 完整 | ❌ | ✅ |
| 移动端适配 | ✅ | 依赖主题 | 依赖主题 |
FlecBlog 在"现代化"和"完整性"之间找到了一个很好的平衡点。不像 Hexo/Hugo 那样需要手动维护，也不像 WordPress 那样背负沉重的历史包袱。
适用场景
FlecBlog 适合以下几类用户：
- 个人技术博主：想要一个好看、SEO 友好、技术栈现代的博客平台
- 技术团队内网文档站：三端分离架构方便团队协作
- 独立开发者产品官网：可以快速搭建一个带博客的产品官网
- 学习全栈开发的实践项目：代码结构清晰，适合作为学习参考
快速上手建议
如果你是第一次部署 FlecBlog，建议按这个顺序来：
- 先用 Docker 一键部署体验：确认整体功能是否符合需求
- 阅读 Swagger 文档：了解 API 设计思路，对后续扩展很有帮助
- 看 Server 的 internal 目录结构：这是整个项目架构最核心的部分
- 尝试从源码运行：本地开发环境跑通后，再考虑生产部署
小结
FlecBlog 是一个值得关注的博客系统项目。它的亮点不在于功能有多花哨，而在于：
- 三端分离的架构设计合理，扩展性强
- Go + Vue + Nuxt 的技术栈组合现代，生产可用
- Docker 一键部署降低了上手门槛
- SSR + 完整 SEO 满足内容创作的核心需求
- 设计理念务实——不追求复杂，追求完整
对于想要认真做内容、需要一个稳定好看、技术过硬的博客平台的开发者来说，FlecBlog 是个值得尝试的选择。
项目地址: https://github.com/talen8/FlecBlog
本文首发于「程序员茄子」博客，原文链接：https://chenxutan.com