Gatsby 入门指南

时间 2019-11-24

标签 gatsby 入门指南繁體版

原文原文链接

Gatsby 是一个基于 React 的、免费开源的、用于搭建静态站点的框架。javascript

Fast in every way that matters.css

下图是官网首页的截图：描述了 Gatsby 的工做流程html

Gatsby 主要的应用的技术是 React 和 GraphQL，利用 Gatsby 搭建一个简单的静态站点，是一个很好的学习过程。本文主要讲解如何从零搭建一个简单的我的博客结构的过程，也是本身学习和解决一些 bug 的过程。java

经过搭建这个简单的项目，你能够学习到：node

Gatsby 的搭建流程
GraphQL 的简单运用
React 的函数式组件
CSS Module
CSS in JS
SEO 优化
surge 部署
Netlify CMS

本文仓库地址：github.com/destinytaoe…react

前置知识

React：只须要对 React 基础知识有所了解便可，尤为是 JSX 语法
GraphQL：了解基本查询用法便可

这里推荐一个 B 站 GraphQL 入门的学习视频，能够花上一两个小时快速的入门 GraphQL。linux

开始

安装 Gatsby 脚手架webpack

npm install -g gatsby-cli
复制代码

Gatsby 脚手架提供的经常使用命令有：git

gatsby new [projectName] [starter]：根据 starter 建立一个新项目
gastby develop：开启热加载开发环境
gastby build：打包到 public 下
gatsby serve：在打包以后，启动一个本地的服务测试打包好的生产环境文件

新建项目

gatsby new gatsby-start
复制代码

gatsby 默认会使用 gatsby-starter-default 来新建项目，你能够在后面加上其余 starter 的 GitHub 地址，来使用这个 starter 初始化项目。github

starter

starter 的概念就是一个初始化模板，你能够基于这个模板进行开发。本文使用的是最基础的版本 gastby-starter-hello-world，只包含基本的依赖：react、graphql 和 prettier。

gatsby new gatsby-start https://github.com/gatsbyjs/gatsby-starter-hello-world
复制代码

其余 starter 可查看官网

若是你使用其余 starter，可能会出现安装依赖时报错的状况：pngquant pre-build test failed。解决方案可查看下文Gatsby 图片优化部分。

启动项目

cd gatsby-start
gatsby develop
# 或者
yarn develop
复制代码

打开 localhost:8080 查看生成页面，能够打开 localhost:8000/__graphiql GraphiQL 调试界面。

GraphiQL

GraphiQL 是 GraphQL 的调试界面，你能够在这里查看全部的数据、以及调试 query 语句是否返回相应的数据。

Gatsby 还加强了这个界面，添加了 Explorer 侧边栏，咱们能够直接在左侧点击选中，就能够自动生成 query 语句。

建立页面

只须要了解 React 便可编写一个页面。

在 src/pages/ 目录下，新建一个 JS 文件便可。在 src/pages/ 目录下的页面，Gatsby 会自动添加路由，生成页面。

咱们来建立一个 about.js 文件：

import React from 'react'

export default () => (
  <div> <h1>About destiny</h1> <p>location: SHEN ZHEN</p> </div>
)
复制代码

而后打开 localhost:8000/about 查看页面

公用组件

在 src 目录下，建立一个 components 文件夹，名字不是固定的，而是约定俗称的，用于放置组件文件。

咱们来尝试建立一个 Header 组件。

首先建立 header.js 文件：

import React from 'react'
// Link 是由 Gatsby 封装好的用于跳转连接的组件
import { Link } from 'gatsby'

export default () => (
  <header> <Link to="/"> <h1 style={{display: 'inline'}}>Destiny'Note</h1> </Link> <Link style={{float: 'right'}} to='/about'>About</Link> </header>
)
复制代码

而后在页面 about 中应用：

import Header from '../components/header'
export default () => (
  <div> <Header /> <!-- 省略 --> </div>
)
复制代码

布局组件

