个人内容平台

早期用过各类第三方平台和现成模板，排版受限、改动麻烦，几张高清图就能让页面卡死。于是我自己搭建了这套系统：前端代码直接管案例档案和高保真排版，自托管的 Payload CMS 承载长文思考，让写字、归档和线上渲染完全受自己掌控。

2026 至今自托管个人主页与内容管理系统持续迭代演进Next.js

项目背景 / Problem

把个人主页、实践案例档案与博客文章发布收拢进同一套 Next.js + Payload CMS 架构中。

我的角色：架构规划、信息设计与全栈开发

故事起点：受够了在第三方平台的束手束脚

我很早就开始在各类平台上记录想法。用过 Notion、折腾过商业 SaaS，也尝试过现成的静态博客模板。

但时间一长，痛点越来越难以忍受：

  • 想增加一个独特的项目展示模块，第三方平台的排版布局完全卡死；
  • 每更新一个项目的文字细节，都得在代码库里翻来覆去改散落在组件中的硬编码；
  • 现成模板塞满了乱七八糟的冗余脚本，几张高清示意图就能让移动端加载卡死。

这让我下定决心：自己从零搭建一套属于自己的内容资产枢纽。我必须完全掌控从本地写作、数据管理到公网呈现的每一步。

Markdown 和 CMS 编辑，经内容来源到 Next.js 公开页面的架构示意
博客内容由 Payload 管理，主站文案来自前端模块。Markdown 可手动导入。

架构权衡：代码管展示，CMS 管内容

在演进过程中，我推翻了早期的碎片拼装，将系统重构成了一个单一但边界清晰的 Next.js + Payload 应用：

  1. 项目案例与关于页归代码管理：项目页包含大量定制化的交互、排版与频繁推敲的文案，直接收拢在前端内容模块内，改动跟着 Git 走，版本历史一目了然。
  2. 长篇思考归 Payload CMS 管理：文章可以直接在 CMS 后台编辑，也可以在本地完成 Markdown 写作后，手动运行导入脚本。标签、系列和文章关联由数据库托管。
  3. 资产优化与部署边界：Markdown 导入脚本支持把图片转换为 WebP，减轻媒体传输负担。生产部署采用 VPS 上的 Docker 容器运行应用，由宿主机 Caddy 管理 SSL 证书与反向代理；发布前完成验证，再手动触发部署流程。
CMS 编辑结构与公开博客阅读结构的示意对照
编辑侧保留结构化管理，阅读侧专注正文排版。结构示意，非真实文章截图。

结果与范围 / Now

摆脱第三方托管平台限制，构建起从本地 Markdown 写作到公网自适应渲染的低阻力流水线

在 Markdown 导入流程中加入 WebP 图片转换，减轻媒体传输负担

规范部署流程，通过 Docker Compose 与 Caddy 实现了低运维开销的长期自托管运营

Next.jsPayload CMSReactTailwind CSSDockerCaddyGitHub Actions