如果你还没有，请注册一个免费的 Heroku 账户

[rubinaruma]

Raymond Camden 写了一篇关于构建数据库驱动的 Eleventy 站点的优秀文章。在其中，他使用 mysql npm 包直接连接到 MySQL 数据库，以提取静态生成（又称预渲染）的简单博客的帖子。虽然 Ray 专门为 Eleventy 执行此操作，但您可以利用类似的工作流程在其他静态站点生成器（SSG）中从 MySQL 数据库生成内容，例如 Next.js。

这让我开始思考。虽然使用基于 JavaScript 的 SSG 从各种外部 API 或数据库中提取数据的方法相对简单，但对于其他一些传统 SSG（如 Hugo 或 Jekyll）来说却并非如此。我是 Hugo 的忠实粉丝，那么我能为 Hugo 复制这一点吗？或者如果我需要连接的不仅仅是一个数据库怎么办？

事实证明，StepZen刚刚发布了一个Netlify Build 插件，它将在您的 Netlify 站点上部署一个 GraphQL API 到 StepZen。由于我的 StepZen GraphQL API 可以从 MySQL 数据库中提取数据，因此我可以提取该数据并填充我的站点。

在这篇文章中，我们将探讨如何使用 StepZen 作为后端、使用 越南电报号码数据库 Hugo 作为 SSG 重新创建 Ray 的数据驱动 Jamstack 网站。这种方法的主要优点之一是它不仅适用于 MySQL，还适用于任何数量的源，包括 REST API 和 Postgres 数据库，无论您使用什么 SSG。我们甚至可以将来自任何或所有这些源的数据组合成一个 API 并用它来填充我们的网站，而不是依赖单个 npm MySQL 连接器。

本教程的完整代码可在 GitHub 上找到。

开始设置
我们需要设置两个部分。第一个是 MySQL 中的数据后端，然后是使用 Hugo 的 Web 前端。

创建 MySQL 数据库
我们首先需要的是 MySQL 数据库。我选择通过 Heroku 设置我的数据库，它使用 Cleardb MySQL，因为它对我来说是免费的，但还有许多其他选项可供选择。如果您想复制我的设置，请按照以下步骤操作：

单击新建 > 创建新应用程序并命名。
在新应用中，转到“资源”选项卡，在“附加组件”下，键入“cleardb mysql”以查找并选择 ClearDB MySQL 附加组件。Ignite - Free 计划就足够了（注意：虽然该计划是免费的，但您可能需要先向您的帐户添加信用卡，然后才能添加它）。单击“配置”。
要获取连接详细信息，请转到 Heroku 仪表板，然后转到应用程序上的“设置”选项卡，在“配置变量”部分中单击“显示配置变量”。单击编辑铅笔，您将看到打开一个新窗格。您将看到如下值（末尾可能有一个附加值，您必须在上面将其删除）。