Gatsby 和 Netlify CMS：第一印象

为了庆祝我妹妹的生日，我决定用 Gatsby 为她搭建一个快速、简洁、现代的网站。这个网站是用来展示她的漫画系列《古神传奇》的。她不会做网页开发，所以我需要把它和一套系统结合起来，让她能够轻松地更新页面和内容。

无头CMS系统有很多选择。经过一番研究，我决定使用Netlify CMS。反正我本来就打算用Netlify做网站托管，所以我想为什么不干脆用它，然后尝试同步呢？

http://sagaoftheoldgods.com（如果您想查看该网站。）

了不起的盖茨比

我第一次接触 Gatsby 是通过阅读它的文档。我之前从未使用过静态网站生成器。React 对我来说并不陌生，但 Gatsby 的许多内部运作机制对我来说却是全新的。

让我告诉你……

他们的文档简直太棒了。真的，文字简洁明了，示例和描述都非常易懂。我用过不少库，也仔细研读过它们的文档。比如，Firebase 就是我最近花了很多时间研究的一个库，但经常被它搞得一头雾水。然而，Gatsby 的文档却让我完全没有困惑或需要反复修改的地方。我能够轻松地复现教程中讲解的所有内容。

当然，每个人的情况可能有所不同。如果你想学习 Gatsby，我强烈推荐它，因为它非常适合新手。几个小时内你就能掌握它的使用方法，并能立即开始创作自己的内容。

Gatsby 拥有强大的开源社区支持。数十个官方插件让开发变得轻松高效。此外，还有各种入门模板或捆绑包，可以让你的项目快速启动。

我当时并没有使用那些示例。因为我想从基础开始学习如何搭建一个 Gatsby 网站。我知道以后我可能会用到一些示例，这样能更高效地利用时间。当然，我现在也明白它的工作原理了。我建议大家像我一样先学习 Gatsby，然后再使用示例。

我最终还是遇到了 Gatsby 的问题，但这些问题更多是与 Netlify CMS 集成有关，而不是与框架的核心功能有关。

能够使用 React 创建页面并添加组件一直是我梦寐以求的。我对 React 非常熟悉，所以这部分工作对我来说简直是驾轻就熟。

GraphQL……哇！Gatsby 默认就用它。这是我第一次接触这项技术。之前就听说过这个词，也听说它很不错。现在体验过之后，我更加渴望深入了解。GraphQL 让网站数据的处理变得高效又直观。在基于 Web 的 IDE GraphiQL 中构建查询简直太棒了，它能让我轻松地可视化和优化组件所需的数据。

如果你像我一样之前用过 create-react-app，那么 Gatsby 会略有不同。你不需要安装 react-router-dom，因为 Gatsby 会处理自己的路由。你只需在 gatsby-node 文件中编写几行代码，就能设置好动态页面。

Gatsby能够解析Markdown文件并以编程方式生成页面，这让我非常感兴趣。我花最多时间研究的就是这部分，因为我真的很想弄明白他们是如何实现的。使用Netlify作为托管服务，每次你更新GitHub仓库时，它都会重建线上网站，这意味着新内容会自动添加。

我唯一发现的缺点是 Gatsby 处理图片的方式。倒不是技术本身的问题，而是我有时搞不清楚 gatsby-image-sharp 插件提供的流式图片的一些小毛病。比如，如果我尝试让流式图片浮动，它就会消失。我猜这跟图片外面的包装组件有关，但我没深入研究。我设法绕过了这些问题。懒加载部分是最棒的，值得花时间去研究。尤其是因为我妹妹要用她的网站来展示漫画和艺术作品，所以图片的正确显示至关重要。

Netlify CMS

Netlify CMS 的文档还算不错，虽然没有 Gatsby 的水平，但我觉得 Gatsby 已经是我的新标准了。我能够理解并按照文档操作。搭建 CMS 其实非常简单。你只需要运行 `npm install`，创建一个 assets 文件夹，然后在 config.yml 文件中设置你的 schema。之后，它基本上就能自动运行了。如果你要添加测试或占位内容，则必须将 CMS 托管在 Netlify 上才能正常工作。否则，这些内容只会存在于 CMS 的本地状态中，并在页面刷新后消失。

CMS 会自动向你的代码仓库提交 Git 代码，这样当网站上线 Netlify 时，它就会自动重建你的网站。大约需要五分钟左右才能看到网站上的实时更改。如果你不想将网站发布到互联网上，我相当确定你可以使用新的 Netlify CLI 在本地托管。我没有测试过。如果以后我再次​​使用 CMS，我想我会测试一下。

Netlify 默认允许您使用 GitHub 帐户登录 CMS。它还通过 Netlify Identity 服务集成了 OAuth 提供商。我建议使用此功能为网站内容更新人员授予访问权限。您甚至可以移除 Netlify 的品牌标识，并替换为您自己的品牌标识。我认为这对于为他人构建网站的自由职业者或代理机构来说非常实用。

这是我第一次使用无头CMS，所以没什么可比较的。界面简洁流畅，因为它也是用React开发的。我妹妹才刚开始添加内容，所以目前还没有她的使用体验。如果我们发现问题或者对它产生负面看法，我可能会写一篇后续博文。

除此之外，它本身很不错，我没什么可抱怨的。正如我所说，我的问题出在 Gatsby 集成上。

Gatsby 和 Netlify CMS 的结合

Gatsby 和 Netlify CMS 的兼容性一直不太好。我这么说是因为我用了不少插件才让它们能正常工作。而且我仍然不确定它们会不会出问题。

我使用了一个名为 gatsby-markdown-remark 的插件来解析所有 Markdown 文件并从中提取数据。还有像 gatsby-remark-images 这样的插件，它可以将 Markdown 中的图片转换成 gatsby-image-sharp 格式的图片。这是一个插件生态系统，旨在实现无缝衔接。但实际上，真正无缝衔接的情况并不多见。

我注意到，在搭建网站的过程中，我的 GraphQL 查询偶尔会出错，找不到 Markdown 图片。真是烦人。后来，我花了几乎一整天的时间在网上搜索，才发现问题出在 Netlify CMS 处理图片的方式上。它把图片放在一个名为 assets 的独立目录里。而 Gatsby 却误以为图片和页面放在一起。

要解决这个问题，你的插件必须按照特定的顺序加载到 gatsby-config 文件中。你还应该使用一个名为 gatsby-plugin-netlify-cms-paths 的插件。此外，所有 Netlify CMS 相关组件都必须放在最后。添加这些插件并调整配置文件似乎有所帮助。我希望现在已经稳定下来了。因为我最不希望看到的就是我妹妹添加内容后，她的网站在构建时崩溃。那绝对会是糟糕的用户体验。

我确实推荐将这两款产品搭配使用，前提是您有耐心解决这些问题。未来我可能会尝试其他一些内容管理系统，并分享我的对比意见和发现。

最后想说的话

Netlify CMS 和 Gatsby 都是免费的，我没看到任何关于它们收费的信息。另外，Netlify 的主机服务也是免费的。如果你需要，也可以付费购买其他增值服务。但总的来说，你没有任何风险。我对价格完全满意。整个项目我只花了十美元，因为我需要帮她注册一个域名。我只需要花一点时间，网站就能顺利上线了。

希望这篇初体验分享对大家有所帮助。如有任何疑问或顾虑，欢迎随时提问。总而言之，我推荐它们，尤其是 Gatsby。赶紧上手 React 和 CMS，然后去创造精彩的作品吧！因为，我就是这么做的。