使用 Gatsby 和 Sanity 开展新项目

为什么选择 Gatsby 和 Sanity？

我们正在做什么

步骤

就是这样！

为什么选择 Gatsby 和 Sanity？

随着我投入开发的时间越来越多，我越来越频繁地做的一件事就是为别人搭建个人网站。这不仅能让我轻松地练习新的前端技能和技术，还能让我积累作品集来展示自己的能力。然而，最让我头疼的一点是，我需要为这些网站创建一种简单易用的自定义内容管理方式。市面上有很多选择，比如 WordPress，但我最喜欢的工具之一是 Gatsby。

我为什么喜欢盖茨比

Gatsby 是一款超快的静态网站构建器，其文档可以说是我见过的最好的。作为一名开发者，它是一个不可思议的平台。Gatsby 本质上是数据无关的，这意味着你几乎可以使用任何数据类型来提供内容。它可以是 WordPress API、Markdown、RSS 源，非常棒。最近，我选择 Sanity 来轻松管理内容。

我为什么喜欢 Sanity

Sanity 本质上是一个超级流畅的无头 CMS/后端服务。Sanity 的一大亮点在于它内置了 Sanity Studio，这是一款 React 应用，你可以在本地运行，也可以托管在 Netlify 等服务上。它的妙处在于允许你定义自己的数据类型。我能想到的解释 Sanity 工作原理（以及为什么使用它）的最佳方式是将其与 WordPress 等 CMS 进行比较。WordPress 拥有页面和帖子，你可以添加标签和类别，但除此之外，你实际上还需要处理这些类型的数据才能创建网站。这很令人困惑，因为最终用户最终可能需要管理一些无法准确描述其数据的网站数据。例如，如果我的妻子（一位演员）正在使用 WordPress 等平台作为 CMS，并想将她最近参加的演出添加到简历中，她可能会创建一个带有类别的新“帖子”。它可以工作，但使用 Sanity，您可以在架构中创建名为“Show”的自定义数据类型，并自动创建一个可由最终用户编辑的文档类型。再举个例子，我目前正在为一位木工设计网站。他们可能希望在网站上开辟一个区域，为读者列出不同类型的木材及其属性。使用 Sanity，我可以为此创建自己的数据类型。Sanity 的优点在于，您可以灵活地创建自定义数据存储和管理内容的方式（您甚至可以编辑 Sanity Studio 本身，因为它只是一个 React 应用），而无需设置自己的数据库并管理所有这些。对我来说，拥有一个可以为特定客户定制的 CMS 是一件令人欣喜的事情，而不必从头开始开发所有内容。

我们正在做什么

在这篇文章中，我将讲解如何在 Gatsby 中创建一个全新、简洁的项目，并将其连接到 Sanity 作为主要数据源。Sanity 网站上其实提供了一些入门工具，只需点击几下即可使用，但它包含大量预定义的 CSS，以及一堆杂乱的示例文件，而这些文件在启动新项目时我并不想处理。按照这些步骤，您可以掌握 Sanity 和 Gatsby 协同工作的基础知识，并为两者建立一个简洁的设置，以便您可以使用任何您想要的开发内容，例如样式、文件结构等等。开始吧！

步骤

1 - 创建目录

首先，我们要为我们的项目创建一个目录。我这样做是因为 Gatsby 和 Sanity 的 CLI 工具略有不同，而且我更喜欢将它们放在同一个 git 仓库下，所以请直接创建一个名为“任意”的目录，无论你选择哪个。我将我的目录命名为gatsby-sanity-starter。

2 - 创建Sanity Studio

首先，您需要安装 Sanity CLI，因此请使用 npm runnpm install -g @sanity/cli全局安装 CLI 。之后，在根目录中创建一个新目录并将其命名为studio。在 studio 目录中，运行sanity init。第一次执行此操作时，您需要登录，创建一个帐户，当提示您输入项目时，您将选择“创建新项目”，然后在项目模板中选择“清理没有定义 schamas 的项目”。这将在 /studio 目录中创建一个全新的 Sanity Studio 。

3 - 创建 Gatsby 网站

如果还没有，请使用安装 Gatsby CLInpm install -g gatsby-cli。接下来，您将转到根目录并运行gatsby new web，这将在 /web 目录中创建一个新的 Gatsby 项目。

4 - 从 Gatsby 网站删除 git

