本文最初发表于我的博客。我把这篇文章放在这里，是为了演示如何使用 AstroPaper 主题写博客文章。
动机
从大学时代起，我就一直想用自己的域名（satnaing.dev）搭建一个个人网站。但直到这个项目，这个愿望从未实现。我做过不少 Web 应用开发的项目和工作，但我从来没有为此付出足够的努力。
你可能会问，“那博客呢？“是啊，博客也一直在我的项目清单上。我一直想用最新的技术做一个博客项目。然而，我一直忙于工作和其他项目，博客项目从未启动。
这些年，我更倾向于追求质量而非数量地开发自己的项目。项目完成后，我通常会在 GitHub 仓库里放一份规范的 README。但 GitHub 仓库的 README 只适合写技术方面的东西（这只是我的想法）。我想记录自己的经历和挑战。于是，我决定做一个自己的博客。加之在此时，我已经积累了足够的经验和信心来完成这个项目。
技术栈
前端方面，我想用 React。但 React 本身对 SEO 不够友好，还需要考虑路由、图片优化等问题。所以我选择了 NextJS 作为主要前端框架。当然，还有 TypeScript 做类型检查。（据说习惯之后你会爱上 TypeScript 😉）
样式方面，我用 TailwindCSS。因为我喜欢 Tailwind 带来的开发体验，与 MUI 或 React Bootstrap 等组件库相比，它有更大的灵活性。
这个项目的所有内容都存放在 GitHub 仓库里。所有博客文章（包括这一篇）都以 Markdown 文件格式编写——我对这种方式非常熟悉。为了更轻松地写 Markdown 和 frontmatter，我使用 Forestry 无头 CMS。这是一个基于 Git 的 CMS，可以提供 Markdown 和其他内容格式的支持。因此，我既可以用 Markdown 写作，也可以用富文本编辑器编辑。而且，用它来写 frontmatter 非常方便。
图片和静态资源上传并存放在 Cloudinary。我通过 Forestry 连接 Cloudinary，直接在仪表盘中管理它们。
总结一下，这个项目的技术栈如下：
- 前端：NextJS（TypeScript）
- 样式：TailwindCSS
- 动画：GSAP
- CMS：Forestry 无头 CMS
- 部署：Vercel
功能特性
以下是作品集和博客的几个核心功能。
SEO 友好
整个项目以 SEO 为核心目标开发。我使用了规范的 meta 标签、描述和标题层级。该网站目前已被 Google 索引。
你可以用 “sat naing dev” 等关键词在 Google 上搜索到这个网站。
此外，由于 meta 标签使用得当，这个网站分享到社交媒体时也能展示得很漂亮。
动态站点地图
站点地图在 SEO 中扮演着重要角色。网站每个页面都应该包含在 sitemap.xml 中。我让网站在新内容、标签或分类创建时自动生成站点地图。
浅色与深色主题
由于近年来深色主题的流行，许多网站现在都自带深色模式。当然，我的网站也支持浅色和深色主题切换。
完全可访问
这个网站具有完全的可访问性。你可以用键盘完成所有导航操作。我在所有图片中添加了 alt 文本、不跳过标题层级、使用语义化 HTML 标签、合理使用 aria 属性——遵循了无障碍最佳实践。
搜索框、分类与标签
所有博客内容都可以通过搜索框检索。内容也可以按分类和标签筛选。这样一来，读者可以找到并阅读自己真正需要的文章。
性能和 Lighthouse 评分
由于规范的开发实践和最佳做法，这个网站获得了很高的性能和 Lighthouse 评分。以下是这个网站的 Lighthouse 评分。
动画效果
最初我使用 Framer Motion 为网站添加动画和微交互。但当我尝试一些复杂动画和视差效果时，发现与 Framer Motion 配合起来并不方便（可能是我不够熟练吧）。因此，我决定使用 GSAP 来处理所有动画。它是最流行的动画库之一，能够完成复杂和高级的动画效果。在网站的几乎每个页面你都能看到动画和微交互效果。
结语
总之，这个项目让我在博客网站（SSG）开发方面获得了大量经验和信心。现在我已经掌握了基于 Git 的 CMS 及其与 NextJS 的交互方式，也学会了 SEO、动态站点地图生成和 Google 索引流程。未来我会做出更好的项目。敬请期待！✌🏻
最后但同样重要的是，感谢我的朋友 Swann Fevian Kyaw（@ToonHa）为我网站 Hero 区域绘制了精美的插画。
评论