Github Actions构建Storybook输出异常：应存docs目录却到根目录

你的问题核心是构建产物的输出目录与部署配置不匹配，导致最终产物没有落到预期的docs目录：

1. build-storybook 默认输出目录是 storybook-static，但你部署步骤指定的源目录是 docs-build，两者不匹配，部署时无法找到正确的构建产物，进而误部署了根目录内容。
2. 未显式指定构建输出路径，导致产物生成在默认目录，和你的部署配置脱节。

修复步骤 #

1. 修改构建命令，指定输出目录 #

在 Install and Build 步骤中，给 build-storybook 添加 --output-dir docs-build 参数，让构建产物输出到部署配置指定的源目录：

- name: Install and Build 🔧
  run: |
    yarn
    yarn build-storybook --output-dir docs-build

2. 同步 Storybook 配置（可选） #

如果项目中有 .storybook/main.js 配置文件，可在里面显式设置输出目录，确保和命令行参数一致：

module.exports = {
  // 其他配置项...
  outputDir: 'docs-build'
};

3. 确认部署配置有效性 #

部署步骤的 TARGET_FOLDER: docs 配置正确，它会将 docs-build 中的内容同步到 main 分支的 docs 目录下。若仍有问题，可检查：

• 构建完成后docs-build目录是否存在，且包含完整的 Storybook 静态文件
• GITHUB_TOKEN 是否拥有修改 main 分支的权限

修改后的完整工作流配置 #

name: Storybook
on:
  push:
    paths:
      - src/stories/**
      - src/components/**
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3
        with:
          persist-credentials: false
      - name: Install and Build 🔧
        run: |
          yarn
          yarn build-storybook --output-dir docs-build
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: main
          FOLDER: docs-build
          CLEAN: true
          TARGET_FOLDER: docs

内容的提问来源于stack exchange，提问作者Jón Geir Sigurbjörnsson