这个网站

heyblaine.com，也就是你正在看的这个网站。它是一个自托管的 Next.js + Payload 应用：主页和项目文案放在代码里，博客文章在 Payload CMS 里管理，部署在自己的服务器上。

2026 至今自托管个人主页与博客持续维护中Next.js

项目背景 / Problem

你正在看的 heyblaine.com：项目和主页文案跟着代码走，博客文章放在自托管的 Payload CMS 里，一起跑在自己的服务器上。

我的角色：AI Native：信息设计、架构取舍、实现组织与部署验证

架构

  1. 项目和主页文案跟着代码走： 项目页有很多定制排版和反复推敲的文字，放在前端内容模块里，每次修改都留在 Git 历史中。
  2. 博客文章放在 Payload CMS： 可以直接在后台写，也可以在本地写好 Markdown 再导入；标签、系列和文章关联由数据库管理。
  3. 部署： 应用跑在 VPS 的 Docker 里，宿主机上的 Caddy 负责证书和反向代理。日常改文案只需要交付新的构建产物，不用重新打镜像。
抽象示意：Markdown 源稿、Payload 文章表单和公开文章卡片，下方是缓存失效、IndexNow、RSS 和 Sitemap
示意图：文章在 Payload 里管理，发布后自动失效缓存、通知搜索引擎并更新订阅与站点地图。

发布与性能

  • Markdown 导入时自动把图片转成 WebP，减轻手机端加载负担。
  • 文章发布后自动失效缓存、通知搜索引擎，并更新订阅和站点地图。
  • 发布前先验证，再交付构建产物。
CMS 编辑结构与公开博客阅读结构的示意对照
编辑侧保留结构化管理，阅读侧专注正文排版。结构示意，非真实文章截图。

项目维护

网站的项目、经历和博客集中在一个应用中管理。项目介绍按产品、Agent Skills 和过往实践分组。

结果与范围 / Now

主页、项目和博客收进同一个 Next.js + Payload 应用，不再维护第二套站点

Markdown 导入时自动转换 WebP 图片，减轻手机端加载负担

用 Docker 运行应用、宿主机 Caddy 管证书，发布前先验证再交付构建产物

Next.jsPayload CMSReactTailwind CSSDockerCaddyGitHub Actions