Gatsby是什么？

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

最近我对Gatsby产生了浓厚的兴趣，它是比较流行的“静态网站生成器”之一。要知道，我可是从 Active Server Pages 起步，在 Cold Fusion 中磨练技艺，也涉猎过 PHP，并用 ASP.NET 构建了无数企业级应用程序。

所有这些网络技术的共同点在于它们的动态特性。它们直接查询数据库，从用户收集信息，实时显示数据，并提供引人入胜的动画用户体验。那么，我为什么要退回到编写静态网站的老路呢？

<P><FONT FACE="Comic Sans" COLOR="Red"><B>Rob's Backstreet Boys Fanpage</B></FONT></P>
<P><IMG SRC="Nick_Carter.jpeg"></IMG></p>

因为静态网站是上世纪90年代的东西，对吧？Jekyll（以及其他“静态网站生成器”）只适用于营销页面和博客……对吧？

毋庸置疑，我对“静态网站”的先入之见大错特错。

Gatsby 是一个动态静态网站生成器😅

Gatsby 是一个开源（MIT 许可）的静态网站生成器，它使您能够基于 React、GraphQL 和其他前端友好工具（如 webpack 和 react-router）构建高性能网站。

是的，它是一个静态网站生成器。但这是我们最后一次使用这个过时的术语了。因为在网络上，静态并不等于不变。而这正是我需要学习的第一课。

对我来说，理解 Gatsby 意味着了解它的一些关键功能和优势：

• 🏎️快速应用。Gatsby利用代码拆分、压缩等优化技术，打造速度飞快的应用。这些应用支持 PWA，专为提升速度而生。
• ⚒️卓越的用户体验。Gatsby简化了工具配置，并最大限度地减少了样板代码。热重载功能完美运行™。
• 🔌丰富的插件选择。需要添加 Google Analytics 支持？有相应的插件。
• 🥇基于成熟的技术。React是目前最流行的前端框架。GraphQL 是 API 查询的标准。

Gatsby 赋予开发者构建速度极快的 Web 应用程序的能力，它以一种略带预设的方式使用 React 和 GraphQL，并且拥有无与伦比的开发者体验。

让我看看能不能证明给你看。

最简单的 Gatsby 网站

在开始之前，你需要明白 Gatsby 应用本质上仍然是 React 应用。任何你能用 React 实现的功能，你都可以用 Gatsby 实现。

所以，赶紧开始安装吧：

$ npm install -g gatsby-cli

创建一个 Gatsby 样板应用：

$ gatsby new my-first-gatsby-app

请登录到这个新创建的目录：

$ cd my-first-gatsby-app

最后启动你的开发服务器：

$ gatsby develop

这将执行应用程序的开发版本，并可在本地访问http://localhost:8000。

注意：您在终端中看到的另一个链接是：http://localhost:8000/___graphqlGraphiQL提供了一个 Web 界面来测试您的 GraphQL 查询，这对于 Gatsby 应用程序至关重要。

用你喜欢的编辑器打开生成的项目目录，展开src目录，你应该会看到类似这样的内容：

即使是只有 React 基本经验的人也能理解以下代码的含义index.js：

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

除了缺少分号这个令人抓狂的问题之外，我很喜欢这个样式。😀

盖茨比的页面

在pages目录中，你会看到404.js` <React 组件index.js>`、`<React 组件>` 和page-2.js`<React 组件>`。没错，这些都是 React 组件。但 Gatsby 会自动将这些组件转换为具有真实 URL 的真正网页。

所以，如果您想手动查看内容而page-2无需点击链接index，只需http://localhost:8000/page-2在浏览器中输入即可。

GIF

Gatsby 链接组件

但我们来看看你真正想如何引导用户在你的应用中浏览。这要从<Link>组件开始。你可能已经猜到了，正是这个组件让你能够创建指向网站其他页面的链接。没错！我对 React 的路由机制的理解是它一团糟，所以 Gatsby 选择利用其链接组件的封装@reach/router。<Link>

