JAM 代表 JavaScript、API 和标记。换句话说，虽然请求/响应周期中站点或应用程序的动态部分由客户端中的 JavaScript 处理，但所有服务器端进程都使用 JavaScript 通过 HTTPS 访问的 API 进行，并且模板化标记预先构建在部署时间，通常使用静态站点生成器。那就是果酱堆。它性能卓越，扩展成本低廉，并提供更好的安全性和流畅的开发人员体验。

为什么使用静态站点

静态站点模型并不适合所有类型的项目，但是当它适合时，它具有许多优点。这里有几个。

速度

首次发出请求时，网站在浏览器中加载所需的时间是用户体验的一个重要因素。用户很快就会变得不耐烦，而且连接速度慢时情况只会变得更糟。缺少数据库调用和预先生成的内容使静态站点真正快速加载。

静态站点由静态文件组成，可以使用内容交付网络 (CDN) 在世界各地轻松提供服务。这使得利用更接近发出请求的数据中心成为可能。

简化托管

可以快速设置静态站点的托管。因为没有要支持的数据库或服务器端代码、特殊语言或框架，所以托管所要做的就是提供静态文件。

更好的安全性

没有服务器端代码或数据库，黑客就无法破解任何东西。使用安全修复程序和补丁使服务器保持最新状态没有任何麻烦。当涉及到您网站的安全性时，所有这些都意味着您可以更加安心。

更好的开发者体验

使用 Netlify 或 Vercel 等托管公司设置静态网站非常简单，并且通过持续部署，您只需将更改推送到您选择的代码存储库，它们就会立即反映在实时版本中。

什么是盖茨比？

Gatsby 是当今最流行的网站构建工具之一。它不仅仅是一个静态站点生成器。事实上，它是一个“用于创建网站和应用程序的基于 React 的开源框架”。由于 Gatsby 构建在React之上，所有 React 的优点都触手可及，这使您能够利用这个强大的库将交互式组件直接构建到您的静态网站中。Gatsby 也是使用GraphQL 构建的，因此您可以查询数据并将其以任何您想要的方式显示在您的网站上。

安装 Gatsby 并创建你的项目

Gatsby 使用webpack组合在一起，但您无需担心复杂的设置操作；Gatsby CLI 将为您处理一切。

对于本教程，我假设您在本地安装了 Node.js。如果不是这种情况，请转到 Node 主页并为您的系统下载正确的二进制文件。或者，您可以考虑使用版本管理器来安装 Node.js。我们在这里有一个使用版本管理器的教程。

Node 与 npm 捆绑在一起，这是 Node 包管理器，我们将使用它来安装我们将使用的一些库。您可以在此处了解有关使用 npm 的更多信息。

您可以通过从命令行发出以下命令来检查两者是否已正确安装：

node -v
> 12.18.4

npm -v
> 6.14.8

您需要做的第一件事是安装 Gatsby CLI。这是一个npm包，可让您在几秒钟内创建一个 Gatsby 站点。在您的终端中，编写：

npm install -g gatsby-cli

在您的机器上安装 Gasby CLI 后，您可以继续创建您的网站。我将其称为sitepoint-demo，但您可以随意称呼它。在您的终端中，键入：

gatsby new sitepoint-demo

一旦 Gatsby CLI 安装了所有必要的文件并进行了适当的配置，您将拥有一个功能齐全的 Gatsby 网站，供您自定义和构建。要访问它，请移至sitepoint-demo文件夹：

cd sitepoint-demo

并启动本地服务器：

gatsby develop

最后，在http://localhost:8000上打开一个窗口，您会发现闪亮的 Gatsby 网站看起来像这样：

为了快速启动并运行一个网站，Gatsby 利用了几个官方的入门样板以及围绕它的强大社区提供的入门。您刚刚创建的站点使用Gatsby 默认启动器，但您可以在Gatsby 网站上找到更多内容。

如果您想使用与默认启动器不同的启动器，则需要按照以下模式在命令行中指定其 URL：

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GitHub_REPO]

例如，假设您希望网站具有 Material Design 的外观和感觉。创建它的最快方法是通过在终端中键入以下命令来使用 Gatsby Material Starter：

gatsby new sitepoint-demo https://github.com/Vagr9K/gatsby-material-starter

伟大的！现在让我们看一下您全新的 Gatsby 项目中的文件。

参观盖茨比网站

一个好的起点是/src/目录。这就是你会发现的。

pages目录

该/src/pages/目录包含您网站的页面。每个页面都是一个 React 组件。例如，您网站的主页代码位于/pages/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>
  <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)

export default IndexPage

这是 React 组件的典型代码。

