这篇文章最初来自我的博客文章。我放置这篇文章是为了演示如何使用 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 无头 CMS
- 部署：Vercel
功能特性
以下是我的作品集和博客的某些功能特性
SEO 友好
整个项目都是以 SEO 为重点开发的。我使用了适当的元标签、描述和标题对齐。这个网站现在已被 Google 索引。
你可以使用”sat naing dev”等关键词在 Google 上搜索这个网站
此外，由于正确使用了元标签，这个网站在分享到社交媒体时会显示得很好。
动态站点地图
站点地图在 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) 说声”谢谢”，他为我网站的主页部分绘制了一幅美丽的插图。