我如何构建高级 Gatsbyjs 网站

上个月我使用 Gatsby 建立了一个测试站点，我很喜欢它的站点加载速度和插件生态系统。

之后，我使用 Gatsby 构建了一个高级网站，仍然保持相同的 100% 加载速度。

高级意味着我在建立网站时会集中精力。

当我在 Google Chrome 审核上测试它时的最终结果。

一切都是 100%，即使我检查了应用的 CPU 4x 节流，它仍然有 90% 的性能。

我为什么要建立这个网站？

• 我在阅读长博客文章或教程时遇到问题，我经常困惑于从上到下阅读。

现在我们来谈谈 SEO。

• 我甚至用结构化数据为我的网站添加了 SEO，其中我使用 json/LD 来获取丰富的摘要。

通过建立这个网站我学到了什么？

一开始我真的不知道从哪里开始，但通过构建这个，我学到了很多东西。

首先，我使用了代码沙箱，在那里我遇到了一个问题，即使我的代码是正确的，但它不起作用，所以我在本地机器上检查它，它运行良好，经过一天的调试后我弄清楚了，它真的让我笑了。

所以有时您需要在本地机器上检查您的代码。

我学到了一些有关可访问性的知识，色盲人士无法正确看到红色和绿色，在他们看来，红色和绿色都是棕色，对比度较低，文本较小，键盘交互就像您的网站导航一样，无需使用鼠标，只需使用 Tab 键即可完美运行。

世界上有很多人患有各种类型的残疾。如果你对无障碍感兴趣，可以阅读关于残疾人使用网络的
故事。

我的代码是开源的。

我的网站网址

代码存储库

如果你喜欢我的作品，请在GitHub上给我一颗🌟星

资源

1. Chrome 开发工具。
2. Web 可访问性教程
3. Google 的 SEO 入门指南
4. 创建高质量页面
5. 用谷歌思考