基本使用

要安装 Gatsby 和 Node.js，建议使用 Homebrew。 开始做一些设置可以免去以后很多麻烦！

Gatsby CLI 可通过 npm 安装，命令行运行 npm install -g gatsby-cli 进行全局安装。

要查看可用的命令，请运行 gatsby --help。

开始

gatsby new hello-world <https://github.com/gatsbyjs/gatsby-starter-hello-world>
cd hello-world
gatsby develop

//解释
//gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

每个定义在 src/pages/*.js 中的 React 组件，在浏览器里都是一个页面。让我们动手来看看。

新建一个文件，路径是 src/pages/about.js

访问这个页面 http://localhost:8000/about/ 即可

连接不同页面

来看看 Gatsby 网站的路由功能。

<Link to="/contact/">Contact</Link>

构建和部署

gatsby build

使用CSS

全局样式 global.css

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css

新建文件 gatsby-browser.js

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
├── gatsby-browser.js

导入样式

gatsby-browser.js

import "./src/styles/global.css"
// 或者:
// require('./src/styles/global.css')

注意：CommonJS 格式的（require）和 ES Module 格式的（import）语法都可以在这里使用。 如果你不确定选择哪个，通常最好使用 import。 但是，当处理仅在 Node.js 环境中运行的文件时（如 gatsby-node.js），则需要使用 require。

**组件范围内 CSS**

文件名以 .module.css 结尾，而不是通常的 .css 结尾。 这是告诉 Gatsby 该 CSS 文件应作为 CSS 模块而不是纯 CSS 处理的方式。

import React from "react"
import containerStyles from "./container.module.css"

export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)

.container {
  margin: 3rem auto;
  max-width: 600px;
}

布局组件

import React from "react"
export default ({ children }) => (
  <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    {children}
  </div>
)

引入

import React from "react"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
    <p>
      What do I like to do? Lots of course but definitely enjoy building
      websites.
    </p>
  </Layout>
)

参考文档