搭建 Gatsby 博客一：为什么选 Gatsby

“It takes two to make an accident.”

— F. Scott Fitzgerald, The Great Gatsby

Gatsby 是一个 React 建站框架。在使用 Gatsby 搭建了一个小博客后，非常喜欢其管理数据的方式。然而，尽管上手可以非常快，对于刚开始用 Gatsby 的人来说，理解其基本思想是个小门槛。官方提供了非常详细的教程，甚至有点过于基础了，本文面向有 React 基础，没有使用过 Gatsby 和 GraphQL 的读者分享一份笔记。

为什么选 Gatsby

我的博客最初是用 Github Pages 默认的 Jekyll 框架，其使用的 Liquid 模板引擎在使用上有诸多不便。

后来基于 Node.js 的 Hexo 横空出世，我便重构了博客对其深入整合，还为其写了一个 emoji 插件。在编写过程中发现其 API 设计比较不成熟，调试体验也不是很好，阅读其它插件代码时发现很多都需要用到未公开接口。同时资源管理需要借助其它 Task runner，如当时比较流行的 Grunt 和 Gulp 。这样下来直接依赖了大量包，冲突不可避免的产生。

在一次换系统之后，项目终于构建不了了，包冲突处理起来非常头疼，也影响到了写博文的兴致。

拖延了一段时间后，终于开始考虑更换框架。这时 React Angular Vue 生态已比较成熟，所以就没必要考虑其它的模板引擎。

首先注意到的是新星 VuePress 。然而考察过后发现其正在 v1 到 v2 的更替期，v1 功能比较简陋，v2 还在 alpha 期不稳定。且 VuePress 目前还是针对静态文档优化比较多，作为博客依然比较简陋。

这时 @unicar 正好推荐了基于 React 的 Gatsby。发现其生态很强大，再搭配 React 庞大的生态，确实非常吸引人。

而且在了解过程中还发现了 Netlify CMS 这个内容管理平台，如此一来，文章数据完全可以存在 Github 中，同时可以便捷地编辑文章。

Gatsby 项目结构

建议使用 Starter 修改着理解 Gatsby，我用的是 Gatsby + Netlify CMS Starter。

完整的 Gatsby 项目结构可以看文档，这里针对搭建博客用到的功能说明一下。

/src/pages 目录下的组件会被生成同名页面。
/src/templates 目录下放渲染数据的模板组件，如渲染 Markdown 文章，在其它博客系统中一般叫 layout。
/src/components 一般放其它共用的组件。
/static 放其它静态资源，会跳过 Webpack 直接复制过去。

接下来是两个比较常用的配置文件，需要修改时参考 Starter 改即可。

/gatsby-config.js 基本用来配置两个东西：
1. siteMetadata 放一些全局信息，这些信息在每个页面都可以通过 GraphQL 获取到。
2. plugins 配置插件，这个按用到时按该插件文档说明弄即可。
/gatsby-node.js 可以调用 Gatsby node APIs 干一些自动化的东西。一般有两个常用场景：
1. 添加额外的配置，比如为 Markdown 文章生成自定义路径。
2. 生成 /src/pages 以外的页面文件，如为每个 Markdown 文章生成页面文件。