组件允许您将 UI 拆分为独立的、可重用的部分，并单独考虑每个部分。… 从概念上讲，组件就像 JavaScript 函数。它们接受任意输入（称为“道具”）并返回描述应该出现在屏幕上的 React 元素。—反应文档。

components目录

该/src/components/目录是您找到网站通用组件的地方。默认启动器带有以下组件：标题 ( header.js)、图像 ( image.js)、布局 ( layout.js) 和 SEO ( seo.js)。您可以自由定制这些组件并将您自己的组件添加到同一目录中。

现在您已准备好开始对新站点进行更改并根据您的喜好对其进行自定义。

如何更改您的 Gatsby 网站

让我们来修改主页上显示的消息。在您的代码编辑器中打开并将标记pages/index.js下方的两段替换为以下<h1>段落：

<p>Welcome to my SitePoint Demo Site!</p>

当然，您可以在<p>标签之间添加任何您想要的文本。

一旦你点击Save，由于 Gatsby 的热重载开发环境，你的更改就会显示在浏览器中。这意味着当您开发 Gatsby 站点时，页面会在后台被监视，因此当您保存工作时，更改将立即可见，而无需刷新页面或重新启动浏览器。

Gatsby 使添加新页面变得容易。例如，让我们通过about.js在/pages/目录中创建一个新文件来添加一个 About 页面，然后输入以下内容：

import React from "react"

const AboutPage = () => <h1>About Me</h1>

export default AboutPage

上面的代码是一个显示一些文本的React 功能组件。

保存您的工作并导航到http://localhost:8000/about，您应该会在屏幕上看到 About Me<h1>标题。

您可以使用Gatsby Link 组件从主页快速链接到新的 About 页面。要查看它是如何工作的，请在代码编辑器中打开并在结束标记index.js之前找到这段代码：</Layout>

<Link to="/page-2/">Go to page 2</Link>

接下来，用Aboutto替换属性的值/about/和Go to page 2文本：

<Link to="/about/">About</Link>

保存您的工作，您应该会在屏幕上看到您的新链接。单击“关于”链接，您将立即进入“关于”页面。

Gatsby 将Link 组件用于内部链接。对于外部链接，您应该使用良好的旧<a>标签，就像在普通的普通 HTML 网站上一样。

现在，让我们通过更改一些样式来试验 Gatsby 网站的外观。

设计你的 Gatsby 网站

Gatsby 提供了许多将样式规则应用于您的网站的选项。

全局样式表

一个熟悉的选择是使用.css包含适用于整个网站的规则的全局文件。首先，在/styles/目录中添加一个/src/目录并向其中添加一个global.css文件：/src/styles/global.css. 您可以为目录和样式表文件自由选择任何您喜欢的名称。在内部global.CSS，添加以下 CSS 声明，该声明将应用于整个网站：

body {
  background-color: yellow;
}

现在，保存您的工作。哎呀，什么都没发生！反正还没有。要使其正常工作，您需要采取额外的步骤。在您的代码编辑器中打开gatsby-browser.js并导入您刚刚创建的样式表：

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

回到你的浏览器，你应该会看到你网站的背景颜色变成了亮黄色。作为颜色选择并不理想，但它有效！

具有共享布局组件的全局样式

尽管添加全局样式表并将其导入到gatsby-browser.js工作中很好，但推荐的向 Gatsby 网站添加全局样式的方法是使用共享布局组件。Gatsby Default Starter 随此组件及其相关样式表开箱即用。

为了看看它是如何工作的，让我们从gatsby-browser.js文件中删除上面的 import 语句并保存。您应该会看到您网站的背景恢复为白色。然后，打开layout.js并layout.css在您的代码编辑器中（您将在components/目录中找到这两个文件）。

在 的顶部layout.js，请注意 import 语句，它使包含的 CSS 规则layout.css可用于共享布局组件，因此可用于整个网站：

import "./layout.css"

在layout.css中，找到 body 元素的 CSS 声明。它应该在第 8 行附近。它看起来像这样：

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: hsla(0, 0%, 0%, 0.8);
  font-family: georgia, serif;
  font-weight: normal;
  word-wrap: break-word;
  font-kerning: normal;
  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
  font-feature-settings: "kern", "liga", "clig", "calt";
}

现在为背景颜色添加一个规则，如下所示：

background-color: yellow;

保存您的工作，您应该会看到您网站的背景颜色再次变为黄色。

组件范围的样式：CSS 模块

CSS 模块是一个CSS 文件，默认情况下，所有类名和动画名都在本地范围内。

使用 CSS 模块，您的样式仅应用于特定组件，这有助于保持组件自包含，因此易于维护和重用。

CSS Modules 与 Gatsby 捆绑在一起，开箱即用，文档推荐这种向 Gatsby 组件和 React 组件添加样式的方式。

