本文原文来自我的博客文章。我放置这篇文章是为了演示如何使用 AstroPaper 主题编写博客文章/文章。
我使用 NextJS 和 headless CMS 开发我的第一个作品集网站和博客的经验。
动机
自从我的大学生活以来，我一直在考虑使用我的自定义域名（satnaing.dev）启动我自己的网站。但直到这个项目之前，这从未发生过。我已经完成了几个关于 Web 应用程序开发的项目和工作，但我没有努力做这件事。
那么，“博客呢？“你可能会问。是的，博客也已经在我的项目列表中一段时间了。我一直想使用一些最新技术制作博客项目。但是，我一直忙于我的工作和其他项目，所以那个博客项目从未开始。
这些天，我倾向于开发我自己的项目，注重质量而不是数量。项目完成后，我通常会在 GitHub 存储库中放置一个适当的自述文件。但 GitHub 存储库自述文件只适合技术方面（这只是我的想法）。我想写下我的经验和挑战。因此，我决定制作我自己的博客。另外，此时，我有足够的经验和信心来开发这个项目。
技术栈
对于前端，我想使用 React。但 React 本身对 SEO 不够好；我确实必须考虑许多因素，如路由、图像优化等。因此，我选择 NextJS 作为我的主要前端栈。当然还有 TypeScript 用于类型检查。（据说当你习惯了 TypeScript 时，你会爱上它 😉）
对于样式，我使用 TailwindCSS。这是因为我喜欢 Tailwind 提供的开发体验，与其他组件 UI 库（如 MUI 或 React Bootstrap）相比，它具有很大的灵活性。
此项目的所有内容都位于 GitHub 存储库中。我的所有博客文章（包括这篇）都以 Markdown 文件格式编写，因为我非常习惯这个。但是为了轻松地编写 Markdown 及其 frontmatter，我使用 Forestry headless CMS。它是一个基于 git 的 CMS，可以提供 Markdown 和其他内容。因此，我可以使用 Markdown 或所见即所得编辑器编写我的内容。此外，使用它编写 frontmatters 是一件轻而易举的事。
图像和资源上传并存储在 Cloudinary 中。我通过 Forestry 连接 Cloudinary，并直接在仪表板中管理它们。
总之，这些是我为这个项目使用的技术栈。
- 前端：NextJS (TypeScript)
- 样式：TailwindCSS
- 动画：GSAP
- CMS：Forestry Headless 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) 说声”谢谢”，他为我网站的主页部分绘制了一幅美丽的插图。