咱们能够建立一个总体的布局组件，来实现一些公共的样式和逻辑。咱们在 components 目录下建立 layout.js 文件

import React from 'react'
import Header from './header'

export default ({ children }) => (
  <div style={{ margin: '0 auto', maxWidth: '650px', padding: '2rem'; paddingTop: '3rem' > <Header /> {children} </div>
)
复制代码

而后在 about.js 和 index.js 文件中应用便可。

// about.js
import React from 'react'
import Layout from '../components/layout'
export default () => (
  <Layout> <!-- 省略 --> </Layout>
)
// index.js
import React from 'react'
import Layout from '../components/layout'
export default () => (
  <Layout> <!-- 省略 --> </Layout>
)
复制代码

应用样式

普通样式

在 src 目录下，建立 styles 文件夹，一样是没有约束的。css 文件路径也是随你配置。

只须要在页面组件或者其余组件引入便可

import '../styles/xxx.css'
复制代码

应用全局样式

咱们能够在 styles 目录下建立 global.css 文件：

html {
  background-color: lightblue;
}
复制代码

而后在根目录下，建立一个 gatsby-browser.js 文件，注意这个文件名是固定的：

import "./src/styles/global.css"
// 或者使用 require
// require('./src/styles/global.css')
复制代码

引入样式文件便可。

设置全局样式功能，主要用于初始化一些默认样式和公共的样式。实际上，普通的 css 文件引入都是属于全局的，并无进行 CSS 模块化，后面会讲到。

使用 Sass

你也可使用 sass 预处理器。

安装依赖

yarn add node-sass gatsby-plugin-sass
复制代码

若是你没法下载 node-sass，那么能够尝试将你的包管理器的源设置为淘宝源。 yarn config set registry http://registry.npm.taobao.org

而后找到 gatsby-config.js 文件，在 plugins 字段中加上：

plugins: [
  //...
  `gatsby-plugin-sass`
]
复制代码

而后直接使用 sass 便可

须要注意的是，安装了新的依赖，以及编辑了根目录下的 js 文件，须要从新启动项目。

CSS Module

这是很是重要的一部分，CSS Module 能够减小全局污染、防止命名冲突和样式的覆盖。CSS Module 即将某个 CSS 文件单独应用于某个组件，不会影响外界其余的样式。

CSS Module 实现原理是：将全部模块化的类名，修改成成惟一的名称，即添加一些不重复的前缀或后缀。这样使得项目中，不一样人员编写的样式不会出现覆盖和冲突。

在 Gatsby 中，咱们将模块化的 CSS 文件命名为 xxx.module.css，注意其后缀名。咱们只须要按照普通 CSS 文件来编写便可：

.container {
  background: red;
  margin: 0 auto;
}
复制代码

而后在组件中引入：

import React from "react"
// 引入这个文件，获得的是全部的类名映射对象
import containerStyles from "../styles/container.module.css"

// 在 HTML 元素上添加类名，须要像下面这样，使用映射后的类名
export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)
复制代码

能够打开控制台，来查看生成的类名。

CSS in JS

这又是一个新的知识点，CSS in JS 是在 JS 文件中，使用内联的方式编写样式。与 CSS Module 同样是为了解决 CSS 模块化的问题。

CSS in JS 的原理：在编写了内联样式的元素上，自动添加一个惟一的类名，而后生成一个 CSS 文件，将对应的类名和样式放入其中。

Gatsby 官网中推荐了两个库：Emotion 和 Styled Component。这里选用 Emotion。

在 Gatsby 中，两个写法相似。

安装依赖：

yarn add gatsby-plugin-emotion @emotion/core @emotion/styled
复制代码

而后再 gatsby-config.js 文件中添加插件：

plugins: [
  //...
  `gatsby-plugin-emotion`
]
复制代码

使用：

// header.js
import React from 'react'
import { Link } from 'gatsby'
// 两种写法，一个是用 styled，一个是用 css
import styled from "@emotion/styled"
import { css } from "@emotion/core"

// 模板字符串的写法，实际上就是函数传参
// styled 返回的是一个组件，方便复用元素
const Title = styled.h1` display: inline； `
export default () => (
   <Title>Destiny'Note</Title>
)

// css 返回的是样式对象，方便复用样式
const inline = css` display: inline； `
export default () => (
	<h1 css={inline}>Destiny'Note</h1>
)
// 或者直接内联编写
export default () => (
	<h1 css={css` display: inline； `}>Destiny'Note</h1>
)
复制代码

如今，你能够尝试将你的全部组件修改成这样的写法。

Typography 样式排版

Typography.js 是一个 JavaScript 库，可让你的网站的版式设置为预先存在的版式主题，也能够自定义版式。实际上就是一个应用字体、行高等进行排版的库。

安装依赖：其中最后一个是版式主题，你能够选择本身喜欢的主题。

yarn add gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
复制代码

在 gatsby-config.js 中引入插件：

plugins: [
  //...
  // 插件的两种写法，没有配置，就是字符串，须要配置则是一个对象
  {
    resolve: `gatsby-plugin-typography`,
  	options: {
    	pathToConfigModule: `src/utils/typography`, // typography 配置文件路径
  	},
  }
]
复制代码

在 src 下建立 utils/typography.js 文件：

import Typography from 'typography'
import fairyGateTheme from 'typography-theme-fairy-gates'

// 自定义
const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: ["Avenir Next", "sans-serif"],
  bodyFontFamily: ["Georgia", "serif"],
})
// 使用主题
const typography = new Typography(fairyGateTheme)
export default typography
复制代码

