这篇文章最初出自我的博客文章。我放置这篇文章是为了演示如何使用 AstroPaper 主题编写博客文章/文章。 关于使用 NextJS 和无头 CMS 开发我的第一个作品集网站和博客的经验。
动机
从大学时代起，我就一直想用我自定义的域名建立自己的网站，但直到这个项目才实现。我做过了几个关于 Web 应用程序开发的项目和工作，但我没有努力去做这件事。 所以，你可能会问“博客呢？”。是的，博客也在我的项目列表中有一段时间了。我一直想用一些最新的技术制作一个博客项目。然而，我一直忙于工作和其他项目，所以博客项目从未开始。 这几天，我倾向于开发自己的项目，注重质量而不是数量。项目完成后，我通常会在 GitHub 仓库中放置一个适当的 readme 文件。但 GitHub 仓库 readme 只适合技术方面（这只是我的想法）。我想写下我的经验和挑战。因此，我决定制作自己的博客。而且，在这一点上，我有足够的经验和信心来开发这个项目。
技术栈
对于前端，我想使用 React。但仅靠 React 对 SEO 来说不够好；而且我必须考虑路由、图像优化等诸多因素。所以，我选择了 NextJS 作为我的主要前端技术栈。当然还有用于类型检查的 TypeScript。（据说当你习惯了 TypeScript，你会爱上它 😉） 在样式方面，我使用 TailwindCSS。这是因为我喜欢 Tailwind 提供的开发者体验，而且与 MUI 或 React Bootstrap 等其他组件 UI 库相比，它具有很大的灵活性。 该项目的所有内容都位于 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 收录。
你可以在 Google 上使用“sat naing dev”等关键词搜索该网站
此外，由于正确使用了 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)，他为我的网站英雄区绘制了一幅美丽的插画。