Next.js + Payload CMS 如何做个人品牌中枢

1. 开头：我为什么想做这个网站

我一开始想做个人品牌网站，并不是因为想单纯做一个博客。

更直接的原因是：我希望有一个别人可以快速认识我的入口。无论是以后跳槽、接私活，还是展示自己做过的项目，我都需要一个比简历更完整、比聊天介绍更稳定的地方。

我希望别人打开这个网站之后，能够很快知道几件事：

• 我是一个做全栈和 AI 项目开发的工程师
• 我做过哪些项目
• 我怎样理解这些项目
• 如果有合适的机会，应该怎么联系我

我希望招聘方和客户能够通过历史项目和总结文章，了解我的开发能力、复盘习惯，以及我对系统设计的理解和取舍。

同时，我也希望朋友能通过这个网站了解我某一段时间的状态，包括技术成长、项目进展，以及近期的生命和信仰思考。

2. 为什么不是普通博客

一开始我也想过，个人网站是不是只要做成博客就够了。

但后来我发现，博客只能承载“我写了什么”，不能完整承载“我是谁、做过什么、能解决什么问题”。对我现在的阶段来说，我更需要的是一个个人品牌中枢，而不是一个单纯的文章列表。

这个网站至少要承载四类内容：

• 项目：展示我实际做过什么
• 文章：沉淀我从项目和工作里提炼出的经验
• 工具：展示我把想法做成可用东西的能力
• 联系入口：让别人可以继续了解我或联系我

所以这个站的重点不是“写博客”，而是把项目、文章、工具和个人介绍组织成一个整体。

之前我也写过一个以博客为主的个人网站，并且通过 AI 补充了不少功能。但实际测试下来，很多功能只是当时对话过程中产生的想法，并不真正适合我的个人情况。它看起来功能很多，但没有很好地服务“让别人快速认识我”这个核心目标。

3. 我希望它最终发挥什么作用

这个网站对我来说，最核心的作用是建立信任。

简历通常只能告诉别人我会什么技术，但很难说明我是否真的做过完整项目，也很难说明我是不是能把需求落地。而一个长期维护的网站，可以把这些信息慢慢沉淀下来。

我希望它最终能服务几个场景：

• 求职时，作为简历之外的补充入口
• 接单时，作为能力和案例展示页
• 做产品时，作为项目和文章的发布出口
• 自我复盘时，作为经验沉淀的地方

这也是我为什么会把它叫作“个人品牌中枢”。它不是一个短期页面，而是一个以后可以持续生长的内容和项目中心。

更准确地说，它不是一个“内容集合页”，而是一个信息中转站：

• 个人介绍告诉别人我是谁
• 项目案例告诉别人我做过什么
• 文章告诉别人我是怎么思考和复盘的
• 工具告诉别人我不只是会表达，也能把东西做出来
• 联系入口告诉别人下一步怎么找到我

这些内容放在一起，才能形成完整的职业画像。

4. 目前我准备放什么内容

最开始，我准备先把自己手里的几个项目整理出来。

这些项目不是简单放一个链接，而是要拆成更容易理解的内容：它解决什么问题、用了什么技术、有哪些完整功能、哪些地方体现了我的判断和实现能力。

第一批最重要的内容会围绕这几个项目：

• my-world：个人品牌站本身
• qiguang：一个完整的点餐和商城全栈项目
• yibao：一个人员配置和日程安排系统

后续我也希望把工作中遇到的难点慢慢提炼出来，写成文章。比如某个业务需求怎么拆、接口怎么设计、后台管理怎么组织、AI 如何辅助实现等。

最开始，我会先把这三个项目的基础结构和核心功能写清楚，再逐步深入到具体实现和复盘。相比之下，qiguang 的业务内容最丰富，后续也会成为我重点提炼的项目。

5. 为什么需要 CMS，而不是把内容写死

如果只是做几个静态页面，把内容直接写在代码里也可以。

但我希望这个网站后续能持续更新项目、文章、札记和工具。如果每次更新都要改代码、重新提交、重新发布，长期来看会很麻烦，也会降低我持续维护的意愿。

