如何将多个故事书部署到一个repo的github页面网站上，并在多框架作曲故事中显示它们
tl; dr
添加带有url指向儿童故事书子目录的refs这样的refs：
refs: {
preact: {
title: 'preact',
url: '<GitHub-Pages-Root>/preact',
},
}
将儿童故事书放入您的主要故事书的子目录中：
- ð故事书静态
- ðpreact
github页面上的故事书：
https://storydocker.github.io/storydocker-examples/astro-framework-multiple
先决条件知识
本文中的源代码
基于Running a local multi-framework composition Storybook的代码构建，但我们将为github页面路径添加故事书构图参考。
此pull request into StoryDocker examples显示了将多框架作曲故事书部署到github页面所需的更改。
将您组成的故事书部署到单个GitHub页面网站的步骤
步骤1：为GitHub页面添加REFS到您的主要组成的故事书
在生成静态站点之前，我们需要设置主故事书配置，以便知道如何在部署到GH页面时找到孩子故事书。
我们有四本儿童故事书：preact，react，svelte和vue。我们将将它们的静态站点生成主要组成故事书的storybook-static目录的子目录。
通用示例
如果您的主要故事书在这里：
https://YOUR-GITHUB-ORG.github.io/YOUR-REPO/(root of main Storybook)
然后，儿童故事书将在这里：
https://YOUR-GITHUB-ORG.github.io/YOUR-REPO/Child-Storybook-Name/
表示.storybook/main.js中的ref将是：
refs: {
"Child-Storybook-Name": {
title: 'Child-Storybook-Name',
url: '/YOUR-REPO/Child-Storybook-Name/',
},
}
StoryDocker-示例示例
本文使用Storydocker-escamples的astro-framework-multiple示例，使Root Storybook
https://storydocker.github.io/storydocker-examples/astro-framework-multiple/
和孩子的预告症故事书：
https://storydocker.github.io/storydocker-examples/astro-framework-multiple/preact/
和.storybook/main.js中的ref将是：
refs: {
preact: {
title: 'preact',
url: '/storydocker-examples/astro-framework-multiple/preact/',
},
}
步骤2：生成主要的故事书
使用storybook build我们首先生成主故事书，该故事书使用默认的storybook-static目录。
npm run build-storybook
创建：
- ð故事书静态
- ðsb-addons
- ð...故事书生成的另一个 -
- ðxrame.html
- ð...故事书生成的另一个文件...
步骤3：生成儿童故事书
注意：您必须生成父母故事书 first ，因此可以将儿童故事书生成父母的storybook-static目录。
我们需要使用标志来告诉故事书CLI从我们的儿童故事书的配置子目录中生成。
此命令：
npm run build-storybook -- --config-dir .framework-storybooks/.storybook-preact -o storybook-static/preact
说使用build-storybook NPM脚本来生成来自.framework-storybooks/.storybook-preact中的配置的故事书并将其输出到storybook-static/preact目录。
立即生成整个集合看起来像这样：
npx concurrently "npm run build-storybook -- --config-dir .framework-storybooks/.storybook-preact -o storybook-static/preact" \
"npm run build-storybook -- --config-dir .framework-storybooks/.storybook-react -o storybook-static/react" \
"npm run build-storybook -- --config-dir .framework-storybooks/.storybook-svelte -o storybook-static/svelte" \
"npm run build-storybook -- --config-dir .framework-storybooks/.storybook-vue -o storybook-static/vue"
生成：
- ð故事书静态
- （以前生成的主要故事书文件）
- ðpreact
- deact
- s svelte
- eðvue
步骤4：部署到GitHub页面
这是一个偏爱问题，但是我使用github动作部署到github页面。您是否在此上，只需确保您部署storybook-static目录的内容，而不是目录本身。
步骤5：利润
您做得很好 - 要求加薪！
github页面上的故事书：
https://storydocker.github.io/storydocker-examples/astro-framework-multiple