从新启动项目，便可查看如今的页面排版样式了。

具体的 API 可查看官网

获取 GraphQL 中的数据

首先咱们在 gatsby-config.js 文件中建立 siteMatedata：

module.exports = {
  siteMetadata: {
    title: `Destiny'Note`,
    author: `destiny`
  },
  plugins: [
    //...
  ]
}
复制代码

在组件中，咱们应该如何获取数据呢？在 Gatsby 中，须要分红两种形式。

页面组件获取数据

页面组件中，咱们须要调用 Gatsby 提供的 graphql 方法来查询数据：Gatsby 会自行处理

// about.js
import React from 'react'
import Layout from '../components/layout'
import {graphql} from 'gatsby'

// GraphQL 获取的数据，会当作参数传递到页面组件中
// 数据的形式是 {errors， data}，没有错误则不会有 errors
export default ({data}) => (
  <Layout> <h1>About ${data.site.siteMetadata.author}</h1> <p>location: SHEN ZHEN</p> </Layout>
)

// 调用 graphql 方法获取数据，返回的是 Promise
// 变量名没有规定
export const query = graphql` query { site { siteMetadata { title } } } `
复制代码

非页面组件获取数据

非页面组件获取数据则须要结合两个 API：useStaticQuery 和 graphql。

// header.js
import React from 'react'
import { Link, useStaticQuery, graphql } from 'gatsby'
import { css } from '@emotion/core'

export default () => {
  // 使用 useStaticQuery 包裹 graphql 查询，实际上至关于 async/await，等待返回数据
  const data = useStaticQuery(graphql` query { site { siteMetadata { title } } } `)
  return (
    <header css={css`margin-bottom: 1.5rem`}> <Link to="/"> <h1 css={css`display: inline`}> {data.site.siteMetadata.title} </h1> </Link> <Link to="/about" css={css`float:right;`}>About</Link> </header>
  )
}
复制代码

获取文件数据

Gatsby 能够经过一些源（source）插件将各方面的数据转换为本地可以经过 GraphQL 提取的内容。好比 gatsby-source-filesystem、gatsby-source-wordpress 等。主要有本地的文件以及其余内容管理系统中的数据，能够用于数据的迁移。这里只讲解本地文件数据的获取。

gatsby-source-filesystem

安装插件：

yarn add gatsby-source-filesystem
复制代码

而后添加插件和配置：

