本期推荐的是一个基于 React 的免费开源框架，可帮助开发人员构建超快的网站和应用程序。

Gatsby它将动态呈现站点的控制和可扩展性与静态站点生成的速度相结合，创造了一个全新的可能性网络。

Gatsby特性

• 从任何地方加载数据。Gatsby 从任何数据源提取数据，无论是 Markdown 文件、Contentful 或 WordPress 等无头 CMS，还是 REST 或 GraphQL API。使用源插件加载数据，然后使用 Gatsby 的统一 GraphQL 接口进行开发。
• 超越静态网站。不受任何限制地获得静态网站的所有好处。Gatsby 站点是功能齐全的 React 应用程序，因此您可以创建高质量、动态的 Web 应用程序，从博客到电子商务站点再到用户仪表板。
• 选择您的渲染选项。除了静态站点生成 (SSG) 之外，您还可以按页面选择替代呈现选项，即延迟静态生成 (DSG) 和服务器端呈现 (SSR)。这种类型的细粒度控制允许您优化性能和生产力，而不会为了另一个而牺牲一个。
• 性能。默认情况下，通过您的绩效审核。Gatsby 自动执行代码拆分、图像优化、内联关键样式、延迟加载、预取资源等，以确保您的网站速度快——无需手动调整。
• 为每个站点使用现代堆栈。无论数据来自哪里，Gatsby 网站都是使用 React 和 GraphQL 构建的。为您和您的团队构建统一的工作流程，无论数据是否来自同一后端。
• 在 Scale for Pennies 主持。Gatsby 站点不需要服务器，因此您可以将整个站点托管在 CDN 上，而成本仅为服务器渲染站点的一小部分。许多 Gatsby 网站可以完全免费托管在Gatsby Cloud和其他类似服务上。

开始使用 Gatsby

1.安装GatsbyCLI。

npm install -g gatsby-cli

2.从 Gatsby 启动器创建一个 Gatsby 站点。

在一个命令中设置您的 Gatsby 博客：

#使用交互式设置向导创建一个新的 Gatsby 站点
#将其命名为：My Gatsby site 
gatsby new

3.develop以模式启动站点。

接下来，进入新站点的目录并启动它：

cd my-gatsby-site/
gatsby develop

4.打开源代码并开始编辑！

您的网站现在运行在http://localhost:8000. 在您选择的代码编辑器中打开my-gatsby-site目录并编辑src/pages/index.js. 保存您的更改，浏览器将实时更新！

操作指南

本地发展

设置本地环境：启动新项目、使用 Gatsby 的 CLI 和开发服务器、自定义 JavaScript 设置并调试常见错误。

路由

创建独特的和基于模板的页面。创建共享页面布局以包含页眉和页脚等元素。在 JSX、markdown 和 CMS 中编写内容。

样式

在 Gatsby 中使用您喜欢的样式系统：标准 CSS、Sass 等预处理器、Emotion 等 CSS-in-JS 解决方案或 Tailwind 等新兴方法。

图像和媒体

将图像、视频、GIF 和其他媒体拉入您的网站。使用 gatsby-image 优化页面性能和用户体验。

插件和主题

访问 Gatsby 丰富的插入式功能生态系统，从 CMS 集成到图像优化。

采购数据

使用源插件（集成）将内容和数据从它所在的任何地方（CMS、文件系统、电子表格、数据库）提取到 Gatsby 中，并使其可用于您网站的页面和组件。

查询数据

将数据提取到 Gatsby 后，您的页面和组件会指定它们通过 GraphQL 查询访问的数据。

共同特点

从电子商务和搜索到 SEO 和 A/B 测试，添加用户想要的丰富功能和交互以及业务利益相关者需要的控制和优化。

渲染选项

使用呈现选项告诉 Gatsby 何时为您的网站构建特定页面。在静态站点生成、延迟静态生成或服务器端渲染之间进行选择。

插件和主题

Gatsby 拥有丰富的插件生态系统，可通过插件使用，从 CMS 集成到图像优化。主题支持在多个站点之间重复使用页面和部分。

创建通用插件

通用插件的想法是更加强调插件的构成，而不是基于功能选择的特定标签（源、转换器、本地）。正如在什么是插件文档中所见，插件是一种充当附加组件并为 Gatsby 站点提供附加功能的软件。

插件包含一个文件，通常在项目根目录中，称为package.json- 该文件包含与项目相关的各种元数据。该package.json文件还用于向 npm 提供标识项目的信息，并允许 npm 处理项目的依赖项。

要为您的项目初始化 a package.json，请运行以下命令：

npm init

运行命令后，您将看到命令行界面 (CLI) 中列出的一系列选项。您选择的内容存储在您的package.json其中，其中包含Gatsby 在插件中查找的一些文件。

通用插件会发生什么？

在通用插件中，该gatsby-node.js文件允许使用gatsby 节点 API。这些 API，例如createPage、createResolvers和sourceNodes，用于操作 Gatsby 站点中的节点。节点是 Gatsby 中最小的数据单位。您可以使用createNode操作创建节点。

您可以使用这些 API 执行功能，gatsby-node.js例如：

• 加载 API 密钥
• 向 API 发送调用
• 使用 API 响应创建 Gatsby 节点
• 从节点创建单个页面

通用插件示例

sourceNodes是一个生命周期 API，插件可以使用它来创建节点。下面显示了如何实现函数的sourceNodes示例：

exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  const nodeData = {
    title: "Test Node",
    description: "Testing the node ",
  }
  const newNode = {
    ...nodeData,
    id: createNodeId("TestNode-testid"),
    internal: {
      type: "TestNode",
      contentDigest: createContentDigest(nodeData),
    },
  }
  actions.createNode(newNode)
}

上面的代码块创建了一个”Test Node”从title参数中调用的节点。如果此过程成功，重新启动服务器将使allTestNode查询在
http://localhost:8000/___graphql，像axios这样的库可以用来处理gatsby-node.js文件中的调用。

使用 Gatsby 主题

Gatsby 主题可让您将网站分解为逻辑单元。与组件库一样，它们是一种抽象，允许一个团队拥有和发布一个包，该包被拉入一个或多个单独的网站。例如，一个团队可以拥有一个用于多个电子商务网站的产品页面主题。其他团队可能拥有博客主题、主页主题或商店主题，所有这些都作为单独的包。主题允许您的 Gatsby 网站架构与您的团队结构相匹配。

安装主题

与任何 Gatsby 插件一样，Gatsby 主题是 Node.js 包，因此您可以像其他已发布的包一样使用 npm 或yarn 在 Node 中安装它们，包括本地工作空间。

例如，gatsby-theme-blog是用于创建博客的官方 Gatsby 主题。

npm install gatsby-theme-blog

主题选项

根据主题，可能有可以通过配置的主题选项gatsby-config.js。

例如，gatsby-theme-blog可以采取多种不同的选择。所有这些都记录在主题的 README文件中。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-blog`,
      options: {
        /*
        - basePath defaults to `/`
        */
        basePath: `/blog`,
      },
    },
  ],
}

—END—

开源协议：MIT license