使用 Github Actions 无法将 Storybook 部署到 Github 页面

Question

我正在尝试使用 Github Actions 将 Storybook 部署到 Github 页面。

我已经阅读了许多教程* 以及 this answer，并在阅读了 Github Pages 文档后尝试使用 .yml 文件，但到目前为止没有任何效果。

每当我尝试构建和部署时，部署过程要么失败，要么构建成功（使用下面列出的第二个 .yml），该项目实际上并没有显示在 Github 页面 URL 上。

我知道我的 .yml 文件中可能需要更改某些内容，但到目前为止，我还没有找到在 repo 的 Github 页面 URL 上实际呈现 Storybook 的修复程序。在本地运行 npm 脚本时，Storybook 构建良好。

我只是在我的 .yml 配置中遗漏了一些东西吗？我已经为我正在使用的存储库配置了 Github Pages。

我的package.json：

{
  "homepage": "http://<my github username>.github.io/<my github repo>",
  "name": "repo-name",
  "version": "0.1.0",
  "private": false,
  "license": "MIT",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "babel-loader": "^8.2.2",
    "feather-icons": "^4.28.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-feather": "^2.0.9",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -s public",
    "build-storybook": "build-storybook -o docs-build",
    "deploy-storybook": "gh-pages -d docs"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-controls": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-knobs": "^6.1.12",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/addon-storyshots": "^6.1.21",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.21",
    "gh-pages": "^3.1.0",
    "react-test-renderer": "^17.0.1"
  }
}

我尝试过的

.yml 配置及其输出：

第一个 .yml 配置：
构建失败，我收到此错误：

fatal: could not read Username for 'https://github.com': No such device or address

name: Build and Deploy
on: 
  push:
    paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ????️
        uses: actions/checkout@main
      - name: Build Storybook
        run: | # Install npm packages and build the Storybook files
          npm install
          npm run build-storybook
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: storybook-static # The branch the action should deploy to.
          folder: docs-build # The folder that the build-storybook script generates files.
          target-folder: docs # The folder that we serve our Storybook files from

第二个 .yml 配置：
构建成功，但是当我转到 Github 页面时，我希望 Storybook 出现 404。

name: Build and Deploy
on: 
  push:
    paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ????️
        uses: actions/checkout@main
      - name: Build Storybook
        run: | # Install npm packages and build the Storybook files
          npm install
          npm run build-storybook
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: storybook-static # The branch the action should deploy to.
          folder: docs-build # The folder that the build-storybook script generates files.
          target-folder: docs # The folder that we serve our Storybook files from
      - name: Deploy storybook
        run: |
          npm run deploy-storybook

到目前为止我尝试过的教程和文档：
1.) 如何将 Storybook 部署到 GitHub Pages https://medium.com/swlh/how-to-deploy-storybook-to-github-pages-4894097d49ab
2.) Github Actions 文档https://github.com/JamesIves/github-pages-deploy-action

Answer 1

这对我有用：

name: Build & Deploy Storybook
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install and Build ?
        # This needs an Acces Token stored as "GH_TOKEN" ?
        run: |
          npm install
          npm run deploy-storybook -- --ci
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

在哪里

• GH_TOKEN 是作为存储库机密添加的个人访问令牌
• “deploy-storybook”指的是：https://www.npmjs.com/package/@storybook/storybook-deployer