这个网站

我用过 Notion,也试过现成的博客模板。想加一个自己的项目展示方式,排版就卡住了;几张高清图又能让手机页面变慢。后来我干脆自己搭了这个网站:项目页跟着代码和 Git 走,文章在 CMS 里写,部署到自己的服务器。它也是我每个新项目的落脚点。

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

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

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

为什么要自己搭

我很早就开始在各种平台上记东西。时间一长,问题越来越具体:想加一个自己的项目展示模块,平台的版式不允许;想改一个项目的状态,要在好几个地方分别改;现成模板塞满了用不上的脚本,几张图就能让手机页面变慢。

我想要一个从写字、管理到上线每一步都自己说了算的地方,于是和 AI 一起把它搭了出来。

抽象示意:Markdown 源稿、Payload 文章表单和公开文章卡片,下方是缓存失效、IndexNow、RSS 和 Sitemap
示意图:文章在 Payload 里管理,发布后自动失效缓存、通知搜索引擎并更新订阅与站点地图。

代码管展示,CMS 管文章

这个网站经过几轮重构,现在是一个边界清楚的 Next.js + Payload 应用:

  1. 项目和主页文案跟着代码走: 项目页有很多定制排版和反复推敲的文字,放在前端内容模块里,每一次修改都留在 Git 历史中。
  2. 博客文章放在 Payload CMS: 文章可以直接在后台写,也可以在本地写好 Markdown 再导入;标签、系列和文章关联由数据库管理。
  3. 部署保持简单: 应用跑在 VPS 的 Docker 里,宿主机上的 Caddy 负责证书和反向代理。日常改文案只需要交付新的构建产物,不用重新打镜像。
CMS 编辑结构与公开博客阅读结构的示意对照
编辑侧保留结构化管理,阅读侧专注正文排版。结构示意,非真实文章截图。

东西多了,也要定期收拾

项目越做越多,网站也越来越杂。这次更新时,我把重复的项目列表、没人点的页面和过时的经历一起收拾了:项目按“产品、Agent Skills、更早的实践”三组排,经历合并到了关于页。少一点入口,找东西反而更快。

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

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

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

Next.jsPayload CMSReactTailwind CSSDockerCaddyGitHub Actions