所以这个站需要一个后台。

后台的价值不是“看起来更高级”，而是让我可以用更稳定的方式管理内容：

• 项目可以新增、编辑、隐藏
• 文章可以先写草稿，再发布
• 首页精选内容可以调整
• 联系留言可以统一查看
• 后续还可以扩展更多内容类型

这就是我选择 Payload CMS 的原因之一。它可以和 Next.js 放在同一个项目里，同时又能提供内容管理能力。

这篇文章是第一篇，也算是整个个人品牌内容体系的起点。

如果把这个站想得更长一点，CMS 的价值不只是“方便改字”，而是让内容可以形成稳定流转：

• 项目做完以后，不是结束，而是进入提炼
• 提炼后的内容可以变成文章
• 文章可以回流到首页、专题页和项目页
• 新文章和新项目都可以继续补充到同一套内容结构里

这样一来，站点就不会变成一次性搭建的展示页，而会变成持续更新的内容系统。

6. 为什么选择 Next.js

选择 Next.js，主要是因为它适合做这种“内容 + 项目展示 + 工具”的站点。

这个网站不是纯静态页面，也不是单纯后台系统。它既需要有对外展示的页面，也需要有一些动态内容和工具能力。Next.js 对这种混合型网站比较合适。

对我来说，Next.js 的价值主要有几点：

• 它基于 React，符合我当前主要使用的技术方向
• 它适合做页面路由清晰的网站
• 它可以承载前台展示，也可以结合后台和接口
• 以后如果要继续扩展工具、内容模型、项目详情页，也比较灵活

所以我不是为了追新才选 Next.js，而是因为它和我现在的目标比较匹配。

最近一年多，因为工作的原因，我的主要技术栈逐渐从 Vue 转向 React。选择 Next.js，一方面是为了贴合现在的工作和个人项目方向，另一方面也是希望通过这个项目继续加深对 React 生态的理解。

7. 为什么是 Next.js + Payload CMS 这个组合

Next.js 负责前台体验，Payload CMS 负责内容管理。

这个组合对我来说比较顺手，因为它把“展示”和“管理”放到了一套体系里。前台可以自由设计页面，后台可以稳定管理内容，中间的数据结构也可以根据我的网站需求来建模。

我希望这个网站不是一次性写完就放着，而是可以持续迭代：

• 今天先放项目
• 之后补文章
• 再之后补工具
• 后面还可以做项目专题、文章合集、AI 工作流记录

如果没有内容后台，这些变化会越来越难维护。
如果只有 CMS，没有足够灵活的前台框架，展示效果又容易受限制。

所以 Next.js + Payload CMS 对这个项目来说，不只是技术组合，而是为了让这个网站能长期维护。

8. 这个网站的结构设计

我现在对这个站的结构，大致分成几个部分：

首页

首页承担第一印象。它要让别人快速知道我是谁、我在做什么、我能提供什么价值。

目前首页有Hero、今日微光、精选项目、最新内容模块。

关于我

关于页不是写一段空泛介绍，而是说明我的能力结构、工作方式和目标方向。

我希望别人通过关于页记住两个关键词：全栈能力和 AI 项目落地能力。

项目

项目页是最重要的能力证明。它不应该只是展示截图，而是要说明项目背景、核心功能、技术实现和复盘价值。

我准备先放 my-world、qiguang、yibao 这三个项目。每个项目都会分别说明项目背景、使用场景、核心功能、技术实现和复盘价值。

文章

文章页用于承载项目复盘、技术总结、工作难点和 AI 实践记录。

第一批文章会优先围绕 my-world、qiguang、yibao 展开，先提炼每个项目最有代表性的部分，再慢慢深入到具体业务、技术实现和复盘。

工具

工具区用来展示我把具体需求做成可用功能的能力。比如图片处理工具、后续可能加入的其他小工具。

目前公开的是图片处理能力；登录后，还可以使用图片生成和“今日微光”数据生成功能。

联系入口

联系页用于承接合作、招聘、交流和留言。

目前保留了邮箱、微信扫码，以及页面留言。

在线聊天

