使用 Netlify、Zapier 和 Gatsby 立即部署您的 CMS 内容

本文最初以Flotiq 深度解析的形式发布。

概述

本文将介绍如何搭建一个功能强大且完全轻松（而且免费！）的 Gatsby 网站部署流程。我们将使用 Netlify 作为部署目标，因此无需任何服务器。

为什么？

Gatsby 是一个静态网站生成器。这意味着，除非您重新构建并重新部署网站，否则您的内容不会更新。如果您经常更新内容，或者负责更新的人员不了解如何重新构建网站，这可能会很快变得很麻烦。

你可以轻松设置 GitHub hooks，以便在代码更改时更新网站，但这对于内容更改不起作用。

去跟文案撰写人员解释一下，他们需要这样做gatsby build，而且npm run deploy每次更新网站内容时都要这样做！

你想要的是一个自动化流程，当内容更新后，该流程就能自动发布网站。

本文将提供分步指南，教您如何：

1. 使用 Gatsby Starter 和 Flotiq 设置数据源
2. 在 Netlify 中设置页面部署
3. 在 Zapier 中设置自动化工作流程

最后，每当您在 Flotiq 中更新页面内容时，Zapier 都会触发 Netlify 中的部署过程，以确保您的网站保持最新状态！

让我们深入探讨一下。

先决条件

1. Netlify 账户（免费）注册 Netlify
2. GitHub/GitLab/Bitbucket 账号（免费）注册 GitHub
3. Zapier 账户（免费）注册 Zapier
4. Flotiq 账户（免费）在这里注册 Flotiq 账户。

来一份我们的盖茨比开胃菜吧！

前往我们的Github代码库，选择一个Gatsby入门项目。我们这里使用流行的Gatsby Recipes入门项目。

gatsby new gatsby-starter-recipes https://github.com/flotiq/gatsby-starter-recipes.git
cd gatsby-starter-recipes

您可以自行创建内容类型，也可以使用我们预定义的内容。

node ./example/importExample.js

这条便捷的命令会将 4 张图片和 2 个食谱添加到您的 Flotiq 帐户。

我们每个 Gatsby 入门模板的 README 文件底部都有一个“部署到 Netlify”按钮：

点击它：

配置您的 Netlify 站点部署

接下来您将看到一个包含三个步骤的配置过程：

1. 正在连接到您的 GitHub 帐户
2. 设置部署所需的参数
3. 部署您的网站

连接您的 GitHub 帐户，然后继续下一步。

在下一个视图中，系统会提示您输入 3 个参数：

• 仓库名称 - Netlify 将在此处为您创建一个新的仓库。
• Flotiq API URL - 输入：https://api.flotiq.com
• 您的 Flotiq 只读 API 密钥。

我们建议您始终创建作用域 API 密钥。其一次性使用的特性使其成为更安全的选择。点击此处了解更多关于 Flotiq API 密钥的信息。

填写完所有字段后，点击按钮Save & Deploy，等待网站构建完成。

就这样！您将被重定向到 Netlify 控制面板。您可以点击此处查看构建日志：

使用 Zapier 管理 Netlify 部署

默认情况下，Netlify 会监听代码仓库中的所有更改，因此任何推送都会触发 Netlify 上的构建。这通常正是您所需要的，因为您可能正在向网站推送一些新功能，并希望它们自动上线。

但您的网站不仅仅是代码仓库里的代码。您也希望您的内容保持最新！我们将向您展示如何使用Zapier，让您每次创建新内容时都能自动更新网站。

1. 登录 Zapier
2. 在您的帐户仪表板上，将鼠标悬停在左侧边栏上，然后单击Make a Zap。

3. 作为触发应用程序，选择Flotiq，并针对事件进行选择New Content Object。

   

4. 接下来，选择您的 Flotiq 帐户并点击Continue。

   

5. 从列表中选择您的内容类型定义。

   

6. 点击继续。您可以跳过测试阶段，直接进行下一步操作。

7. 选择Netlify作为操作应用程序，以及Start deploy作为事件。

   

8. 登录您的 Netlify 帐户并继续操作。

   

9. 请从列表中选择您的网站。或者，您可以选择清除构建缓存，但这会增加构建时间。

   

10. 最后一步，您可以测试此操作是否正常工作。它将重建您的网站。

就是这样

准备就绪！点击。现在您可以在Flotiq 编辑器Turn the Zap On!中创建一个新条目，您的食谱很快就会出现在您的网站上。

实用链接

了解更多关于如何使用 Zapier 和 Flotiq 构建强大集成的信息：

1. 关于 Flotiq 中 Zapier 集成的更多信息

或者试试我们集成到 Flotiq 中的一些超棒的 Gatsby 入门模板：

1. 使用 Gatsby、Flotiq 和 Snipcart 构建电子商务网站
2. 使用 Gatsby 和 Flotiq 构建一个菜谱网站