plugins: [
  //...
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/src`,// 文件路径
      name: 'src', // 名称，能够用来过滤
      ignore: [] // 可选的，忽略的文件
    }
  },
  // 若是须要再获取第二个文件夹，能够再设置一遍
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      path: `${__dirname}/src/_posts`,// 文件路径
      name: 'posts' // 名称，能够用来过滤
    }
  }
]
复制代码

这个插件为 GraphQL 添加了 allFile 和 file 两个数据字段，其中包含有不少的字段，能够自行查看 graphiql。

经过 sourceInstanceName 来过滤一开始设定的 name :

具体的用法能够查看文档

此时，咱们就能够经过 GraphQL 来获取文件的一些数据了。

利用文件数据建立页面

咱们来建立一个页面 my-file.js：展现一个表示，查看当前 src 下文件信息

import React from 'react'
import { graphql } from 'gatsby'

export default ({ data }) => (
  <Layout> <div> <h1>My Site's Files</h1> <table> <thead> <tr> <th>relativePath</th> <th>prettySize</th> <th>extension</th> <th>birthTime</th> </tr> </thead> <tbody> {data.allFile.edges.map(({ node }, index) => ( <tr key={index}> <td>{node.relativePath}</td> <td>{node.prettySize}</td> <td>{node.extension}</td> <td>{node.birthTime}</td> </tr> ))} </tbody> </table> </div> </Layout>
)

export const query = graphql` query { allFile(filter: { sourceInstanceName: { eq: "src" } }) { edges { node { relativePath prettySize extension birthTime(fromNow: true) } } } } `
复制代码

转换器插件

一般，从源插件获取的数据格式不是你须要的格式。Gatsby 支持转换器插件，这些转换器插件从源插件中获取原始内容并将其转换为更有用的东西。

例如，Markdown 文件，当用它构建页面时，须要转换为 HTML。

gatsby-transformer-remark

gatsby-transformer-remark 的做用是将 filesystem 转换的数据中，将 md 文件的数据抽取出来，进行必定的转换再存储到 GraphQL 中。

安装插件：

yarn add gatsby-transformer-remark
复制代码

添加插件：

plugins: [
  //...
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      "excerpt_separator": `<!-- more -->` // 设置摘要分隔符
    }
  }
]
复制代码

这个插件添加了 allMarkdownRemark 和 markdownRemark 两个数据字段

文档

只使用这个转换器多是不够的，能够查看官网查找其余插件，如：mdx、其余 remark 等等

建立示例文章

在 src 下建立 _posts 目录，添加一个 first.md 文件：

---
title: Hello World
date: 2019-11-07 ---
# Hello World

hello, destiny

```js function info() { return { name: 'destiny', age: 16 } } ``` 复制代码

文件开头的 --- 包裹的是 frontmatter

一样再建立一个 second.md 文件。

展现在首页

获取文章数据展现在首页

// index.js
import React from 'react'
import Layout from '../components/layout'
import { Link, graphql } from 'gatsby'
import { css } from '@emotion/core'

export default ({ data }) => (
  <Layout> <div> <h4>{data.allMarkdownRemark.totalCount} Posts</h4> {data.allMarkdownRemark.edges.map(({ node }) => ( <div key={node.id}> <h3 css={css`margin-bottom: 1rem}`}> {node.frontmatter.title}{' '} <span css={css`color: #bbb`}> — {node.frontmatter.date} </span> </h3> <p>{node.excerpt}</p> </div> ))} </div> </Layout>
)
// 这里对数据根据 frontmatter 中的 date 进行排序
export const query = graphql` query { allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { totalCount edges { node { id frontmatter { title date } fields { slug } excerpt } } } } `
复制代码

编程式建立页面

咱们不可能为每一篇文章都在 pages 下建立一个文件，所以咱们须要编写自动建立页面的代码，Gatsby 提供了两个 API：onCreateNode 、createNodeField、createPages 和 createPage。

在根目录下建立 gatsby-node.js 文件，名称是固定的。这里进行一些逻辑的编写。

