使用 Gatsby.js 搭建静态博客 1 关键文件
内容提要
本文介绍用 Gatsby.js 搭建静态博客的关键文件：gatsby-node.js 通过 GraphQL 查询 Markdown 并调用 createPage 生成页面；模板文件（如 blog-post.js）分为视图组件和 pageQuery 查询，注入的上下文变量可在 props 中使用；gatsby-config.js 用于管理插件。整体流程为读取配置、查询资源、创建页面并注入数据。
延伸解读
理解 Gatsby 页面生成的核心机制
文章指出，gatsby-node.js 中的 createPages 函数是页面生成的核心。它通过 GraphQL 查询所有 Markdown 文件，然后遍历结果，为每个文件调用 createPage 生成页面。这一过程将数据查询与页面创建分离，使得静态博客的构建流程更加清晰。读者需注意，GraphQL 查询是入门难点，但文章认为它比 SQL 更易理解。
模板文件的双重角色与数据注入
模板文件如 blog-post.js 包含视图组件和 pageQuery 两部分。视图组件负责渲染，可通过 props.pageContext 访问 createPage 注入的上下文变量；pageQuery 则使用这些变量进行数据查询，结果注入到 props.data。这种设计让模板既能动态获取数据，又能灵活使用注入参数，是 Gatsby 构建动态静态页面的关键。
开发环境中的 GraphQL 调试工具
文章提到，在开发环境下运行项目后，Gatsby 自带一个 GraphQL 查询页面（http://localhost:8000/___graphql）。该页面右上角提供文档，可帮助开发者理解数据结构，甚至支持 Ctrl+点击字段名跳转到对应文档。这一工具能显著降低 GraphQL 的学习成本，建议读者在遇到查询问题时优先使用。
插件配置与整体构建流程
gatsby-config.js 用于管理插件，starter 已包含常用插件，但用户可根据需求自行添加。文章总结的构建流程为：读取配置和插件、查询资源、创建页面并注入参数、模板查询、填入数据、生成页面。整个过程多采用循环生成所有页面，体现了 Gatsby 自动化构建静态站点的优势。
Q&A
用 Gatsby.js 搭建静态博客时，最关键的三个文件是什么？
最关键的文件是 gatsby-node.js、/src/templates/blog-post.js 和 gatsby-config.js。gatsby-node.js 负责页面创建逻辑，blog-post.js 是模板文件，gatsby-config.js 是配置文件。
gatsby-node.js 文件的作用是什么？
gatsby-node.js 包含页面创建逻辑，通过 GraphQL 查询 Markdown 文件，然后遍历查询结果，使用 createPage 函数为每个 Markdown 文件生成页面，并可以注入上下文变量。
在 Gatsby 模板文件中，如何获取注入的上下文变量和查询数据？
注入的上下文变量可以通过 this.props.pageContext 获取，而页面查询函数（pageQuery）返回的数据则注入到 this.props.data 中，可以像普通属性一样使用。
gatsby-config.js 文件有什么用途？
gatsby-config.js 是 Gatsby 的配置文件，用于管理插件。使用 starter 建立项目时会自带一些插件，但也可以根据需要自行添加其他插件。
Gatsby 中 GraphQL 查询在开发时有什么辅助工具？
在开发环境运行后，Gatsby 自带一个 GraphQL 查询页面：http://localhost:8000/___graphql。该页面右上角有文档，可以查询数据结构，甚至可以通过 ctrl 点击字段名跳转到对应文档。
Gatsby 生成页面的整体流程是怎样的？
整体流程为：读取设置和插件 -> 调用创建页面前查询所需资源 -> 创建页面，把查询到的参数注入到模板 -> 进行模板本身的查询 -> 填入数据 -> 成功生成一个页面。整个过程大部分使用循环生成所有页面。
