Gatsby入门指南
我对 Gatsby 一直很感兴趣。之前也听说过JAM STACK（JavaScript、API和预渲染模板）以及静态网站生成器。我在egghead.io上收藏了一个 Gatsby 课程，有一天我突然想到，我正在开发的一个业余项目或许很适合用到它。所以，现在正是开始学习的最佳时机。
视频教程是很好的入门资料
我个人很喜欢视频教程，我是个视觉型学习者，喜欢看别人动手做东西。我看了《用 React 和 Markdown 构建博客》这个视频，简直被它的简洁明了惊艳到了。我大约一年前用过 Gatsby，但之前完全没接触过 React，所以一开始对它的工作原理一头雾水。
现在我已经掌握了 React，我觉得是时候再试一次了。在观看了 Egghead 系列视频和一个YouTube 系列视频，更好地理解了如何使用 Gatsby 之后，我觉得是时候开始了。在阅读了一些关于如何维护个人博客的文章之后，我的决定非常明确：创建一个博客！这将是体验 Gatsby 的绝佳方式，而且还能做出一些对我有益的东西。
使用 Gatsby CLI 开发网站
这是我遇到过的最简单的设置之一。
• 安装 CLI
• 创建一个新站点
• 进入新创建的站点文件夹
• 开发 Gatsby 站点。
技术说明：在终端
运行命令安装 CLI 。然后运行命令，将“gatsby-site”替换为您希望文件夹的名称。文件夹创建完成后，切换到新创建的文件夹。之后，您可以运行命令，Gatsby 将启动一个支持热重载的开发服务器，可通过访问该服务器。npm install -g gatsby-cligatsby new gatsby-sitegatsby developlocalhost:8000
按照这些步骤操作后，您的 Gatsby 网站即可启动并运行。如果您之前搭建过基本的 React 应用，那么这个过程应该会很熟悉create-react-app。Gatsby 的设置方式与 React 应用截然不同，需要特殊的处理。
在 Gatsby 中，有两个重要的文件控制着网站的各个方面。我将要介绍的是 `config`gatsby-config.js和 `node`文件gatsby-node.js。与纯 React 网站不同，这两个文件是网站的核心。`config` 文件控制着你对文件和插件的访问权限，而 `node` 文件则控制着页面的创建等等。
Gatsby-config.js
这里将放置您的网站配置信息，没错，就是您的网站配置信息。
我在此页面使用的选项是 siteMetadata 和插件。还有一些配置选项我尚未用到。
网站元数据
siteMetadata: {
title: `Tori Pugh`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
menuLinks: [
{
name: 'Work',
link: '/work'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
},
{
name: 'Blog',
link: '/blog'
}
]
}
这是一个用于存储您希望保持一致的全站数据的对象。例如，网站名称、菜单链接，或者任何您希望在不同页面之间使用的信息。
插件
plugins: [
`gatsby-transformer-json`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `project`,
path: `${__dirname}/src/data`
}
},
]
插件可以仅按名称列出，也可以接受选项。如果插件接受选项，则需要以对象形式列出，解析器（resolve）为列出的插件名称，后跟选项对象。
Gatsby-node.js
这里需要用到 Gatsby 的 Node API。我学到的最重要的一点是，如何在构建过程中使用createPages. 创建新页面。
CreatePages 的工作原理是：它接受一个 GraphQL schema，并使用该 schema 来引用和查询数据。查询到的数据可以在一个函数中使用，从而创建页面。
workPages: allMarkdownRemark(sort: {fields: frontmatter___role}, filter: {frontmatter: {client: {regex: ""}}}) {
edges {
node {
frontmatter {
title
path
client
github
draft
description
deliverable
role
project_description
url
}
html
}
}
}
这条 GraphQL 查询会找到我所有的工作项目，并将它们返回到一个数组中。然后，我会遍历这个数组，并为数组中的每个项目创建页面。
res.data.workPages.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: workTemplate,
})
})
资源：
GatsbyJS 教程 #5 - 使用 Markdown 构建博客 第 2 部分- 应该先观看第 1 部分以了解本部分的基础知识。
页面文件夹
Gatsby 会自动为文件夹中创建的任何 React 组件生成页面src/pages。配置完成后，初始页面应包含 index.js、page-2.js 和 404.js。如果您更改这些文件中的任何内容，网站上的相应页面也会随之更改；如果您添加新的 React 组件，系统会自动为其生成页面。
示例新页面。创建一个新文件，src/pages/about.js并添加以下代码。
import React from "react"
const AboutPage = () => (
<main>
<h1>About the Author</h1>
<p>Welcome to my Gatsby site.</p>
</main>
)
export default AboutPage
像上面这样简单的代码就能在 Gatsby 中生成一个新页面。然后你就可以访问localhost:8000/about并查看这个新页面了。
接下来你要去哪里？
这只是在本地运行一个功能齐全的 Gatsby 网站的最基本步骤。有了下一步的计划，无论是自动或动态创建新页面；使用 GraphQL 处理数据；还是使用不同的插件和选项来改变网站/应用程序的运行方式，你都可以随心所欲地进行开发。
我打算记录下创建博客以及将其迁移到完整网站的各个步骤。这并非详尽无遗，因为我自己对 Gatsby 的了解也并非无所不知。我只是分享一下我使用 Gatsby 的经验。
资源
Gatsby 网站的文档是我见过最好的之一。很多时候我不知道该怎么做，只要看看他们的教程或者阅读他们丰富的文档，最终都能解决问题。
Gatsby 文档、
Gatsby 参考指南
、Gatsby API 参考
、Gatsby 示例