分为两步：

生成 path 或者 slug 做为路径
生成根据路径建立页面

const path = require('path')
const { createFilePath } = require(`gatsby-source-filesystem`)

// 每当 GraphQL 数据中建立（或更新）新节点时，Gatsby 都会调用此函数
// 注意，这个名称是固定的
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  
  // 在 GraphQL 数据中建立的节点类型是 MarkdownRemark
  if (node.internal.type === `MarkdownRemark`) {
    // 根据文件名建立 slug
    let slug = createFilePath({ node, getNode, basePath: `posts` })
    // 经过 createNodefield 在当前字段的 fields 下建立一个数据字段
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

// 建立页面，这个名称是固定的
exports.createPages = async ({ graphql, actions }) => {
  // 获取到 createPage 方法
  const { createPage } = actions
  // 查询全部 md 文件数据
  const result = await graphql(` query { allMarkdownRemark { edges { node { fields { slug } frontmatter { path } } } } } `)
  // 逐个建立相应的页面
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    let path = node.frontmatter.path || node.fields.slug; // 可使用自定义路径
    createPage({
      path,
      // 建立页面须要模板组件
      component: path.resolve(`./src/templates/post.js`),
      context: {
        // 传递给模板组件中在查询时, 接收的变量值
        path
      },
    })
  })
}
复制代码

模板组件

全部文章使用相同的模板显示。在 src 目录下，建立 templates 文件夹，添加 post.js：

import React from 'react'

export default function Post({data}) {
  const {markdownRemark: post} = data
  return (
    <div> <h1>{post.frontmatter.title}</h1> </div>
  )
}
// $path 是生成页面时的 context 中带上的变量，名称前面加上 $ 符
export const postQuery = graphql` query ($path: String!) { markdownRemark(frontmatter: { path: { eq: $path } }) { html frontmatter { path title } } } `
复制代码

优化

添加 PWA 支持

须要两个插件：gatsby-plugin-manifest 和 gatsby-plugin-offline。

安装依赖：

yarn add gatsby-plugin-manifest gatsby-plugin-offline
复制代码

添加插件：

plugins: [
  //...
  {
    resolve: `gatsby-plugin-manifest`,
    options: {
      name: `Destiny'Note`,
      short_name: `Destiny`,
      start_url: `/`,
      background_color: `#6b37bf`,
      theme_color: `#6b37bf`,
      display: `standalone`,
      icon: `src/images/icon.png`,
    },
  },
  `gatsby-plugin-offline` // 这个插件必须在 manifest 后面
]
复制代码

添加相应的 icon.png

SEO 优化

添加 metadata

安装依赖：

yarn add gatsby-plugin-react-helmet react-helmet
复制代码

在 gatsby-config.js 中添加 siteMetadata 和插件：

{
  siteMetadata: {
    // 这三个属性必需要有
    title: `Destiny'Note`,
    author: `destiny`,
    description: `my own blog`,
    keywords: `react, graphql, gatsby`
  },
  plugins: [
    //...
    `gatsby-plugin-react-helmet`
  ]
}
复制代码

在 src/components 下增长 seo.js 文件：

import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, keywords, title }) {
  const { site } = useStaticQuery(
    graphql` query { site { siteMetadata { title description author } } } `
  )
  const metaDescription = description || site.siteMetadata.description
  const metaKeywords = keywords.join(',') || site.siteMetadata.keywords
  return (
    <Helmet htmlAttributes={{ lang, }} title={title} titleTemplate={`%s | ${site.siteMetadata.title}`} meta={[ { name: `description`, content: metaDescription, }, { name: `keywords`, content: metaKeywords }, { property: `og:title`, content: title, }, { property: `og:description`, content: metaDescription, }, { property: `og:type`, content: `website`, }, { name: `twitter:card`, content: `summary`, }, { name: `twitter:creator`, content: site.siteMetadata.author, }, { name: `twitter:title`, content: title, }, { name: `twitter:description`, content: metaDescription, }, ].concat(meta)} /> ) } // 默认配置 SEO.defaultProps = { lang: `zh-CN`, meta: [], description: ``, } SEO.propTypes = { description: PropTypes.string, lang: PropTypes.string, meta: PropTypes.arrayOf(PropTypes.object), title: PropTypes.string.isRequired, } export default SEO 复制代码

