本文原载于我的博客，放在这里演示如何用 AstroPaper 主题写博文。
使用 NextJS 和 Headless CMS 开发个人作品集网站与博客的经历。
动机
上大学以来，我一直想用自定义域名 (satnaing.dev) 搭建个人网站。但直到这个项目才真正实现。虽然做过不少 Web 应用开发的项目，却始终没把这件事提上日程。
那你可能会问：“博客呢？“是啊，博客也在我计划清单里躺了很久。我一直想用最新的技术做个博客项目，但总被工作和其他项目搁置。
最近我倾向于以质量而非数量来开发项目。项目完成后通常会在 GitHub repo 写一个规范的 readme，但 readme 只适合技术层面的内容。我想把经历和挑战记录下来，于是决定做个博客。而且现在，我也有足够的经验和自信来完成这个项目。
技术栈
前端方面，我想用 React，但光用 React 对 SEO 不够友好，还得考虑路由、图片优化等问题。所以我选了 NextJS 作为前端框架，当然还有 TypeScript 做类型检查。
样式方面，我用 TailwindCSS，因为我喜欢它的开发体验，而且比 MUI 或 React Bootstrap 等组件库灵活得多。
所有内容都托管在 GitHub 仓库中。所有博文（包括这篇）都用 Markdown 格式，因为我对此很熟悉。为了省力地写 Markdown 和 frontmatter，我用了 Forestry Headless CMS。它是一个基于 Git 的 CMS，支持 Markdown 等内容格式，可以切换 Markdown 或所见即所得编辑器。而且写 frontmatter 非常方便。
图片和资源都上传到 Cloudinary，通过 Forestry 连接和管理。
总结一下技术栈：
- 前端：NextJS（TypeScript）
- 样式：TailwindCSS
- 动画：GSAP
- CMS：Forestry Headless CMS
- 部署：Vercel
功能特性
SEO 友好
整个项目以 SEO 为核心设计。使用了规范的 meta 标签、描述和标题层级。网站已被 Google 收录。
你可以在 Google 搜索 ‘sat naing dev’ 找到这个网站
此外，因为正确使用了 meta 标签，分享到社交媒体也能正常展示。
动态 Sitemap
Sitemap 对 SEO 很重要。所以网站的每个页面都应包含在 sitemap.xml 中。我在创建新内容、标签或分类时自动生成 sitemap。
明暗主题
随着近几年暗色模式流行，很多网站已默认支持。我的网站当然也支持明暗主题切换。
完全无障碍
网站完全支持无障碍访问。只使用键盘即可导航。我遵循了所有 a11y 最佳实践：所有图片有 alt 文本、不跳标题层级、使用语义化 HTML 标签、正确使用 aria-attributes。
搜索框、分类与标签
所有博客内容可通过搜索框搜索，也可按分类和标签筛选。
性能与 Lighthouse 评分
得益于良好的开发和最佳实践，网站获得了优秀的性能和 Lighthouse 评分。
动画
最初我用 Framer Motion 添加动画和微交互。但在尝试复杂动画和视差效果时发现不太顺手。于是改用 GSAP，它是目前最流行的动画库之一，能做各种复杂动画。
结语
这个项目让我对开发博客站点（SSG）有了很多经验和信心。我学到了 Git-based CMS 如何与 NextJS 交互，也了解了 SEO、动态 sitemap 生成和 Google 索引。未来我会做出更好的项目，敬请期待！✌🏻
最后，感谢我的朋友 Swann Fevian Kyaw（@ToonHa）为网站 Hero 区域画了精美的插画。