IV.004 / 008
← 返回项目列表CasterWx.github.io.
本站——使用 Next.js、TypeScript 和 MDX 构建,静态导出部署于 GitHub Pages。
架构
本站是一个静态导出的 Next.js 应用。每个页面在构建时预渲染为纯 HTML/CSS/JS 文件,从 GitHub Pages 提供服务。
内容流水线
- 文章以
.mdx文件存于content/blog/ - 构建时,
gray-matter提取 frontmatter,@next/mdx将 MDX 编译为 React 组件 generateStaticParams()为每篇文章生成路由- 页面导出到
out/目录 - GitHub Actions 将
out/推送到gh-pages分支
关键决策
- App Router +
src/目录结构 - Tailwind CSS v4 CSS-first
@theme配置 @next/mdx框架级 MDX 编译集成- 无外部 CMS —— 内容即 Git 文件。推送即发布。
- 编辑风格 —— Atelier Zero 设计系统:暖纸底色、coral 单强调色、Playfair 斜体混排、罗马数字章节标记
性能
静态导出意味着零服务端开销。每个页面都是预构建的 HTML 文件,JavaScript hydration 最小化。唯一的运行时 JS 用于交互元素(导航高亮、动画微交互)。