发布 Storybook

团队在线发布 Storybook 以审查和协作正在进行的工作。这允许开发者、设计人员、PM 和其他利益相关者检查 UI 是否正确，而无需接触代码或需要本地开发环境。

¥Teams publish Storybook online to review and collaborate on works in progress. That allows developers, designers, PMs, and other stakeholders to check if the UI looks right without touching code or requiring a local dev environment.

将 Storybook 构建为静态 Web 应用

¥Build Storybook as a static web application

首先，我们需要将 Storybook 构建为静态 Web 应用。该功能已内置并针对大多数受支持的框架进行了预配置。在项目的根目录中运行以下命令：

¥First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured for most supported frameworks. Run the following command inside your project's root directory:

npm run build-storybook

Storybook 将创建一个能够由任何 Web 服务器提供服务的静态 Web 应用。通过运行以下命令在本地预览：

¥Storybook will create a static web application capable of being served by any web server. Preview it locally by running the following command:

npx http-server ./path/to/build

自定义构建以提高性能

¥Customizing the build for performance

默认情况下，Storybook 的生产版本会将所有故事和文档封装到生产包中。这对于小型项目来说是理想的，但可能会导致大型项目的性能问题，或者当减少构建时间是优先事项时（例如，测试、CI/CD）。如果需要，你可以在 main.js|ts 配置文件中使用 test 选项 自定义生产构建，并调整构建脚本以启用 --test flag 的优化。

¥By default, Storybook's production build will encapsulate all stories and documentation into the production bundle. This is ideal for small projects but can cause performance issues for larger projects or when decreased build times are a priority (e.g., testing, CI/CD). If you need, you can customize the production build with the test option in your main.js|ts configuration file and adjust your build script to enable the optimizations with the --test flag.

npm run build-storybook -- --test

使用 Chromatic 发布 Storybook

¥Publish Storybook with Chromatic

一旦你将 Storybook 构建为静态 Web 应用，你就可以将其发布到你的 Web 主机。我们推荐 Chromatic，这是为 Storybook 制作的免费发布服务，可在云中安全地记录、版本化和索引你的 UI 组件。

¥Once you've built your Storybook as a static web application, you can publish it to your web host. We recommend Chromatic, a free publishing service made for Storybook that documents, versions, and indexes your UI components securely in the cloud.

首先，使用你的 GitHub、GitLab、Bitbucket 或电子邮件进行注册，并为你的项目生成一个唯一的项目令牌。

¥To get started, sign up with your GitHub, GitLab, Bitbucket, or email and generate a unique project-token for your project.

接下来，从 npm 安装 Chromatic CLI 包：

¥Next, install the Chromatic CLI package from npm:

npm install chromatic --save-dev

软件包安装完成后，运行以下命令。确保用你自己的项目令牌替换 your-project-token。

¥Run the following command after the package finishes installing. Make sure that you replace your-project-token with your own project token.

npx chromatic --project-token=<your-project-token>

当 Chromatic 完成时，你应该已经成功部署了 Storybook。通过单击提供的链接（即 https://random-uuid.chromatic.com）进行预览。