接下来，我们将从 /web 目录中的 Gatsby 站点移除 git。这可以通过rm -rf .git在 /web 目录中运行来完成。我更喜欢这样做，因为我喜欢为工作室（在 /studio 中）和实际网站（在 /web 中）使用同一个 git 仓库。或者，您也可以git init在 /studio 目录中运行，并为工作室和网站分别使用两个独立的仓库。

5 - 安装 gatsby-source-sanity

如果您是 Gatsby 新手，那么 Gatsby 的基本原理是使用插件来整合各种功能。插件gatsby-source-sanity允许您在 Gatbsy 应用中针对由 Sanity 创建的 GraphQL API 路由运行 GraphQL 查询。只需几个步骤即可安装。

• 从 /web 目录中运行npm i gatsby-source-sanity --save。
• 将插件配置添加到文件 gatsby-config.js

// in your gatsby-config.js
module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: 'abc123',
        dataset: 'blog',
        // a token with read permissions is required
        // if you have a private dataset
        token: process.env.MY_SANITY_TOKEN,
      },
    },
  ],
  // ...
}

• 在插件配置中，您需要将projectId和dataset替换为您的 Sanity 项目 ID 和数据集名称。您可以在/studio/sanity.json文件中找到它们。

6 - 创建您的架构

此时，为了检查 Gatsby 网站与 Sanity 之间的连接是否正常运行，您需要创建某种基本的 Schema。我们新建的 Sanity 网站是完全没有任何 Schema 的，因此无法查看任何内容被拉入 Gatsby 网站。我们将分两步完成此操作。

• 在 schemas 目录中创建文件blogPost.js和sponsor.js *，这样您就有了 */studio/schemas/blogPost.js和/studio/schemas/sponsor.js ，内容如下。

// in blogPost.js
export default {
  name: 'blogPost',
  title: 'Blog post',
  type: 'document',
  fields: [
    // ... other fields ...
    {
      name: 'name',
      title: 'Name',
      type: 'string'
    },
    {
      name: 'sponsor',
      title: 'Sponsor',
      type: 'sponsor'
    }
  ]
}

// in sponsor.js
export default {
  name: 'sponsor',
  title: 'Sponsor',
  type: 'object',
  fields: [
    {
      name: 'name',
      title: 'Name',
      type: 'string'
    },
    {
      name: 'url',
      title: 'URL',
      type: 'url'
    }
  ]
}

• 将 blogPost 和 sponsor 导入schema.js中的类型。

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'

import blogPost from './blogPost';
import sponsor from './sponsor';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    /* Your types here! */
    blogPost,
    sponsor
  ])
})

如果您想了解有关在 Sanity 中创建模式的更多信息，请参阅此处的文档。

7 - 部署 GraphQL API

每次修改架构时，您都必须重新部署架构，以便 GraphQL API 知道哪些内容可供查询。由于我们刚刚添加了 blogPost 类型和 sponsor 类型，因此需要部署 API。我们在 /studio 中使用命令 执行此操作sanity graphql deploy。

8 - 制作示例博客文章

从 /studio 继续运行sanity start，然后您就可以从 localhost:3000 打开 Studio。在这里，您应该会在“内容”下看到“博客文章”，您可以点击它，然后点击 + 按钮来创建您的第一篇博客文章。只需输入一些填充信息，然后进入下一步。

9 - 构建 Gatsby 网站

Gatsby 是一个静态网站构建器，所以我们需要构建网站。从 /web 使用 执行此操作gatsby develop。

网站搭建完成后，你应该能够从localhost:8000看到通用的 Gatsby 启动页面，但如果你访问localhost:8000/__graphql ，则可以看到 graphQL 测试环境。如果一切顺利，左侧应该会出现一些包含 Sanity 的查询，例如allSanityBlogPost。此时，你可以尝试运行下面的查询，返回的数据应该包含你创建的博客文章数据。

query MyQuery {
  allSanityBlogPost {
    totalCount
    edges {
      node {
        _id
        name
      }
    }
  }
}

就是这样！

希望您现在拥有一个干净的 Gatsby 网站，并已连接到 Sanity Studio！从现在起，您可以像平常一样，通过 Sanity 开发新的自定义无头 CMS 来开发 Gatsby 网站。欢迎告诉我进展如何！

动图

您可以从来源处阅读有关 Gatsby 和 Sanity 的更多信息。