From a60d6160e43054ba8342dd412dc1e4c974d2ab66 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 2 Nov 2023 17:09:38 +0000
Subject: [PATCH] Merge pull request #24527 from
 bitovi/publish-docs-github-pages

GitHub Pages publish guide

(cherry picked from commit 36c9e26a229c99c8ea01ffb39f8151d733465f77)
---
 docs/sharing/publish-storybook.md             | 21 ++++++++--
 .../snippets/common/ghp-github-action.yml.mdx | 39 +++++++++++++++++++
 2 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 docs/snippets/common/ghp-github-action.yml.mdx

diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index 1748a54049b9..557462236359 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -131,15 +131,30 @@ When you publish Storybook, you also get component history and versioning down t
 
 ## Publish Storybook to other services
 
-Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md),
-[embedding stories](./embed.md), history, and versioning require tighter integration with Storybook APIs and secure authentication. Your hosting provider may not be capable of supporting these features. Learn about the Component Publishing Protocol (CPP) to see what.
+Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md), [embedding stories](./embed.md), 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](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts). Additionally, if you want to learn about the Component Publishing Protocol (CPP), you can find more information below.
+
+### GitHub Pages
+
+To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook to GitHub Pages](https://github.com/bitovi/github-actions-storybook-to-github-pages) Action. To enable it, create a new workflow file inside your `.github/workflows` directory with the following content:
+
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/ghp-github-action.yml.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 <div class="aside">
 
-ℹ️ Additional header configuration may be required to serve Storybook's static files correctly on your host. For more information on the required headers, see the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts).
+ℹ️ The GitHub Pages Action requires additional configuration options to customize the deployment process. Refer to the [official documentation](https://github.com/marketplace/actions/deploy-storybook-to-github-pages) for more information.
 
 </div>
 
+
 <details>
 
 <summary><h2>Component Publishing Protocol (CPP)</h2></summary>
diff --git a/docs/snippets/common/ghp-github-action.yml.mdx b/docs/snippets/common/ghp-github-action.yml.mdx
new file mode 100644
index 000000000000..ffd967694cfd
--- /dev/null
+++ b/docs/snippets/common/ghp-github-action.yml.mdx
@@ -0,0 +1,39 @@
+```yml
+# .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@v3
+
+      # Set up Node
+      - uses: actions/setup-node@v3
+        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.1
+        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
+```