我最喜欢 Gatsby 的一点<Link>是它默认启用预取功能。在我们的场景中，这意味着page-2当用户点击浏览器中的链接时，内容会被预先加载并几乎立即可用！摘自 Gatsby 文档：

当元素位于视口中时，我们使用一个事件IntersectionObserver来获取低优先级请求；当用户可能导航到所请求的资源时，我们使用一个事件来触发高优先级请求。LinkonMouseOver

Gatsby中的图像优化（插件也超赞！）

Gatsby 的强大功能很大程度上来自于其丰富的插件集合。

GIF

我们的入门应用程序中包含的一个例子是Image组件（由gatsby-image插件提供支持）。

gatsby-image利用 Gatsby 的核心图像优化功能以及一些高级的图像加载技术，自动优化您网站上的图像。

为什么你会选择使用gatsby-image组件而不是普通<img>元素？

1. 它会延迟加载图片。
2. 首先加载图像的小版本，并在加载完整图像时使用“模糊”效果。
3. 根据播放设备的不同，使用最佳图像尺寸。
4. 如果您的浏览器支持 WebP，则可以使用 WebP。

注意：这并不能替代Cloudinary之类的服务，但确实可以对应用程序中的静态图像进行一些快速的零配置优化。

Gatsby网站样式

你知道 Gatsby 网站本质上仍然是 React 网站，对吧？这意味着你仍然可以对元素进行内联样式设置：

<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>

但天气会转凉的。😎

想使用全局 CSS 文件？创建一个src/styles/global.css文件并将其导入gatsby-browser.js：

import "./src/styles/global.css"

您的网站是否使用多个页面布局？这是一种更常见的情况，因此 Gatsby 允许您将 CSS 文件分配给Layout组件（当然，也Layout可以将单个组件导入到单个页面）。

所以在我们的初始应用中，你会看到一个layout.js组件和一个layout.css文件。在文件中，index.js你会看到元素Layout的导入和使用方法<Layout>：

const IndexPage = () => (
  <Layout>
    ...

布局本身就是一个庞大的体系，但却是需要学习的关键概念。

热重载和开发者体验

Gatsby 的真正亮点在于其开发者体验 (DX)。再说一遍：热重载功能完美运行™。

在你的配置文件中index.js，将其更改<h1>Hi people</h1>为<h1>Rob's Backstreet Boys Fanpage</h1>。然后检查你的浏览器。😍

命令行界面显示简洁明了，不会过于冗长。遇到错误时，不会被大量的调试信息淹没：

最后，但同样重要的是，文档质量一流。你很少能看到如此完美的文档！

GraphQL 和 Gatsby

人们经常谈到 Gatsby 对GraphQL 的依赖。这可不是开玩笑。GraphQL 不仅用于远程数据操作，还用于查询本地文件资源。

后一种概念的一个简单例子很容易理解，那就是全局站点标题。与其在网站的每个页面上重新输入Rob's Backstreet Boys Fanpage，不如将其存储在一个文件中，使用 GraphQL 查询，并通过一个Layout.

更新siteMetadata你的节点gatsby-config.js并更改title：

module.exports = {
  siteMetadata: {
    title: `Rob's Backstreet Boys Fanpage`,
    description: `Kick off your next, great Gatsby project with this default starter.`,
    author: `@gatsbyjs`,
  },

注意：更改某些 Gatsby 配置后，您需要重启服务器才能$ gatsby develop看到更新。

在这里layout.js，你会看到一个预先存在的 GraphQL 查询：

const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
`)

……以及元素中相应的属性<Header>：

<Header siteTitle={data.site.siteMetadata.title} />

惊天动地？不，但这只是众多利用 GraphQL 的强大功能来驱动网站的例子中的一个。

盖茨比简述

虽然我对 Gatsby 还不太熟悉，但我相信它有潜力彻底改变网站开发模式。随着移动互联网的普及和性能变得愈发重要，我们需要像 Gatsby 这样的框架来帮助开发者始终走在技术前沿。