而后在全部的页面中添加相应的 SEO 组件。

// post.js
import SEO from '../components/seo'

export default ({ data }) => {
  const { markdownRemark: post } = data
  return (
    <Layout> <SEO title={post.frontmatter.title} description={post.excerpt} /> <!-- else --> </Layout> ) } export const query = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { title } excerpt } } ` 复制代码

经过 Chrome 的 LightHouse 进行性能查看

先打包文件：

yarn build
复制代码

而后启动生产代码：

yarn serve
复制代码

打开 localhost:9000 进行查看

打开控制台，点击 Audit 栏：

选中全部 Audits 项，而后点击 Run audits，等待一会就能看到你的审核界面。

Gatsby Imgae 优化

基本功能

在 Gatsby 中，你能够这样引入图片：

使用相对路径
利用 static 文件夹，由于静态文件夹下的全部文件都会直接复制到 public 下，因此路径能够直接将 static 做为根目录来引用图片
使用 webpack import 图片

import logo from "./logo.png"
console.log(logo); // 是一个通过 webpack 编译后的路径
function Header() {
  return <img src={logo} alt="Logo" /> } 复制代码

下面介绍 Gatsby Image ，它帮助咱们优化图片，从而在页面中更快的显示。它会在 public/static 下生成各类不一样分辨率的压缩图片，会按需加载这些图片。

依赖和配置

首先安装依赖：

yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp
复制代码

而后在 gatsby.config.js 中引入插件：

plugins: [
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  { 
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `./static/assets/`， // 图像存在的位置，咱们统一修改成 ./static/assets/ 中
      name: `image`
    }
  }
]
复制代码

BUG

安装依赖的过程当中，可能会出现 pngquant pre-build test failed，这是由于 gatsby-plugin-sharp 依赖于一个叫 pngquant-bin 的包，这个包下载出现问题。

能够参考下面的 Issue：

其中大部分出现问题都是在 Linux 系统下。一开始大部分问题出现缘由是：Use raw.githubusercontent.com instead of raw.github.com for binaries #99，这个 PR 已经合并到源码中，造成了 5.0.2 版本，貌似解决了一些人的问题。可是，后面仍然有大量提交 issue 都是 5.0.2 出现这样的问题。

在 Linux 下，可能安装 libpng-dev 就能解决，能够查看 Gatsby on Linux

在 Windows 下，能够查看 Gatsby On Windows

在 Mac 下，暂时没有教程指导。能够尝试如下步骤：

先安装其余不依赖 pngquant-bin 的包，最后安装依赖 pngquant-bin 的包。
安装最后一个包时，会报错：pngquant pre-build test failed。或者，你到下载完成，在编译的时候中止下来

而后打开 node_modules/pngquant-bin/lib/index.js
再次安装，注意在运行过程当中，达到上图阶段时，修改找到的 index.js 文件，将 githubusercontent 改成 github

如今就已经完成了，能够直接运行项目了。可是，后面再次安装这个包时，仍然会存在这样的问题。

查询图像

export const query = graphql` query { file(relativePath: { eq: "headers/headshot.jpg" }) { childImageSharp { fixed(width: 125, height: 125) { ...GatsbyImageSharpFixed } fluid { ...GatsbyImageSharpFluid } } } } `
复制代码

相对路径是指相对于配置中 path 路径的基础上
使用GatsbyImageSharpFixed返回固定的宽度和高度图片
使用片断GatsbyImageSharpFluid返回自适应的图片，这些图片将填充其容器而不是适合特定尺寸

显示图片

import Img from "gatsby-image"
export default ({data}) => (
  <Img className="headshot" fixed={data.file.childImageSharp.fixed} // 使用数据进行渲染 alt="headshot" /> ) 复制代码

具体可查看教程：

Gatsby Image tutorial

Gatsby Image API

部署

surge

安装 surge：

npm install -g surge
复制代码

登录或者建立帐号：

surge login
复制代码

会让你输入邮箱和密码，若是没有帐号，会自行建立。

打包你的代码以后：

surge public/ # 发布 public 文件夹下的文件
# 或者
cd public
surge
复制代码

而后，出现 project 和 domain，若是停留在 project，记得敲回车。出现 domain 以后，这个 domain 是随机出现的，能够修改这个 domain，格式必须是 xxx.surge.sh。而后回车、回车、回车。

我第一次使用的时候，觉得是自动化的，彻底没有提示和说明，而后一直觉得卡住了。进入那个域名也不是本身的网页，因此，记得回车。回车以后若是域名有人部署了，会有提示并失败。

官网

GitHub Pages

GitHub Pages 则须要提交到 GitHub 仓库，将部署代码发布到 gh-page 分支

yarn build
cd public

git init
git add -A
git commit -m 'update'

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
复制代码

而后在仓库中进行点击 Settings, 找到 GitHub Pages，选择 Source 为 gh-pages 分支，肯定便可。

Netlify

Netify 用于部署以及内容管理系统。你能够将网页部署到 Netlify，还能够发布你的 CMS 系统，随时登录到你部署的 CMS 上发布和修改文章，而不须要在本地代码库中发布。

安装依赖：

yarn add netlify-cms-app gatsby-plugin-netlify-cms
复制代码

添加插件：

plugins: [
  `gatsby-plugin-netlify-cms`,
  //...
]
复制代码

插件配置具体查看官网

而后，在 static 目录下，建立 admin/config.yml 文件：

backend:
 name: github
 repo: <username>/<repo>

media_folder: static/assets # 媒体文件，通常是图片的存储路径
public_folder: assets # 媒体文件夹名称

display_url: https://your-website.cn # CMS 上展现一个指向你的网站的 URL

collections: # 收藏集，CMS 的侧边栏分类
 - name: blog
 label: Blog
 folder: src/posts
 create: true  # 容许新增
 fields: # 编辑文件时，须要填写的数据，会将其放在 frontmatter 中
 - { name: path, label: Path, required: false }
 - { name: date, label: Date, widget: date }
 - { name: title, label: Title }
 - { name: tags, label: Tags,  widget: list}
 - { name: categories, label: Categories,  widget: list}
 - { name: body, label: Body, widget: markdown }
复制代码

具体配置查看Netlify 配置文件

开发环境下，你能够在 localhost:8000/admin 中查看你的 CMS 界面。

最后将代码打包上传到 GitHub 上，到 app.netlify.com 上注册帐号，而后建立新的网站，关联你的 GitHub 的仓库，将项目都部署到 Netlify 上。

以后，你须要得到一个 GitHub OAuth token，进入页面以后，点击 New OAuth app。

注意： HomePage URL 能够设置为你的部署地址，这个没有硬性要求。可是，最后的 callback URL 必须设置为 https:api.netlify.com/auth/done，不然在 CMS 页面，没法进行登录。

设置完成以后，点击进去，找到 clientID 和 clientScret。

而后在 Netlify 中，你部署的项目的设置界面，找到 Access Control，点击 Install Provider，而后粘贴 clientID 和 clientScret。

以后，便可访问你的 CMS 管理界面。

参考

Gatsby tutorial

1. Gatsby 入门指南
2. Gatsby 入门
3. Gatsby 入门篇
4. Gatsby入门指南—安装和博客搭建（0）
5. Node.js 指南（入门指南）
6. Firebug入门指南
7. Git入门指南
8. pytorch 入门指南
9. Gulp入门指南
10. webpack 入门指南
更多相关文章...
• SQL 指南 - 网站建设指南
• HTML 指南 - 网站建设指南
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用