按照以下步骤将花哨的段落组件添加到“关于”页面。

创建花式段落组件

在/components/Gatsby Default Starter-based 项目的目录中，创建一个文件并将其命名为fancy-paragraph.js.

在代码编辑器中打开fancy-paragraph.js并输入以下代码：

import React from "react"
import fancyParagraphStyles from "./fancy-paragraph.module.css"

const FancyParagraph = (props) => <p className={fancyParagraphStyles.fancy}>{props.paragraphText}</p>

export default FancyParagraph

这是一个简单的 React 函数式组件——除了导入我们尚未创建的花式段落 CSS 模块的语句之外没有什么新东西。

该组件使用包含在 fancy-paragraph 模块中的样式作为className属性内的值。正如你所看到的，这个值看起来很像一个普通的 JavaScript 对象，它使用.fancy类的名称作为fancyParagraphStyles对象的属性。您将在 CSS 模块中编写此类的样式。

创建花式段落 CSS 模块

在里面/components/，创建另一个文件并调用它fancy-paragraph.module.css。打开此文件并按照您喜欢.fancy的方式为课程设置样式。它只是普通的 CSS。这是我的样子：

.fancy {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.5rem;
  color: #fff;
  background-color: rebeccapurple;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

现在，您已准备好在FancyParagraphGatsby 站点上的任何地方使用您的组件和您喜欢的样式。

让我们在“关于”页面中添加一个花哨的段落。

将花式段落组件添加到关于页面

首先将这两个导入语句添加到您的 About 页面，就在已经存在的 React 导入下方：

import Layout from "../components/layout"
import FancyParagraph from "../components/fancy-paragraph"

上面的代码片段使您将在 About 页面中使用的 Gatsby Layout 组件和您刚刚创建的 Fancy Paragraph 组件可用于您的 About 页面。

接下来，将您的AboutPage功能组件修改为如下所示：

const AboutPage = () => (
<Layout>
 <h1>About Me</h1>
 <FancyParagraph paragraphText="Styled with CSS Modules." />
</Layout>
)

您的新组件就像任何其他 React 组件一样工作。只需将它拍在页面上，在您希望它出现的确切位置，您就完成了。这个特定的组件利用 React 道具使段落文本更加动态。

保存您的工作并导航到“关于”页面，您应该会在其中看到您喜欢的段落的所有荣耀。我的看起来像这样：

任务完成！

组件范围的样式：内联样式

JS 对象形式的内联 CSS 样式是您可以使用的附加样式选项。

您的 Gatsby Default Starter-based 项目展示了这种技术的实际应用。例如，index.js在您的编辑器中打开并在IndexPage组件中找到此代码：

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

注意 CSS 样式是如何应用于<div>包含Image组件的：样式采用 JS 对象的形式，其中 CSS 属性名称是键，CSS 值是它们对应的值。

另外，请注意复合 CSS 属性名称如何删除破折号 (-) 符号并改用 camelCase 约定——例如，marginBottom而不是 CSS margin-bottom。

将内容添加到您的 Gatsby 网站

使用 Gatsby 进行构建具有额外的好处，即能够从几乎任何地方获取数据。因此，您不仅限于构建通常依赖 Markdown 的静态网站，而且您的团队可以使用他们选择的后端轻松管理内容。

大量的专用插件使 Gatsby 能够从多个来源（例如文件系统、API、WordPress 等）提取数据，并将数据组合到一个数据层中，然后将其提供给您的网站。

对于简单的网站，也可以绕过 Gatsby 的数据层并在不使用 GraphQL 或任何源插件的情况下填充您的网站。这种方法也称为非结构化数据方法，允许您获取数据并在APIcreatePage内的操作中使用它。createPages尽管从 API 获取数据对 JavaScript 开发人员来说已经足够熟悉，因此可能比使用 GraphQL 更具吸引力，但缺点是取消 Gatsby 数据层也意味着取消它提供的许多好处——例如性能，开发期间的热重载，快速图像优化等等。

如果您想了解有关非结构化数据方法的更多信息，请查看此 GitHub存储库。

在 Gatsby 页面中手动输入 GraphQL 查询

如果您有一两页内容很少且几乎没有变化的页面，您甚至可以将文本直接硬编码到 Gatsby 页面中，就像我们在上面的演示中所做的那样。

如果您需要提取网站标题和描述等简单数据，您可以直接在页面中输入 GraphQL 查询。为此，熟悉GraphiQL 会有所帮助，这是一个 GraphQL IDE（集成开发环境），用于创建可以在http://localhost:8000/___graphql上访问的 GraphQL 查询。

假设您想在页面上显示您的网站标题。首先，确保标题已经在里面gatsby-config.js。我的看起来像这样；您可以输入您喜欢的任何标题或保留默认标题：

module.exports = {
  siteMetadata: {
    title: `SitePoint Demo Gatsby Site`,
    ...
  },
  ...

接下来，在 GraphiQL 的帮助下构建 GraphQL 查询。最后，对起始页的第 2 页 ( src/pages/page-2.js) 进行以下更改，现在应该如下所示：

const SecondPage = ({data}) => (
  <Layout>
    <SEO title="Page two" />
    <h1>Welcome to {data.site.siteMetadata.title}</h1>
    <p>I have used a GraphQL query</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export const query = graphql`
  query testQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`
export default SecondPage

请注意，我们正在data向组件传递一个 prop，其中包含 GraphQL 查询的结果。

重新启动服务器，然后您将能够看到第 2 页上显示的站点标题 ( http://localhost:8000/page-2/ )。

但是，这种方法只有在管理内容的人熟悉编码时才有意义。此外，如果有一天您决定更改文本，您将不得不去搜索项目目录中的页面并手动替换内容。

您可以在Gatsby 文档中阅读有关此方法的所有详细信息。

从文件系统中提取数据

您可以使用gatsby-source-filesystem插件将数据从本地文件系统导入 Gatsby 应用程序。这种方法对于使用过 Jekyll 或 Hugo 等静态站点生成器的人来说可能很熟悉。

Gatsby 默认启动器已经安装了这个插件，你可以通过gatsby-config.js在代码编辑器中打开来轻松验证：

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    }, ...

获取数据后，您将需要一个转换器插件来帮助您将文件节点转换为您可以在您的站点中使用的各种数据类型——例如，gatsby-transformer-JSON用于 JSON 数据、gatsby-transformer-remarkMarkdown 文件等。

在 Gatsby 文档的这一部分中找到所有详细信息。

如果您选择Markdown 文件作为Gatsby 站点的数据源，您可以选择使用gatsby-plugin-mdxGatsby 插件将 JSX 可重用组件嵌入到文本中，该插件可为您的站点添加MDX支持。以下是好处：

这在内容驱动的站点中很有用，您希望能够引入图表或警报等组件而无需配置插件。它强调组合而不是配置，并在交互式博客文章、文档设计系统或具有沉浸式或动态交互的长篇文章中真正闪耀。—盖茨比文档。

无头 CMS

CMS代表内容管理系统。传统的 CMS 提供后端和前端功能。无头或解耦的 CMS 仅将自身限制在后端，从而将所有前端问题留给开发人员的偏好。这种安排非常适合像 Gatsby 这样的站点生成器，因为它允许内容团队成员仍然使用他们最喜欢的管理界面，而开发人员可以充分利用使用 Gatsby、React 和 GraphQL 的好处。

WordPress、Drupal、Contentful、Sanity 等流行的 CMS 平台提供无头支持，Gatsby 生态系统提供适当的插件和指南来帮助您进行集成。

查看Gatsby 文档中的这篇文章，了解有关从您选择的 CMS 中提取数据的更多信息。

部署你的 Gatsby 站点

有些公司可以让托管静态网站变得超级快捷方便。其中最受欢迎的是：

• 网络化
• 亚马逊 S3
• GitHub 页面
• Firebase 托管

将 Gatsby 网站部署到 Netlify

让我们使用 Netlify 启动您全新的 Gatsby 网站。Netlify 提供“一个结合了全球部署、持续集成和自动 HTTPS 的一体化工作流程”。

它非常适合托管静态网站。

首先，您需要创建 Gatsby 项目的生产版本。为此，请在终端中输入以下命令：

gatsby build

现在您有一个名为的文件夹public，其中包含您的网站需要在浏览器中运行的所有静态文件。

下一步是将您的 Gatsby 项目放入 GitHub 等存储库中。Netlify 支持 GitHub、GitLab 或 Bitbucket：每次您将更改推送到代码时，Netlify 都会使用您选择的工具运行构建并将结果部署到其快速加载的 CDN。

要开始，只需登录 Netlify，从 Git 中选择 New site，选择您的存储库，输入您的构建命令和公用文件夹的名称，然后单击Deploy site。

您可以在 Gatsby 文档网站上的这篇文章中详细查看部署过程。

恭喜，你的 Gatsby 网站上线了！

更多关于构建过程

在部署之前运行 build 命令会创建一个由 Gatsby 提供支持的网站的生产版本，其中包含高性能和出色用户体验所需的所有优化。Gatsby 在此过程中创建的静态 HTML 页面反过来又被重新水化为 React 应用程序。这意味着，当 Gatsby 页面运行到 Web 浏览器时，会下载 JavaScript 代码，从而启用 DOM 操作等。换句话说，您的网站将成为一个成熟的 React 应用程序。