从一个主页到四个站点:DX Agent 建站实录

DX Agent 的代码按四个站点组织：主页、项目站、博客与应用站。这篇文章记录源码结构、构建方式与托管方案，方便有类似需求的人参考。

为什么不止一个主页

这次建站需要同时展示 GitHub 账号 ouyang-2019 名下的公开项目、发布技术长文，并提供可直接使用的小工具。把这些内容都放在一个页面，会让导航和后续维护变得复杂。

因此按用途安排四个站点：主页放概览与入口；项目站给每个项目一页完整说明；博客承载像本文这样的长文；应用站存放纯前端的小工具。四个站点共享同一套设计语言，访客可以沿着导航在子域之间切换。

技术选型:纯静态,零依赖

四个站点全部使用原生 HTML、CSS 与 JavaScript 写就,不引入任何框架、构建链之外的依赖、外部字体、CDN 或图标库。页面用到的图标全部是内联 SVG。

这个选择基于几个可以直接验证的事实:

• 站点没有自建登录、评论或跟踪脚本，主要内容在构建时就是确定的；
• 不引入第三方前端包，减少了依赖升级与供应链审查的负担；
• 各站共享核心样式与导航脚本，应用工具再使用独立的本地脚本。

代价是缺少组件化抽象,四个站点的页头页脚是手工保持一致的。对这个规模的站点来说,这是可以接受的取舍。

一个仓库,四个站点

所有站点的源码都在同一个仓库里,源码与页面内容托管在 GitHub 账号 ouyang-2019 下。仓库里只有一个 public/ 目录:根层级是主页,blog/、apps/、projects/ 三个子目录各是一个子站。

构建脚本是仓库根目录下的 scripts/build.mjs,本地执行:

node scripts/build.mjs

它把 public/ 拆分成 dist/ 下的四个站点目录:主页文件进入 dist/home,三个子站目录分别复制到 dist/blog、dist/apps、dist/projects,并把共享的 styles.css 与 main.js 放进每个站点根部。这样每个子站都可以被独立部署,又共享同一套样式与交互。

本地预览任意一个站点,只需要指向对应目录的静态服务,例如:

python -m http.server 4173 --directory dist/blog

托管方案:Cloudflare Pages

仓库的部署计划是在 Cloudflare Pages 中为同一 GitHub 仓库创建四个项目。每个项目的构建命令都是 node scripts/build.mjs；发布目录按站点分别填写 dist/home、dist/blog、dist/apps 和 dist/projects。先检查各项目的预览地址，再在对应项目中绑定 dxagent.cloud 或其子域。具体设置参考 Cloudflare Pages 多项目文档和自定义域名文档。

切换域名解析前，还应核对 Cloudflare 中已有的 DNS 记录，尤其是仍在使用的邮件 MX 与 TXT 记录，避免站点上线影响其他服务。

设计与可访问性

视觉上,四个站点沿用同一套「编辑感」的设计语言:克制的纸色与墨色配色、单一强调色、等宽字体的标签与元信息、纯 CSS 渐变的网格背景。共享样式表只维护一份,各子站再以独立的 site.css 覆盖自己的布局,避免四份样式渐行渐远。

可访问性不是事后补救,而是一组在编写时就定下的约束,每个页面都满足:

• 语义化地标与正确的标题层级,每个页面都有「跳转到主要内容」链接;
• 键盘可到达的所有控件都有清晰可见的焦点框;
• 主要按钮与导航控件设有适合触控的点击区域，移动端菜单在没有 JavaScript 时也会展开为完整导航；
• 尊重系统的「减少动态」偏好,滚动渐入与首屏动效在该偏好下自动关闭;
• 响应式布局覆盖 360px 手机、768px 平板与桌面宽屏。

接下来

站点结构到此就位。博客接下来会围绕 项目站 中各项目的真实开发进展更新;应用站也会在有新的可用工具时补充。本文描述的所有文件与脚本都可以在 GitHub 上查阅,欢迎对照验证。