网站右下角可以打开在线聊天。对话内容仅保留在当前页面中，访问者可以围绕网站已有内容进行提问，方便招聘方或客户快速了解我的项目和能力。

9. 这件事真正体现的价值

这件事的价值，不在于我用了某个技术栈，也不在于我会不会和 AI 对话。

现在很多人都可以通过 AI 快速生成页面和功能。如果只是展示“我做了一个网站”，其实并不能证明太多。

真正有价值的是，我能不能把零散的项目、文章、工具和经历，整理成一个别人看得懂、愿意继续了解的系统。

这个过程中更重要的是判断：

• 哪些项目值得展示
• 哪些内容应该沉淀成文章
• 哪些功能只是锦上添花，应该先放后面
• 网站的第一屏应该传达什么
• 项目详情应该怎么证明能力
• 内容应该如何持续更新

这些取舍，才是个人品牌站真正难的地方。

更重要的是，这些取舍最后会影响我能不能把网站变成机会入口。

如果这个站做得足够清楚，别人看到的就不是“一个网站”，而是：

• 这是一个能独立完成全栈项目的人
• 这是一个能把项目整理成文章的人
• 这是一个能持续输出的人
• 这是一个愿意把能力产品化的人

对求职来说，这会提升信任感。
对接单来说，这会降低沟通成本。
对未来做产品来说，这会让我的能力更容易被看懂。

10. AI 在这个项目里的位置

AI 在这个项目里确实帮了很多忙。

它可以帮我快速讨论方向、生成初稿、整理文档、补齐遗漏，也可以帮我推进一些具体功能。但我不希望这篇文章的重点变成“我是怎么用 AI 做网站的”。

因为会用 AI 不是最终价值，真正的价值是我能不能把 AI 生成的内容变成自己的资产。

对我来说，AI 更像一个放大器：

• 它能提高推进速度
• 它能帮我整理思路
• 它能降低实现门槛
• 但它不能替我决定这个网站真正要表达什么

目前使用 AI 最深的感受是：效率确实提高了，但对知识的深入学习反而容易被削弱。

很多需求可以借助 AI 很快推进，但如果不主动复盘，很容易停留在“能做出来”而不是“真正理解”的状态。前端能力还主要建立在我原有的基础上；后端如果是 JavaScript 生态，我理解和排查起来会相对顺手，但如果是新的框架或 Java 项目，更多时候还是依赖 AI 生成和辅助排查，距离真正独立掌握还有距离。

这也是我现在想要写文章和整理项目的原因：不是为了证明我用了多少 AI，而是希望把 AI 辅助完成的结果重新消化成自己的理解。

11. 当前的问题和下一步

现在这个网站还不是最终状态。

我目前最大的问题是：上班需求很多，很多功能都是借助 AI 快速完成的，但我并没有系统地把这些过程消化成自己的知识。

所以接下来，我不应该只继续堆功能，而是要先做几件事：

• 把已有项目整理成项目案例
• 从项目里提炼文章
• 把工作中的难点记录下来
• 把 AI 生成的结果转化成自己的理解
• 让 my-world 慢慢变成真正的个人品牌中枢

下一步，我准备先把这三个项目和工作中遇到的典型问题提炼成文章。等内容积累到一定数量之后，再系统学习 AI 相关内容，并继续补充更有代表性的 AI 应用项目。

换句话说，接下来的重点不是继续堆功能，而是让这个站形成一个稳定闭环：

项目产出经验，经验产出文章，文章反过来抬高站点的可信度，而站点再把这些可信度转化成求职、合作和产品机会。

12. 结尾

对我来说，Next.js + Payload CMS 不是为了堆技术栈，而是为了支撑一个更长期的目标。

我希望这个网站最终不只是一个“我做过什么”的展示页，而是一个持续沉淀项目、文章、工具和个人能力的地方。

它会记录我做过的项目，也会记录我如何理解这些项目。
它会展示我能做什么，也会逼着我把做过的东西真正整理清楚。

如果它能让别人更快理解我，也能让我自己更清楚地看见自己的积累，那它就不是一个普通网站，而是一个真正有用的个人品牌中枢。