StoryBlok是最受欢迎的新内容管理系统之一。它的视觉编辑和基于组件的工作流程对于编辑器是直观的，同时也很容易与开发人员合作。

虽然其与Astro框架的koude0整合起初似乎相当简单，但从Storyblok的视觉编辑器和Astro的静态站点一代中获得最大的收益并不那么简单。

问题

由于Astro（默认情况下）是一个静态站点生成器，它在构建时间生成所有页面，因此在Storyblok中编辑内容不会为您的编辑提供他们可能期望的即时反馈：即使您的Storyblok Webhook可以正确设置，在出现更新的内容之前，可以需要几分钟才能重建整个项目。这使得非常尴尬且不直觉的编辑体验。

解决此问题的一种方法是在SSR模式下使用Astro。这使用nodejs服务器或无服务器功能在要求时渲染页面，而不是在构建时间。这意味着页面将在编辑更改其内容后立即更新。不幸的是，这也意味着您将失去静态站点的所有好处，例如页面加载时间明显更快，运营成本更低。

解决方案

为了获得两全其美的最好，我们要设置两个单独的部署：一种使用Astro的默认SSG模式供您访问您的用户，而一个SSR环境则用作StoryBlok中的预览网站。这样，编辑器在编辑内容时会获得即时反馈，但是用户仍然会获得一个快速，静态的网站。

假设您遵循storyblok-astro Getting Started guide，这是启用此双重环境的分步指南：

1.安装您选择的Astro SSR适配器

Astro支持几个用于服务器端渲染的平台。对于本指南，我将使用Vercel的无服务器功能。请参考其他平台。

npx astro add vercel

2.有条件启用SSR模式

这是魔术发生的地方：基于环境变量，我们在Astro的server或static模式之间切换。我之所以选择调用变量PUBLIC_ENV，是因为Astro使以客户端代码可用的PUBLIC_前缀为前缀，这可能很有用。我们还有条件地加载了SSR适配器，因为它在静态模式下不需要。

// astro.config.{mjs,ts}

import vercel from '@astrojs/vercel/serverless';
// ...

export default defineConfig({
  // ...
  output: process.env.PUBLIC_ENV === 'preview' ? 'server' : 'static',
  adapter: process.env.PUBLIC_ENV === 'preview' ? vercel() : undefined,
  // ...
});

3.有条件地启用Storyblok桥

StoryBlok Bridge负责在StoryBlok内容发生更改以及使单个组件在StoryBlok编辑中可单击时重新加载页面。由于我们永远不会在StoryBlok开设生产静态网站，因此我们可以通过禁用生产桥梁来稍微降低捆绑包的大小。

// astro.config.{mjs,ts}

export default defineConfig({
  // ...
  integrations: [
    storyblok({
      bridge: process.env.PUBLIC_ENV !== 'production',
      // ...
    }),
    // ...
  ],
  // ...
});

4.创建单独的构建脚本

为了构建两个不同的部署，我们将创建两个将PUBLIC_ENV变量设置为相应值的构建脚本。为了完整，我们还将在使用Dev Server时将变量设置为development。

// package.json

"scripts": {
  "dev": "PUBLIC_ENV=development astro dev",
  "build:production": "PUBLIC_ENV=production astro build",
  "build:preview": "PUBLIC_ENV=preview astro build",
  // ...
},
// ...

5.部署两个站点

接下来，我们将创建两个使用不同构建脚本的独立部署。就我而言，我将创建两个Vercel项目，两者都连接到项目的github repo，并在 settings> eneral> eneral> build＆development＆开发设置下设置 build command for npm run build:production SSR预览网站的静态生产站点和npm run build:preview。您应该能够为Netlify，CloudFlare或类似的提供商做同样的事情。

6.使用Webhooks触发生产部署

现在，剩下要做的就是在Storyblok和您的托管提供商之间设置Webhooks，以便在发布内容时重建生产网站。

首先，在生产站点的管理接口中创建一个网络钩。对于Vercel，我在设置> git>部署钩子。

然后，复制您刚创建的Webhook的URL，并将其粘贴到Storyblok下 settings> webhooks> webhooks>出版和未出版的故事。现在，每当您的编辑发布或删除内容时，都应重建生产网站！

结论

这种设置使Astro与StoryBlok的集成得非常好，现在它是我在市场上最喜欢的Framework-CMS配对之一。 Astro静态网站的出色表演和开发人员体验与直观的故事Blok视觉编辑器配对很棒！

我希望，如果您使用这两种技术建立一个网站，则本指南会有所帮助。让我知道您是否有任何改进的疑问或想法！

额外

我想分享有关Astro + Storyblok的额外技巧和技巧，但是由于本指南已经持续很长时间，所以我决定将它们放在单独的伴侣帖子中，您可以在这里找到：Astro + Storyblok: SSR Tips and Tricks。我在那里解释了如何防止草稿出现在您的生产站点中，禁用预览网站的搜索引擎索引等等。