GitHub 作为 CMS：模块化、轻松的开发者作品集
发布: (2026年2月2日 GMT+8 14:27)
3 min read
原文: Dev.to
Source: Dev.to
问题：作品集的“腐烂”
管理和刷新作品集可能非常耗时。许多开发者面临以下困境：
- 持续的内容更新
- 视觉资源同步保持一致
- 更改后防止站点出现破损
创新：GitHub 作为无头 CMS
- 内容 – 以本地 MDX 文件形式存储。
- 资源 – 直接在
public/文件夹中管理，实现实时的 GitHub 预览。Next.js 会自动优化图片，省去处理视觉资源的常见麻烦。 - 校验 – 由 Velite 强制执行；数据格式错误（例如缺少项目日期）会导致 GitHub Action 使 PR 检查失败，从而防止构建破损。
利用 Google AI 工具
- Google Gemini Pro – 用于深度调研、数据分析与报告。它帮助识别常见的作品集痛点，并指导技术栈的选择、可行性评估以及风险缓解。
- Google Antigravity agents – 集成用于额外的自动化（此处省略细节）。
技术栈
| 组件 | 技术 |
|---|---|
| 框架 | Next.js 16.1（App Router）配合 React 19 |
| 样式 | Tailwind CSS v4.1 – CSS‑first 配置，使用语义变量实现即时主题切换 |
| 内容层 | Velite 0.1.8 + Zod 用于对 MDX 文件进行严格的构建时模式校验 |
| 部署 | 通过 Docker 容器化，部署到 Google Cloud Run，并使用 GitHub 的持续部署流水线 |
“自驾”仓库
GitHub 本身即充当 CMS：
- 内容和图片全部通过 GitHub Web UI 更新。
- 安全更新（代码检查、类型检查）自动合并。
- 框架升级会被标记为需要手动审查，确保作品集在无需频繁维护的情况下持续演进。
可组合的 LEGO 架构
站点由模块化的“块”（如 Hero、Gallery、Testimonials）构建。所有块在单一文件 (page.tsx) 中组装，可无限重新排列，而无需触及复杂代码。
高性能视觉效果
- Lighthouse 评分始终保持 98+。
- 自定义 MDX 图片拦截组件消除了 累计布局偏移 (CLS)，确保上传的图片渲染平滑且一致。
技术深度解析
感谢 Google AI 为本次刷新提供的灵感。该方案不仅解决了个人的痛点，也为希望拥有低维护、高性能作品集的开发者提供了可复用的模式。