[Web]搭建 Gatsby 博客

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Gatsby 是一个 React 建站框架，尽管上手可以非常快，对于刚开始用 Gatsby 的人来说，理解它是个小门槛。虽然官方提供了非常详细的教程，但有点过于基础了。本篇面向有 React 基础，想了解 Gatsby 和 GraphQL 技术栈的读者。

为什么选 Gatsby

基于 React 的 Gatsby生态很强大，确实非常吸引我。

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

Gatsby 项目结构

建议使用 Starter 修改着理解 Gatsby。

完整的 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 文章生成页面文件。

此外还有两个不那么常用的配置文件。

• /gatsby-browser.js 可以调用 Gatsby 浏览器 APIs，一般插件才会用到，如滚动到特定位置。
• /gatsby-ssr.js 服务器渲染的配置，一般也是插件才用到。

这就是搭建 Gatsby 博客全部的步骤。