Loving Tina? us on GitHub0.0k
在Gatsby Cloud上使用TinaCMS
January 3, 2020
By James O'Halloran

我们最近写过关于TinaCMS如何在云端工作。Gatsby Cloud为编辑者提供了一种无需运行本地开发环境即可编辑TinaCMS网站的绝佳方式。

由于Gatsby Cloud是专门为Gatsby网站从头开始构建的,它利用了构建工件缓存任务并行化来加快速度 ⚡

那么,让我们开始吧!🕺

在Gatsby Cloud上部署预览 🚀

在Gatsby Cloud上部署预览只需点击几下即可完成。一旦我们创建了一个账户,我们可以连接网站的存储库并输入一些构建信息(网站的根目录和环境变量)。

然后,哒哒!✨ 我们网站的预览应该上线了!我们对存储库所做的任何提交都会自动触发Gatsby预览的重建。

注意:此预览将作为我们的“云编辑环境”而不是我们的生产网站。您的生产网站应单独构建和部署。

现在我们的预览已上线,我们需要进行一些额外的配置,以便Tina在云端顺利运行。

使云环境私有化 🔒

我们不希望任何陌生人从我们的云编辑环境进行提交,因此我们首先要做的事情之一就是将此环境设为私有。这可以在Gatsby Cloud的站点设置访问控制部分中切换。

配置Git以进行云提交 ✔️

如果您正在使用gatsby-tinacms-git插件,请确保使用版本:0.2.16-canary.0或更高版本!

要设置canary,请运行yarn add gatsby-tinacms-git@canary,直到此版本达到完整发布。

要在Gatsby Cloud中让Tina工作,我们需要在Gatsby Cloud站点设置中配置一些环境变量:

GIT_AUTHOR_EMAIL GIT_AUTHOR_NAME TINA_CEE SSH_KEY

GIT_AUTHOR_NAME & GIT_AUTHOR_EMAIL 🗣️

这些值将定义在提交时显示在作者字段中的人。

tinacms-add-new-file-gif

如果您希望作者基于登录用户而不是环境中的静态值,您可能需要查看Tina Teams!

TINA_CEE

需要设置此项以确保Tina知道它正在云编辑环境中运行。将其设置为true

SSH_KEY 🔑

SSH_KEY是一个私钥,允许从我们的云编辑环境对您的Git存储库进行写访问。

让我们从使用以下命令创建一个新的密钥对开始。(记下您的密钥路径/名称,并在提示输入密码时留空)

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

这应该已经创建了一个私钥和一个公钥。我们需要将公钥添加到您的Git提供商(GitHub、GitLab、Bitbucket等)中的网站存储库。在GitHub中,这可以在“设置”>“部署密钥”中完成。确保启用写访问。

我们可以通过在终端中运行以下命令来记录我们的公钥:

$ cat ~/.ssh/your_key_name.pub

现在让我们将私钥添加到Gatsby Cloud。

私钥需要Base64编码并作为环境变量添加到Gatsby Cloud。

我们可以通过在终端中运行以下命令来编码和记录我们的私钥

$ cat ~/.ssh/your_key_name | base64

让我们在Gatsby Cloud中将其添加为环境变量:

SSH_KEY: [上面记录的值]

最后,我们需要将其添加到gatsby-config.js中的gatsby-tinacms-git配置中:

plugins: [
{
resolve: "gatsby-plugin-tinacms",
options: {
plugins: [
...
{
resolve: "gatsby-tinacms-git",
options: {
...
sshKey: process.env.SSH_KEY
},
},
],
},
}
...
]

现在,在您触发重建后,它应该能够提交到您的存储库!

请注意,Base64编码密钥并不意味着它可以公开!不要将此值提交到您的存储库。 我们仅对密钥进行Base64编码以避免在将其用作环境变量时出现格式问题。

网站配置 🔨

当我们准备让编辑者在云编辑环境中编辑Tina网站时,我们需要特别小心以防止运行时错误。 如果数组为空或图像未定义,网站是否会崩溃?我们需要考虑这些编辑者在编辑时可能遇到的边缘情况。

愉快的云编辑!☁️

希望这能帮助您开始在云端使用Tina编辑您的Gatsby网站。

我们将继续详细介绍如何在几个不同的服务上托管云编辑环境。您也可以注册我们的Tina Teams Alpha以尝试一些扩展的团队功能!

如果您遇到问题或有任何疑问,请前往Tina论坛寻求帮助。对TinaCMS感到兴奋吗?请在GitHub上给我们⭐️,或在Tweet我们 🐦 展示您的Tina项目。