karngyan.com — React 作品集模板

karngyan.com 是一个面向开发者的个人网站与博客模板，作者用它搭建了自己的站点，并公开了完整代码。模板的核心定位很明确：让写作者专注于内容，而不是花时间搭建基础设施。技术栈上选择了 TanStack Start（文件路由、SSR、类型化 loader）、React 19、Tailwind CSS v4 和 shadcn/ui，内容层使用 MDX，支持 Shiki 代码高亮和 GFM 表格，并内置了 RSS、sitemap、robots.txt、llms.txt 等服务端路由，以及基于 satori 的 Open Graph 图片生成。默认部署目标是 Cloudflare Workers，一条命令即可上线，也支持通过 GitHub Actions 自动部署。

模板把个性化内容集中到了三个地方：site.config.ts（站点名称、URL、社交链接、导航、简历开关等，全部带类型检查）、图片资源（头像、肖像、照片墙、logo、favicon）、以及 src/content/articles/ 下的 MDX 文章。写新文章只需创建一个文件夹和一个 page.mdx 文件，文章索引、RSS、OG 图片都会在下次构建时自动更新。对于想快速拥有一个技术博客、且愿意接受 Cloudflare Workers 作为托管平台的开发者来说，这个模板的起点很高，作者也提供了 CLAUDE.md 帮助 AI 编码代理理解仓库结构。

需要留意的是，模板的部署默认绑定 Cloudflare，虽然基于 nitro 可以切换其他平台（如 Node、Netlify、Vercel），但需要自行修改 vite.config.ts 并参考 nitro 文档。另外，站点配置中的个人信息、工作经历、照片等都需要替换，且 site.config.ts 的类型检查意味着任何拼写错误都会导致构建失败，这既是约束也是保护。上线前记得核对 canonical URL、自定义域名设置以及 GitHub Actions 所需的 Cloudflare API 密钥。