本文原文来自我的博客文章。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。
关于使用 NextJS 和无头 CMS 开发我的第一个作品集网站和博客的经验。
动机
从我的大学生活开始，我就一直想用我的自定义域名（satnaing.dev）推出自己的网站。但直到这个项目之前，这从未实现。我做过几个关于 Web 应用程序开发的项目和工作，但我没有努力去做这件事。
那么，“博客呢？“你可能会问。是的，博客也在我的项目清单上有一段时间了。我一直想用一些最新的技术做一个博客项目。然而，我一直忙于我的工作和其他项目，所以博客项目一直没有开始。
最近，我倾向于以质量而非数量为重点来开发自己的项目。项目完成后，我通常会在 GitHub 仓库中放置一个合适的 readme 文件。但 GitHub 仓库的 readme 只适合技术方面（这只是我的想法）。我想写下我的经验和挑战。因此，我决定创建自己的博客。另外，在这一点上，我有足够的经验和信心来开发这个项目。
技术栈
对于前端，我想使用 React。但仅靠 React 不足以做好 SEO；而且我还必须考虑许多因素，如路由、图片优化等。因此，我选择了 NextJS作为我的主要前端技术栈。当然还有 TypeScript 用于类型检查。（据说当你习惯了 TypeScript 后，你会爱上它 😉）
对于样式，我使用 TailwindCSS。这是因为我喜欢 Tailwind 提供的开发者体验，而且与其他组件 UI 库（如 MUI 或 React Bootstrap）相比，它具有很大的灵活性。
该项目的所有内容都存放在 GitHub 仓库中。我所有的博客文章（包括这篇）都是用 Markdown 文件格式编写的，因为我很习惯这种格式。但是为了轻松地编写 Markdown 及其前置元数据，我使用了 Forestry 无头 CMS。它是一个基于 git 的 CMS，可以提供 Markdown 和其他内容。正因为如此，我既可以使用 Markdown 也可以使用所见即所得的编辑器来编写内容。此外，用它编写前置元数据也非常轻松。
图片和资源上传并存储在 Cloudinary中。我通过 Forestry 连接 Cloudinary，并直接在仪表板中进行管理。
总之，以下是我在这个项目中使用的技术栈。
- 前端：NextJS (TypeScript)
- 样式：TailwindCSS
- 动画：GSAP
- CMS：Forestry Headless CMS
- 部署：Vercel
功能
以下是我的作品集和博客的某些功能。
SEO 友好
整个项目的开发都注重 SEO。我使用了正确的 meta 标签、描述和标题对齐方式。该网站现已收录于 Google。
你可以使用关键词如”sat naing dev”在 Google 上搜索这个网站。
此外，由于正确使用了 meta 标签，该网站在分享到社交媒体时会显示良好。
动态站点地图
站点地图在 SEO 中扮演着重要角色。因此，该网站的每个页面都应包含在 sitemap.xml 中。每当我创建新内容、标签或分类时，网站都会自动生成站点地图。
浅色与深色主题
由于近年来的深色主题趋势，许多网站现在都默认包含深色主题。当然，我的网站也支持浅色和深色主题。
完全可访问
该网站完全可访问。你只需使用键盘就可以浏览。我实施了所有 a11y 增强最佳实践，例如在所有图片中包含 alt 文本、不跳过标题、使用语义化 HTML 标签、正确使用 aria 属性。
搜索框、分类与标签
所有博客内容都可以通过搜索框搜索。此外，内容可以按分类和标签进行筛选。这样，博客读者可以搜索并阅读他们真正想读的内容。
性能与 Lighthouse 分数
得益于正确的开发方法和最佳实践，该网站获得了非常好的性能和 Lighthouse 分数。以下是该网站的 Lighthouse 分数。
动画
最初我使用 Framer Motion 为这个网站添加动画和微交互。但是，当我尝试使用一些复杂的动画和视差效果时，我发现它与 Framer Motion 的集成不便（也许我不太擅长也不习惯使用它）。因此，我决定使用 GSAP 来处理我所有的动画。它是最流行的动画库之一，能够进行复杂的动画制作。你可以在该网站的几乎每个页面上看到动画和微交互。
结语
总之，这个项目给了我很多关于开发博客网站（SSG）的经验和信心。现在，我获得了关于基于 git 的 CMS 以及它如何与 NextJS 交互的知识。我还学习了 SEO、动态站点地图生成和 Google 收录流程。我将来会做出更好的项目。所以，敬请期待！✌🏻
最后但同样重要的是，我想对我的朋友 Swann Fevian Kyaw（@ToonHa）说声”谢谢”，他为我网站的 hero 区域画了一幅漂亮的插画。