作为一名专业的生物研究员，我的游乐场曾经是充满显微镜、培养皿和生物工具的科学实验室。好奇心引导着许多科学家踏上发现之旅。我的好奇心则把我带到了网页设计的世界。我曾经尝试在我的实验室台式电脑上学习 HTML，同时离心提取样品或等待我的样品解冻或冷冻。这些等待时间对于撰写实验笔记甚至学习新技能非常宝贵。对我来说，这意味着通过像 HomeSite 和后来 Dreamweaver 这样的编辑器，以及许多其他在线资源学习基本的 HTML。
大约十年前离开我的科学实验室工作台后，我找到了一个新的游乐场。我通过一位当地网页开发人员朋友了解了 WordPress。这改变了我的人生轨迹。学习网页设计不再是闲暇时间的活动——它已成为我日常生活中主要的活动。
我的第一步：学习主题开发
我称自己为 WordPress 爱好者和狂热用户。我通过学习修改主题的方式进入了 WordPress 的世界，我的虚拟导师是 Morten Rand-Hendriksen 的“使用 Underscores 从头开始构建主题”。在学习主题开发的过程中，我一定看过无数遍这个教程，它很快成为了我的首选参考。在进行学习项目时，我经常参考 Morten 的 GitHub 代码库来学习他的主题。对于我的个人网站，我使用了受 Morten 的主题启发的自己的主题，例如 Kuhn、Popper 等。
我还学习了如何为自己的网站构建插件和小部件，但我主要专注于主题开发。我为自己的个人网站构建了主题。我的个人网站就像我的活页夹：每个主题对应一个活页夹。我的网站阻止搜索引擎抓取，旨在存档我的个人学习内容和发布笔记。这种记录和记录项目各个方面的习惯受到了 Sara Soueidan 的“Just Write” 的启发。
深入学习 JavaScript 的号召
这一切都始于 Matt Mullenweg 在 2015 年的 State of the Word 演讲 中对 WordPress 开发人员提出的“深入学习 JavaScript”的号召，以及随后宣布的 Gutenberg 块编辑器。在那之前，我是一个快乐的 WordPress 用户和一个有抱负的 WordPress 开发人员。有报道称 JavaScript 和 API 驱动的界面是 WordPress 的未来。与其他 WordPress 爱好者一样，我也认识到 JavaScript 是 WordPress 开发中必不可少的技能。
因此，我开始了自己的 JavaScript 学习之旅和路线图。我使用了 Zell Liew 的文章 “学习 JavaScript——你应该从哪里开始以及当你遇到困难时该怎么办？”
让我与您分享我的学习之旅。
我从查看基于 React 和 REST API 的主题开始
自从 REST API 正式集成到 WordPress 核心以来，一些基于 React 的主题开始涌现。
- Foxhound：该主题由 Automattic 工程师 Kelly Dwan 开发，并在 WordPress 主题目录 中列出，拥有 30 多个活跃安装。它的 GitHub 代码库 在三年内没有更新。
- Picard：该主题由 Automattic 开发，作为 WordPress 主题的实验性原型，它利用了 React 和新的 WP-API。它的 GitHub 代码库 在五年内没有更新，并且其使用情况未知。
- Celestial：该主题在 Smashing 杂志的文章 “如何使用 React 和 WordPress 为您的 Web 应用程序构建皮肤” 中进行了介绍，作者是 Muhammad Mohsin。它的 GitHub 代码库显示它在 13 个月前最后更新，但没有关于其使用情况的信息。
在我看来，这些主题似乎是实验性的。当 Foxhound 主题发布时，它在 CSS-Tricks 以及 WordPress Tavern 上都有报道。我将其下载到我的测试网站，它运行良好；但是，鉴于我对 JavaScript 和 React 的熟悉程度有限，我无法修改和学习它。
我开始深入研究 React
我使用 Robin Wieruch 的文章 “学习 React 之前的 JavaScript 基础知识” 作为我的 JavaScript/React 学习路线图。在努力学习和理解 React 路由 时，我发现了 Gatsby，它利用 @reach/router 作为内置功能，使路由变得轻而易举。在我简短的探索性研究中，我了解到 Gatsby 确实是一个“基于 React 的框架，可以帮助开发者构建速度极快的网站和应用程序”。这促使我在继续学习 React 的同时，也开始学习 Gatsby。一段时间后，我沉浸在 Gatsby 项目中，只是偶尔回到学习基本的 JavaScript 和 React。
我开始学习 Gatsby
鉴于我已经用 React 完成了几个小型学习项目，理解 Gatsby 变得自然而然。据说 Gatsby 是面向开发人员而不是用户的。我发现学习和运行我自己的简单 Gatsby 测试网站并不难。
Gatsby 的 文档 和 教程 编写得很好，很有帮助，并且易于理解。我决定使用 Gatsby 的教程并完成所有八个部分来学习 Gatsby，以此作为“边做边学”的一种方式。在处理我的项目时，我还参考了其他指南和教程文章。以下两个指南帮助我理解构建概念、添加功能并构建一个合理的 Gatsby 演示网站
- 从头开始构建 Gatsby 网站指南，作者是 Justin Formentin
- 使用 Gatsby 和 React 构建高级博客，作者是 Reactgo
对于 React 组件的样式设置，有几个选项在 CSS-Trick 上有介绍。一些选项包括本地内联 CSS-in-JS、样式化组件 和 模块化 CSS。Gatsby 组件也可以使用 Sass 和 gatsby-plugin-sass 进行样式设置，这使得代码更易于阅读。由于其熟悉性和代码可读性，我选择使用 Sass 进行样式设置；但是，我也认识到 CSS 模块 的价值。
集成 Gatsby 和 WordPress 的资源
我的 Gatsby 学习并没有止步于此。事实上，Gatsby 最近成为了我学习曲线中最重要的一部分。以下是我在整个学习过程中发现的所有内容，我希望这些内容也能帮助你在自己的学习旅程中有所收获。
已经有许多网站运行在 Gatsby 上。那些迁移到 Gatsby 的用户似乎都很满意，尤其是在其惊人的速度和改进的安全方面。
Gatsby 中的评论功能
WordPress 长期以来一直原生支持评论功能。Gatsby 网站是无服务器静态网站，因此发布评论是一个问题，因为评论是动态的，需要客户端服务。
一些 Gatsby 和 React 开发人员似乎将他们个人网站上的评论和互动留给了 Twitter。另一些人则倾向于使用Disqus。如果你有兴趣，这篇 Northstack 教程详细描述了如何将 WordPress 评论引入 Gatsby。
WordPress Gatsby 主题
我最初是在WordPress Tavern上了解到移植到 Gatsby 的 Tabor 主题的。它由Rich Tabor开发，并可以从GitHub 上免费获取（演示）。在此之后，通过Gatsby Theme Jam项目推出了两个受 WordPress 启发的 Gatsby 主题。一个是 Alexandra Spalato 开发的Gatsby Theme WordPress Starter（演示），另一个是由 Andrey Shalashov 开发的WordPress Source Theme（演示）。
2019 年，由 Jason Bahl、Muhammad Muhsin、Alexandra Spalato 和 Zac Gordon 领导的 Gatsby 和 WPGraphQL 开发团队宣布了一个将 WordPress 主题移植到 Gatsby 的项目。Zac 在与 WordPress Tavern 的对话中表示，该项目将提供免费和付费的高级主题。在撰写本文时，已列出五个主题，但没有免费下载。
解耦的 Gatsby WordPress 启动器
当前的Gatsby 启动器库列出了十个与 WordPress 兼容的启动器主题，包括最近一个由Henrik Wirth开发的主题，该主题将 WordPress Twenty Twenty 主题（样式表和字体）移植到 Gatsby。尽管该主题仍在开发中，并且存在一些限制（例如，不支持标签、每月存档和评论）。尽管如此，它仍然是一个很棒的项目，并使用了一个新的实验性的 Gatsby Source WordPress 插件。
另一个流行的启动器是gatsby-starter-wordpress，由Gatsby Central开发。
来自 GitHub 的 Gatsby WordPress 主题
GitHub 上还有其他一些流行的 Gatsby 主题。 Twenty Nineteen WordPress Gatsby 主题是由 Zac Gordon 和 Muhammad Muhsin 移植的Twenty Nineteen WordPress 主题。
实验性插件
还有两个新的 WordPress GraphQL 插件正在开发中，目前仅在 GitHub 上可用。一个是Gatsby Source WordPress Experimental，由Tyler Barnes开发。这是当前Gatsby Source WordPress插件的重写版本，使用WPGraphQL进行数据源获取，以及一个自定义的WPGatsby插件，该插件以 Gatsby 特定的方式转换 WPGraphQL 模式。
另一个是Gatsby WordPress Gutenberg，它仍在由Peter Pristas开发。其文档可在GatsbyWPGutenberg 文档网站上找到。
分步指南
尽管 Gatsby WordPress 主题开发取得了持续进展，但我找不到任何为像我这样的初学者撰写的详细操作指南。Mohammad Mohsin 在 2018 年在 Smashing 杂志上撰写了一篇详尽的指南，解释了他如何使用 WordPress REST API 开发他的Celestial React 主题。另一个教程是他撰写的关于将 Twenty Nineteen WordPress 主题移植到 Gatsby的教程，该教程使用WPGraphQL作为 WordPress 数据源。
最近，我还参考了另外两个有益的指南。
- 将您的 WordPress 网站迁移到 Jamstack，作者为Jason Longstorf。这是一个非常有用的教程，基于 Jason 在其“与 Jason 学习”播客中对 Zac Gordon 的采访。 该集的 30 分钟缩减版也已在 egghead.io 上发布。
- Gatsby WordPress 启动器高级指南，包含预览、i18n 等功能，作者为Henrik Wirth。这是我见过的最详细的指南，以七部分系列的形式发布，介绍了如何使用WPGraphQL将 WordPress 网站移植到 Gatsby。它非常适合大多数初学者。
最终，我自己的部分移植的 Gatsby 网站
到目前为止，所有介绍的内容都促使我创建了自己的 WordPress Gatsby 网站。虽然这是一个很大的技术任务，但我参考的指南，以及实验性插件和现有的 Gatsby 文档，使得这个任务比我自己摸索要容易得多。
这是结果。虽然它仍在开发中，但看到它能够运行真是太棒了。我已经写了一篇完整的逐步操作指南，介绍我是如何制作它的，该指南将于下周在 CSS-Tricks 上发布。敬请期待！
Gatsby 和 WordPress 的未来发展方向是什么？
我仍在关注之前提到的两个实验性的 WordPress 插件。我计划在它们正式发布后重新审视该项目，希望它们能够出现在 WordPress 插件目录中。最近这条推文串重点介绍了将内容从 WordPress 块编辑器移植到解耦的 WordPress Gatsby 主题的当前状态。
有人成功地在解耦的#WordPress设置中使用块编辑器吗？我还没有尝试过，但听说它无法工作，或者工作效果不佳。很想知道大家的经验。
— Rachel Cherry (@bamadesigner) 2020年5月14日
在最近的2020年西班牙WordCamp会议上，Matt Mullenweg 表示对解耦 WordPress 网站的需求正在增长。
但对于那些正在构建更高级应用程序或在其网站上存在某些约束（需要 React 前端）的人来说，我认为 WordPress 的解耦用例比以往任何时候都更加强大。
Dan Abramov 同意。
这正中要害。并且与我们的长期思考完全一致。仅限客户端的做法不可持续。我们需要将更多内容转移到服务器端，但不能牺牲交互式组件的无缝组合。https://#/O4LX8JacRo
— Dan Abramov (@dan_abramov) 2020年5月10日
与WPTavern 的 Sarah Gooding交谈时，Gatsby WP 主题项目的成员 Zac Gordon 和Jason Bahl也承认，“最新的 Gatsby WordPress 主题面向企业和开发人员，不适合初学者。”希望未来能解决这个问题！
我的个人看法
根据我非常有限的经验，我认为目前可用的 Gatsby WordPress 主题还没有准备好供像我这样的用户使用。是的，尝试一些处于发展前沿的东西确实令人兴奋，这显然是许多 WordPress 用户和开发人员的想法。同时，WordPress 块编辑器、WPGraphQL 和Gatsby source WordPress插件上不断发展的工作使得难以预测事情的发展方向以及何时才能稳定到可以在其他上下文中安全使用的状态。在此之前，在一个项目上工作，却发现 API 或界面发生了变化，这是一种令人沮丧的体验。
对于我个人使用来说，一个普通的 Gatsby 网站就足够了，我可以使用 Markdown 文件获取内容，而不会遇到与解耦 WordPress 相关的任何麻烦。对于大型代理网站来说……我能够理解为什么拥有一个解耦的解决方案对他们及其客户来说意义重大。
请记住，我将在下周分享我的教程——届时再见！
我的网页设计网站是用 WordPress 建立的，感谢您提供的我们可以应用到我们网站上的有见地的技术技巧。继续努力。