哇哦!你已经完成这么多了!你学到了如何:

  • 创建一个新的 Gatsby 站点
  • 创建页面和组件
  • 为组件添加样式
  • 为网站添加插件
  • 使用数据源和转换数据
  • 使用 GraphQL 来查询页面数据
  • 以编程的方式利用数据创建页面

在这最后一章中,你将学习到一些让网站准备好上线的步骤。我们将介绍一个强大的站点诊断工具 Lighthouse,并在过程中介绍一些你通常希望在 Gatsby 网站中使用的插件。

# 使用 Lighthouse 审查

引用自 Lighthouse 官方介绍页面

Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 你为 Lighthouse 提供一个你要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

Chrome 开发者工具中包含了 Lighthouse。运行审查功能然后解决发现的错误并执行建议的改进措施,是使网站能正常运行的好方法。它使你确保自己的网站尽可能快速,尽可能高可用。

试试看它吧!

首先,你需要使用生产环境打包。Gatsby 的开发服务器是为了快速开发而优化过的,虽然这个版本与生产版本极其相似,但是优化完全不一样。

# ✋ 创建一个生产环境版本

  1. 停止开发服务器(如果它正在运行)并执行以下命令:
gatsby build

💡 和你在 第 1 章 中学到的一样,这个命令会构建网站的生产版本,并把静态文件输出到 public 目录中。

  1. 在本地查看你的生产环境版本。运行:
gatsby serve

当启动完成后,你可以个在 localhost:9000 这个页面访问你的网站。

# 运行一次 Lighthouse 审查

现在你将要第一次运行 Lighthouse 测试。

  1. 如果你还没有这么做过,请:在 Chrome 隐身模式下打开你的网站,这样就没有浏览器扩展干扰测试。然后打开 Chrome 开发者工具。

  2. 点击 “Audits” 标签,然后你会在屏幕上看到这样的内容:

开始 Lighthouse 审查

  1. 点击 “Perform an audit...” (所有可用的审查类型应该默认被选中了)。然后点击 “Run audit”(然后就会运行一个一分钟左右的审查)。审查完成时,你应该能看到像这样的结果:

Lighthouse 审查结果

如你所见,Gatsby 网站开箱即用,性能已经非常好了。但 PWA、可访问性(Accessibility)、最佳实践(Best Practices)和 SEO 等方面还有提高的空间,分数还能更高。在提高后你的网站将对访问者和搜索引擎更加友好。

# 增加一个清单(manifest)文件

看起来你的网站在 “渐进式 Web 应用”(Progressive Web App)类别中的得分很低。让我们来解决这个问题。

首先我们要搞清楚:什么是 PWA?

它是一个利用现代浏览器功能,利用像 app 一样的功能和好处,来丰富网络体验的常规网站。查看 Google概述 中定义的 PWA 网站体验。

包含 Web 应用清单文件是 PWA 的三个公认基准要求 之一。

Google 提到:

Web 应用的清单是一个简单的 JSON 文件。它告诉浏览器 Web 应用的信息,以及当用户 “安装” Web 应用时它要如何呈现。

Gatsby 的清单插件 能为每一个 Gatsby 网站的构建配置一个 manifest.webmanifest 文件。

# ✋ 使用 gatsby-plugin-manifest

  1. 安装插件:
npm install --save gatsby-plugin-manifest
  1. 添加一个网站图标(favicon) src/images/icon.png 到你的应用里。就本章教程所构建的应用而言,如果你手头没有可用的图标,你可以使用 这个示例图标。这个图标是为清单文件构建所有图像所必需的。详情请查这篇文档 gatsby-plugin-manifest

  2. gatsby-config.js 文件里,把插件添加到 plugins 数组中。

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#6b37bf`,
        theme_color: `#6b37bf`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
  ]
}

这就是开始向 Gatsby 网站添加网络清单所需的全部了。给出的示例包含基本的配置——请查看 插件应用 来了解更多配置选项。

# 添加离线支持

网站要成为 PWA 的另一个要求是使用 service workder。Service worker 在后台运行,根据应用与网络的连通性来决定使用网络还是内容缓存,从而实现无缝的离线体验。

