Build and deploy storybook static files to GitHub pages for develop and master
See original GitHub issueFeature Description
We should make Storybook available on google.github.io/site-kit-wp.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
- When pushing to 
developormaster, Storybook static files should be built and written to thegh-pagesbranch. - In the 
gh-pagesbranch, a folder should be added per branch (e.g. so that the URLs will end up likehttps://google.github.io/site-kit-wp/storybook/developandhttps://google.github.io/site-kit-wp/storybook/master). - This must not happen for pull-requests.
 
Implementation Brief
There is an easy-to-use Travis-CI integration for deploying to GitHub pages (which e.g. the Web Stories plugin is using: https://github.com/google/web-stories-wp/blob/d181a4ea75cff53db730920fb41c41e2624a0c96/.travis.yml#L130-L141). However, that appears not to support deploying only partial content - you can specify a local_dir, but not a remote_dir. Hence, using a GitHub action workflow makes more sense. A lot of the necessary code can be taken from the existing build-pr.yml workflow.
- Add 
npm run build:storybookcommand that stores storybook in astorybook-staticfolder (ignore that folder in git). - Add 
build-storybook.ymlworkflow that runsnpm run build:storybook, then uploads the files as artifacts, then downloads it and integrates them into thegh-pagesbranch (in astorybook/{$branch_name}folder) and commits. - Merge #1457.
 
QA Brief
Changelog entry
- N/A
 
Issue Analytics
- State:
 - Created 3 years ago
 - Reactions:1
 - Comments:7 (2 by maintainers)
 
Top Results From Across the Web
Deploy Storybook to GitHub Pages - DEV Community     
First, we have to create a docs folder at the root of our repository which will be used to host the published Storybook...
Read more >How to Deploy Storybook to GitHub Pages | by Armin Yazdani
Firstly, install gh-pages in your application by running the following command: npm install gh-pages --save-dev or yarn add gh-pages -D.
Read more >Using Github Actions Fails to Deploy Storybook to Github Pages
Build succeeds, but when I go to Github pages there is a 404 where I'm expecting the Storybook to be. name: Build and...
Read more >How to Deploy a Static Website using Github - Towards AI
The alignment of the folders is essential. The HTML page name must be “index.html.” Only one Static HTML file can be deployed with...
Read more >Learn Deploying Storybook – Design Systems with React ...
[00:01:22] So now we should have a git-repository, it should have all of our code on it, great. Let's build Storybook. And we...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

QA ❌
Currently no static assets are rendering in the build due to moving the files into a subdirectory; Storybook seems to assume that it’s running relative to the root rather than
/storybook.@aaemnnosttv I like your suggestion to use a subdirectory for
storybook. I’ll update the IB (and PR). In terms of Netlify, I’d rather rely on GH Pages for now since that certainly works and is a thing we already have anyway, rather than adding another piece to our stack (may also be complicated because ofgoogleorg requirements).