Stacy 是一个网站生成器,它将 Contentful CMS 的内容与 Handlebars 模板相结合来创建网站页面。
Stacy 将 Contentful 的条目内容类型与网站项目中的 Handlebars 模板以一对一的关系进行匹配 — 您的Content model中定义的每个条目类型都有一个模板。从 Stacy 的角度来看,条目有两种类型:页面条目和模块条目。页面条目与其模板相结合,会在唯一的 URL 处生成单个网站页面。模块条目可以包含在页面和其他模块中,使用 Contentful 的引用字段来创建可重用的内容片段,或者只是通过将其分解为更小的片段来提供内容和模板结构。
Stacy 与许多现有静态网站生成器的不同之处在于,它支持将网站自动发布到 Amazon Cloud 中的 S3 存储桶,从而可以在互联网上提供服务。 Stacy 在 Amazon Cloud 中部署了特殊的基础设施,可以通过其 Webhooks 功能连接到 Contentful。当您的 Contentful 空间中的内容更新时,Stacy 在 Amazon Cloud 中部署的网站基础设施会收到通知,并仅自动重新生成和重新发布网站中受更新影响的页面。无需手动重新生成网站并重新部署。
使用 Stacy 时,您的网站是一个 NPM 项目,通常在 git 存储库中检查以进行版本控制。该项目包括您的 Handlebars 模板和静态内容(例如 CSS 样式表、网站设计中使用的图像、字体等),而网站内容则位于 Contentful 空间中。在网站项目中,网站开发人员使用 Stacy 命令行工具来开发、发布和重新发布网站。一旦网站在 Amazon Cloud 中发布,内容作者就只能使用 Contentful UI。
有关详细的教程/演练,请参阅使用 Stacy 创建网站。
首先,您需要一个内容丰富的空间来存放您的网站内容。一旦完成,您就可以为您的网站创建一个新项目。
确保您已将 Node.js 版本 10.16.3 或更高版本与 npm 一起安装。如果您要在 Amazon Cloud 中发布网站,您还需要安装 AWS CLI。
首先在全局安装 Stacy:
npm install -g stacy
在您的 Contentful 空间中,转到空间设置→API 密钥,然后在内容交付/预览令牌中添加 API 密钥。注意空间 ID和Content Delivery API 访问令牌值,您将使用它们将 Stacy 环境连接到 Contentful 空间。
现在,您可以为您的网站生成初始项目:
stacy new --cf-space <your space ID> --cf-access-token <your access token> mywebsite
这将在当前目录中创建一个名为“mywebsite”的新项目目录。 “mywebsite”值称为站点 ID 。使用不同的值来标识您的网站。该值应该是 URL 友好的(小写字母、数字和破折号)。
在您的项目目录中,将静态内容放在/static
下(这会按原样复制到您的网站),并将条目模板放在/templates
下。模板文件的名称(不带扩展名)必须与内容内容模型中相应的条目内容类型完全匹配。在/templates
下,模板文件可以组织在子文件夹中。但是,文件名在所有子文件夹中必须是唯一的,因为它们用于唯一地将模板与条目内容类型匹配( /templates
中的子文件夹不起作用)。
注意:通常,模板与条目内容相结合会生成 HTML。如果您需要生成其他类型的内容,可以向模板名称添加扩展名。例如, page.hbs
生成 HTML。要生成纯文本,请使用page.txt.hbs
。这也意味着page.hbs
和page.html.hbs
是相同的。
您现在可以在本地运行您的网站以进行开发:
stacy serve
您可以在http://localhost:8080/
上查看您的网站。在编辑任何模板、静态内容或 Contentful 中的内容后,只需重新加载页面即可。
要停止 Stacy 本地网络服务器,请使用Ctrl+C
。
运行stacy --help
查看其他可用命令。
您可以将项目目录的内容签入 git 存储库,例如 GitHub 或 Bitbucket。
在模板内部,所有输入字段都可以通过内容模型中定义的字段 ID来使用。您可以直接在模板中引用它们。例如:
这将输出条目caption
字段的值。请注意,此处使用的是字段 ID ,而不是字段名称。
Stacy 添加了一些可以在模板中使用的特殊帮助器:
module <reference field>
- 包括引用类型字段引用的模块条目。例如,假设您有一个包含 ID paragraphs
字段,并且它是一个引用列表:
asset <asset field>
- 包括引用的资产,例如图像。例如:
目前,仅支持图像资源,并为其呈现 HTML <img>
标签。
assetSrc <asset field>
- 获取资产的 URL。例如:
assetTitle <asset field>
- 获取资产的标题。例如:
markdown <long text field>
- 渲染 Markdown 长文本字段。例如:
请注意此处需要三重花括号,因为帮助程序生成不需要转义的 HTML。
richText <rich text field>
- 渲染富文本字段。例如:
与markdown
一样,请注意三大括号。
json <field>
- 输出字段的内部内容 JSON 表示形式。例如:
该助手对于诊断问题可能很有用。
如上所述,您在内容空间的内容模型和模板中定义的内容类型之间存在一对一的关系。
注意:严格来说,对于给定的内容类型,您可以有多个模板,以便为同一内容条目生成不同类型的文件。例如,对于内容类型 ID module
您可以使用模板module.html.hbs
和module.xml.hbs
。第一个模板将为条目生成一个 HTML 文件,第二个模板将生成一个 XML 文件。
定义内容类型时,请记下Api 标识符(也称为内容类型 ID )。内容类型的模板文件必须具有相同的名称(加上扩展名)。
页面条目(与模块条目相反)的内容类型有一个要求:页面内容类型必须定义必需的slug字段。当内容条目与相应的模板组合时,该字段中的值将确定生成的文件的名称。例如,如果页面条目的 slug 值为“index”,则生成的页面将为“/index.html”。如果 slug 是“more/terms”,则页面将为“/more/terms.html”。等等。
默认情况下,slug 字段的字段 ID 必须为slug
。可以在项目的stacy.json
文件中覆盖该 ID。除了在内容类型定义中将 slug 字段设置为必需之外,还建议将自定义匹配模式验证器与其关联,以确保字段值的特定格式。验证器的正则表达式可以是^w[w-]*(/w[w-]*)*$
。
当您准备好在 AWS 中部署网站时,首先需要在您的 AWS 账户下设置 Stacy 基础设施。您必须先执行几个步骤才能执行此操作:
创建目标 S3 存储桶。这是您的网站发布和服务的地方(可能通过 CloudFront)。或者,您可以使用已有的存储桶(Stacy 还支持在目标存储桶的子文件夹中发布)。
如果您还没有,请创建一个 S3 存储桶,Stacy 将使用该存储桶来上传发布者 Lambda 函数包。发布者 Lambda 函数是响应 Contentful发布和取消发布事件并更新目标 S3 存储桶中的相关页面和资产的部分。
构建发布者包:
stacy build-publisher
这将在您的项目中的/build/stacy-mywebsite-publisher.zip
下创建发布者 Lambda 函数包。将此文件上传到您的 Lambda 函数 S3 存储桶。
Stacy 的stacy new
命令已为 AWS 环境生成 CloudFormation 模板,并将其保存在项目中的/misc/cfn-template.json
下。如有必要,您可以查看并自定义它。否则,请继续在您的 AWS 账户下为您的网站创建 Stacy 堆栈。
创建 CloudFormation 堆栈后,您需要调整目标 S3 存储桶的策略,以允许 Stacy 发布者在其中发布生成的网站内容。存储桶的策略可以包括如下内容:
{
"Version" : " 2012-10-17 " ,
"Statement" : [
{
"Effect" : " Allow " ,
"Principal" : {
"AWS" : " <Stacy publisher role ARN> "
},
"Action" : [
" s3:PutObject " ,
" s3:DeleteObject "
],
"Resource" : " arn:aws:s3:::<bucket name>/* "
}
]
}
在上述策略中,将 Stacy 发布者角色 ARN 替换为您可以在 CloudFormation 堆栈的PublisherRoleArn
输出参数中找到的值,并将存储桶名称替换为目标网站存储桶名称(应用策略的存储桶)。
现在您必须准备好用于发布的开发环境。打开并编辑网站项目中的.env
文件。在其中,将所有AWS_*
变量设置为正确的值。请注意,您可以在 CloudFormation 堆栈的PublishEventSourceMappingId
输出参数中找到AWS_PUBLISH_EVENT_SOURCE_MAPPING
变量的值。
正确设置.env
文件后,您可以使用以下方式发布您的网站:
stacy publish
最后一个设置步骤是在您的 Contentful 空间中配置一个 Webhook,以便在发布和取消发布事件时调用 Stacy 发布者。在您的 AWS 账户中,在 API Gateway 服务中找到 Stacy 为您创建的 API。 API 的prod
阶段只有一种方法POST /publish
。请注意其调用 URL 。
另外,请转到API 密钥部分并记下为 Stacy 创建的 API 密钥的值。
在您的 Contentful 空间中,转到空间设置→Webhooks并添加 Webhook。将 API Gatwey 的调用 URL 放入 URL 字段中(保留方法POST
)。然后选择“触发器”部分中的“选择特定触发事件”选项。选中条目和资产行中的发布和取消发布复选框(总共选中 4 个复选框)。
在标头部分中单击添加秘密标头。将“X-API-Key”放入“密钥”字段,并在“值”字段中放入来自 API 网关的 API 密钥。
保存此 Webhook 后,在 Contentful 中发布和取消发布条目和资产将触发 AWS 设置中的发布者,一切都已准备就绪!