Gatsby 的离线插件 使 Gatsby 站点能够离线运行,并通过创建一个 service worker 使你的站点在糟糕网络状况下受到的影响更小。

# ✋ 使用 gatsby-plugin-offline

  1. 安装插件:
npm install --save gatsby-plugin-offline
  1. gatsby-config.js 文件里,把插件添加到 plugins 数组中。
{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#6b37bf`,
        theme_color: `#6b37bf`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
    // highlight-next-line
    `gatsby-plugin-offline`,
  ]
}

这就是在 Gatsby 中开始使用 service worker 所需的全部了。

💡 离线插件应该放在清单插件 之后。以便离线插件可以缓存清单插件创建的 manifest.webmanifest

# 添加页面元数据(metadata)

为页面添加元数据(比如 title 和 description),是帮助 Google 之类的搜索引擎理解页面内容,决定什么时候出现在搜索结果里的关键。

React Helmet 是一个提供了 React 组件接口的包,帮助你管理 document head

Gatsby 的 React Helmet 插件 为 React Helmet 添加的服务端渲染的数据提供了直接支持。使用该插件,你添加到 React Helmet 的属性将被添加到 Gatsby 构建的静态 HTML 页面中。

# ✋ 使用 React Helmetgatsby-plugin-react-helmet

  1. 安装这两个插件:
npm install --save gatsby-plugin-react-helmet react-helmet
  1. 确保你的 siteMetadata 对象中配置好了 descriptionauthor。 并在 gatsby-config.js 文件里添加 gatsby-plugin-react-helmet 插件到 plugins 数组中。
module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
    // highlight-start
    description: `A simple description about pandas eating lots...`,
    author: `gatsbyjs`,
    // highlight-end
  },
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#6b37bf`,
        theme_color: `#6b37bf`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-offline`,
    // highlight-next-line
    `gatsby-plugin-react-helmet`,
  ],
}
  1. 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, title }) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          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: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default SEO

上面的代码为你最常用的元数据标签(tag)设置了默认值,并提供了一个 <SEO> 组件,可在项目的其余部分中使用。很棒吧?

  1. 现在你可以在模版和页面中使用 <SEO> 组件,并把 props 传进去。比如像这样添加到 blog-post.js 模版里:
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
// highlight-next-line
import SEO from "../components/seo"

export default ({ data }) => {
  const post = data.markdownRemark
  return (
    <Layout>
      // highlight-start
      <SEO title={post.frontmatter.title} description={post.excerpt} />
      // highlight-end
      <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
      // highlight-next-line
      excerpt
    }
  }
`

上面的例子基于 Gatsby Starter 博客。通过向<SEO> 组件传入 props,你可以实时更改博文的元数据。在这种情况下,将使用博客标题 titleexcerpt(如果存在于博客帖子markdown文件中)代替 gatsby-config.js 文件中默认siteMetadata` 属性。

现在如果你再运行 Lighthouse 审查,你应该能拿到近乎完美的 100 分!

💡 更多文档和例子:添加一个 SEO 组件,以及 React Helmet 文档

# 不断改善

在本章教程中,我们向你展示了一些 Gatsby 独有的工具,这些工具可以改善网站的性能并让网站准备好上线。

Lighthouse 是一个用于改进和学习网站的非常好的工具——继续查看它提供的详细反馈,并不断改善你的网站!

# 接下来

# 官方文档

# 官方插件

  • 官方插件: 一个包含了所有 Gatsby 自己维护的官方插件的完整列表。

# 官方 Starters

  1. Gatsby 的默认 Starter:使用此默认样板启动你的项目。这个入门 Starter 包含了你可能需要的主要 Gatsby 配置文件。效果演示
  2. Gatsby 的博客 Starter:能创建一个又好又快的博客的 Gatsby starter。效果演示
  3. Gatsby 的 Hello-World Starter: 一个最基础的能让 Gatsby 网站运行的 Gatsby starter。效果演示

# 咱们终于全整完了

呃……并不完全是。只是教程结束了。还有一些 其他教程,它们也囊括了一些很有意义的用例。

这只是开始。让我们继续探索和使用了不起的 Gatsby!

看看 "如何贡献" 文档来获得更多灵感。

我们迫不及待想看到你做了什么 😄。