├── LICENSE
├── README.md
├── action.yaml
└── assets
└── github action 1.webp
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Bitovi
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Deploy Storybook to GitHub Pages
2 |
3 | `bitovi/github-actions-storybook-to-github-pages` builds and deploys a Storybook application to GitHub Pages.
4 |
5 | This action uses the new GitHub Actions publishing method which allows you to create an artifact that contains the result of the build and serves the files in the artifact on the Pages site. There’s no need to check files back into your repository, keeping it nice and clean.
6 |
7 |
8 |
9 |
10 | ## Action Summary
11 | This action deploys Storybook to Github Pages. The build process should create static files and put them into a build direcory that will be moved into your Pages hosting location.
12 |
13 | If you would like to deploy a backend app/service, check out our other actions:
14 | | Action | Purpose |
15 | | ------ | ------- |
16 | | [Deploy Docker to EC2](https://github.com/marketplace/actions/deploy-docker-to-aws-ec2) | Deploys a repo with a Dockerized application to a virtual machine (EC2) on AWS |
17 | | [Deploy React to GitHub Pages](https://github.com/marketplace/actions/deploy-react-to-github-pages) | Builds and deploys a React application to GitHub Pages. |
18 | | [Deploy static site to AWS (S3/CDN/R53)](https://github.com/marketplace/actions/deploy-static-site-to-aws-s3-cdn-r53) | Hosts a static site in AWS S3 with CloudFront |
19 |
20 |
21 | **And more!**, check our [list of actions in the GitHub marketplace](https://github.com/marketplace?category=&type=actions&verification=&query=bitovi)
22 |
23 | ## Getting Started Intro Video
24 |
25 | 
26 |
27 |
28 | # Need help or have questions?
29 | This project is supported by [Bitovi, A DevOps consultancy](https://www.bitovi.com/services/devops-consulting).
30 |
31 | You can **get help or ask questions** on our:
32 |
33 | - [Discord Community](https://discord.gg/zAHn4JBVcX)
34 |
35 |
36 | Or, you can hire us for training, consulting, or development. [Set up a free consultation](https://www.bitovi.com/services/devops-consulting).
37 | 
38 |
39 | # Basic Use
40 |
41 | > **Note: ** Be sure to [set up your project for actions deployed pages](#set-up-your-project-for-actions-deployed-pages).
42 |
43 | For basic usage, create `.github/workflows/deploy.yaml` with the following to build on push.
44 | ```yaml
45 | on:
46 | push:
47 | branches:
48 | - "main" # change to the branch you wish to deploy from
49 |
50 | permissions:
51 | contents: read
52 | pages: write
53 | id-token: write
54 |
55 | jobs:
56 | deploy:
57 | runs-on: ubuntu-latest
58 | steps:
59 | - id: build-publish
60 | uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
61 | with:
62 | path: build # change to your build folder
63 | ```
64 |
65 | ## Set up your project for Actions deployed Pages
66 | - In the project repo in GitHub, go to Settings > Pages.
67 | - For the source, select GitHub Actions
68 | - No further configuration is needed.
69 |
70 | 
71 |
72 | > **Note:** Your Repository must be set to public for GitHub Pages to serve content.
73 |
74 | # Inputs
75 |
76 | The following inputs can be used as `step.with` keys
77 |
78 | | Name | Type | Description |
79 | |------------------|---------|------------------------------------|
80 | | `checkout` | T/F | Set to `false` if the code is already checked out (Default is `true`) (Optional) |
81 | | `path` | String | Path of output files, Default is `dist/storybook` (Optional)|
82 | | `install_command` | String | 'Specifies the command to run the installation. Default is `npm ci`. (Optional) |
83 | | `build_command` | String | Specifies the command to run after the `install_command` for the build, Default is `npm run build-storybook` (Optional)|
84 |
85 | # Customizing
86 |
87 | ## Repository Environments
88 | To surface published url to the root of the repo via a GitHub Environment, add the following to your workflow:
89 | ```yaml
90 | # ...etc
91 | jobs:
92 | deploy:
93 | environment:
94 | name: github-pages
95 | url: ${{ steps.build-publish.outputs.page_url }}
96 | # ...etc
97 | ```
98 |
99 | > *Note:* This is helpful when you have a custom domain
100 |
101 |
102 | Full example with environment and yarn usage
103 |
104 | ```yaml
105 | on:
106 | push:
107 | branches:
108 | - "main" # change to the branch you wish to deploy from
109 |
110 | permissions:
111 | contents: read
112 | pages: write
113 | id-token: write
114 |
115 | jobs:
116 | deploy:
117 | environment:
118 | name: github-pages
119 | url: ${{ steps.build-publish.outputs.page_url }}
120 | runs-on: ubuntu-latest
121 | steps:
122 | - id: build-publish
123 | uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
124 | with:
125 | path: build # change to your build folder
126 | install_command: yarn install
127 | build_command: yarn run build-storybook
128 | ```
129 |
130 |
131 | ## External Blog Posts
132 | - [How to Deploy Storybook to GitHub Pages with GitHub Actions](https://www.bitovi.com/blog/deploy-storybook-to-github-pages-with-github-actions)
133 |
134 | ## Contributing
135 | We would love for you to contribute to [`bitovi/github-actions-storybook-to-github-pages`](hhttps://github.com/bitovi/github-actions-storybook-to-github-pages). [Issues](https://github.com/bitovi/github-actions-storybook-to-github-pages/issues) and [Pull Requests](https://github.com/bitovi/github-actions-storybook-to-github-pages/pulls) are welcome!
136 |
137 | ## License
138 | The scripts and documentation in this project are released under the [MIT License](https://github.com/bitovi/github-actions-storybook-to-github-pages/blob/main/LICENSE).
139 |
140 | # Provided by Bitovi
141 | [Bitovi](https://www.bitovi.com/) is a proud supporter of Open Source software.
142 |
143 | # We want to hear from you.
144 | Come chat with us about open source in our Bitovi community [Discord](https://discord.gg/zAHn4JBVcX)!
145 |
146 |
147 |
--------------------------------------------------------------------------------
/action.yaml:
--------------------------------------------------------------------------------
1 | name: 'Deploy Storybook to GitHub Pages'
2 | description: 'Build and deploy storybook code to GitHub pages'
3 | branding:
4 | icon: upload-cloud
5 | color: red
6 | inputs:
7 | checkout:
8 | description: 'Specifies if this action should checkout the code'
9 | required: false
10 | default: 'true'
11 | path:
12 | description: 'Specifies the path of the static assets after building'
13 | required: false
14 | # TODO: where does storybook output by default?
15 | default: 'dist/storybook'
16 | install_command:
17 | description: 'Specifies the command to run the installation.'
18 | required: false
19 | default: 'npm ci'
20 | build_command:
21 | description: 'Specifies the command to run after npm ci for the build'
22 | required: false
23 | default: 'npm run build-storybook'
24 | outputs:
25 | page_url:
26 | description: "The URL of the page"
27 | value: ${{ steps.deploy.outputs.page_url }}
28 |
29 |
30 |
31 | runs:
32 | using: 'composite'
33 |
34 | steps:
35 | - name: Checkout if required
36 | if: ${{ inputs.checkout == 'true' }}
37 | uses: actions/checkout@v4
38 |
39 | - name: 'Build'
40 | shell: bash
41 | run: |
42 | echo "::group::Build"
43 | ${{ inputs.install_command }}
44 | ${{ inputs.build_command }}
45 | echo "::endgroup::"
46 |
47 | - name: 'upload'
48 | uses: actions/upload-pages-artifact@v3
49 | with:
50 | path: ${{ inputs.path }}
51 |
52 | - id: deploy
53 | name: Deploy to GitHub Pages
54 | uses: actions/deploy-pages@v4
55 | with:
56 | token: ${{ github.token }}
57 |
58 | - name: Print footer
59 | shell: bash
60 | run: |
61 | echo "" >> $GITHUB_STEP_SUMMARY
62 | echo "# Made by [](https://bitovi.com)" >> $GITHUB_STEP_SUMMARY
63 | echo "" >> $GITHUB_STEP_SUMMARY
64 | echo "Check the rest of our actions in the [GitHub Marketplace](https://github.com/marketplace?category=&type=actions&verification=&query=bitovi)!" >> $GITHUB_STEP_SUMMARY
65 | echo "" >> $GITHUB_STEP_SUMMARY
66 | echo "You can get help or ask questions on our [Discord Channel](https://discord.gg/zAHn4JBVcX), or set up a free consultation on our [platform engineering website](https://www.bitovi.com/services/devops-consulting/platform-engineering)." >> $GITHUB_STEP_SUMMARY
67 |
68 |
--------------------------------------------------------------------------------
/assets/github action 1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitovi/github-actions-storybook-to-github-pages/f1b2d572f2d40ff3391d967538564111944cdbc0/assets/github action 1.webp
--------------------------------------------------------------------------------