¥When Chromatic finishes, you should have successfully deployed your Storybook. Preview it by clicking the link provided (i.e., https://random-uuid.chromatic.com).

Build 1 published.
 
View it online at https://www.chromatic.com/build?appId=...&number=1.

设置 CI 以自动发布

¥Setup CI to publish automatically

配置你的 CI 环境，以便在将代码推送到存储库时发布你的 Storybook 和 运行 Chromatic。让我们看看如何使用 GitHub Actions 进行设置。

¥Configure your CI environment to publish your Storybook and run Chromatic whenever you push code to a repository. Let's see how to set it up using GitHub Actions.

在你的项目的根目录中，在 .github/workflows 目录中添加一个名为 chromatic.yml 的新文件：

¥In your project's root directory, add a new file called chromatic.yml inside the .github/workflows directory:

# .github/workflows/chromatic.yml
 
# Workflow name
name: 'Chromatic Publish'
 
# Event for the workflow
on: push
 
# List of jobs
jobs:
  test:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'yarn'
      - run: yarn
      #👇 Adds Chromatic as a step in the workflow
      - uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          #👇 Chromatic projectToken,
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

提交并推送文件。恭喜，你已成功自动发布 Storybook。现在，每当你打开 PR 时，你都会在 PR 检查中获得一个指向你已发布的 Storybook 的便捷链接。

¥Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR you’ll get a handy link to your published Storybook in your PR checks.

与你的团队一起审查

¥Review with your team

将 Storybook 发布作为开发过程的一部分，可以快速轻松地完成 收集团队反馈。

¥Publishing Storybook as part of the development process makes it quick and easy to gather team feedback.

要求审核的常用方法是将已发布 Storybook 的链接粘贴到拉取请求或 Slack 中。

¥A common method to ask for review is to paste a link to the published Storybook in a pull request or Slack.

如果你将 Storybook 发布到 Chromatic，则可以使用 UI 审查 功能自动扫描你的 PR 以查找新的和更新的故事。这可以轻松识别更改的内容并提供反馈。

¥If you publish your Storybook to Chromatic, you can use the UI Review feature to automatically scan your PRs for new and updated stories. That makes it easy to identify what changed and give feedback.

版本控制和历史记录

¥Versioning and history

当你发布 Storybook 时，你还会获得组件历史记录和版本控制直至提交。这在实现审查期间很有用，用于比较分支/提交与过去版本之间的组件。

¥When you publish Storybook, you also get component history and versioning down to the commit. That's useful during implementation review for comparing components between branches/commits to past versions.

将 Storybook 发布到其他服务

¥Publish Storybook to other services

由于 Storybook 是作为静态 Web 应用构建的，因此你还可以将其发布到任何 Web 主机，包括 GitHub 页面、Netlify、AWS S3 等。但是，组合、嵌入故事、历史记录、版本控制和资源等功能可能需要与 Storybook API 和安全身份验证更紧密地集成。如果你想了解有关标题的更多信息，可以参考 迁移指南。此外，如果你想了解组件发布协议 (CPP)，你可以在下面找到更多信息。

¥Since Storybook is built as a static web application, you can also publish it to any web host, including GitHub Pages, Netlify, AWS S3, and more. However, features such as Composition, embedding stories, history, versioning, and assets may require tighter integration with Storybook APIs and secure authentication. If you want to know more about headers, you can refer to the Migration guide. Additionally, if you want to learn about the Component Publishing Protocol (CPP), you can find more information below.

GitHub 页面

¥GitHub Pages

要在 GitHub Pages 上部署 Storybook，请使用社区构建的 将 Storybook 部署到 GitHub Pages 操作。要启用它，请在 .github/workflows 目录中创建一个新的工作流文件，内容如下：

¥To deploy Storybook on GitHub Pages, use the community-built Deploy Storybook to GitHub Pages Action. To enable it, create a new workflow file inside your .github/workflows directory with the following content:

# .github/workflows/deploy-github-pages.yaml
 
# Workflow name
name: Build and Publish Storybook to GitHub Pages
 
on:
  # Event for the workflow to run on
  push:
    branches:
      - 'your-branch-name' # Replace with the branch you want to deploy from
 
permissions:
  contents: read
  pages: write
  id-token: write
 
# List of jobs
jobs:
  deploy:
    runs-on: ubuntu-latest
    # Job steps
    steps:
      # Manual Checkout
      - uses: actions/checkout@v4
 
      # Set up Node
      - uses: actions/setup-node@v4
        with:
          node-version: '16.x'
 
      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
        with:
          install_command: yarn install # default: npm ci
          build_command: yarn build-storybook # default: npm run build-storybook
          path: storybook-static # default: dist/storybook
          checkout: false # default: true

搜索引擎优化 (SEO)

¥Search engine optimization (SEO)

如果你的 Storybook 是公开可见的，你可能希望配置它在搜索引擎结果页面中的渲染方式。

¥If your Storybook is publicly viewable, you may wish to configure how it is represented in search engine result pages.

描述

¥Description

你可以通过将以下内容添加到配置目录中的 manager-head.html 文件中来为搜索引擎提供要在结果列表中显示的描述：

¥You can provide a description for search engines to display in the results listing, by adding the following to the manager-head.html file in your config directory:

{/* .storybook/manager-head.html */}
 
<meta name="description" content="Components for my awesome project" key="desc" />

防止你的 Storybook 被抓取

¥Preventing your Storybook from being crawled

你可以通过包含 noindex 元标记来阻止已发布的 Storybook 出现在搜索引擎结果中，你可以通过将以下内容添加到配置目录中的 manager-head.html 文件中来执行此操作：

¥You can prevent your published Storybook from appearing in search engine results by including a noindex meta tag, which you can do by adding the following to the manager-head.html file in your config directory:

{/* .storybook/manager-head.html */}
 
<meta name="robots" content="noindex" />