Storybook: Publish to GitHub Pages or Cloudflare Pages

[eliot-akira]

Ideally the workflow can be adapted to support any type of static site, built with Storybook, Docusaurus, TypeDoc, Vite, etc. Something like:

• Set up GitHub Pages with Cloudflare and a Custom Domain

Related:

• Adding Storybook to document components and improve frontend developer flow #9

[juliacanzani]

@eliot-akira There's a Storybook -> CloudFlare Pages workflow on tangible-ui, a good starting point if you want to try setting this up :)

If you need any help, I'm sure @TangibleMark can give you a hand!

[eliot-akira]

Great, thanks for the info! I think I'll start by writing a documentation page with the steps, then take notes as I complete them. That workflow script is perfect, I'll copy it and replace the project-specific values.

I'll publish it to a subdomain like fields-storybook.tangible.one. I also plan to prepare a Docusaurus site on fields.tangible.one, at least as a dev/staging one. It might be useful to have a common convention for other plugins/modules, to have their own dev-docs/storybook sites.

[juliacanzani]

That subdomain naming convention seems fine to me, I can't think of anything better that doesn't complicate things unnecessarily :)

[eliot-akira]

OK, it will be interesting to compare the Storybooks of UI and Fields libraries. Eventually they would be harmonized, or maybe even unified - since I imagine plugin admin interfaces use a lot of forms and fields, so they would ideally fit in seamlessly with the rest of the UI.

[eliot-akira]

Done. I wrote down the steps in the pull request itself, and will copy them to the docs site.

• Deploy to Cloudflare Pages #65

It was easiest to use Cloudflare Pages' default domain, pages.dev. The project on Pages has the same naming convention as existing projects, like storybook-tangible-ui.

• storybook-fields.pages.dev
• docusaurus-fields.pages.dev

It makes sense to have the project type as a prefix here, to group them in the Pages overview. For GitHub repos, I prefer to have the project name first, to group them by project.

• fields
• fields-docs
• loops-and-logic
• loops-and-logic-docs

I'm considering whether it's better to keep them as separate repos, or have the docs in the project itself.

An advantage of the latter is that some parts of the documentation can be generated from the code, so the docs are always kept in sync. Another idea is to generate API docs using TypeDoc (for TypeScript), PHPDoc, or a script to output Markdown pages.

Anyway, thanks for feedback!

[eliot-akira]

Added a guide in the documentation.

• Deploy to Cloudflare Pages - https://docs.tangible.one/guides/cloudflare-pages

---

I changed one line in the workflow script so it publishes to the same site on every commit from the main branch, without needing a version tag.

if [ "${{ github.ref_type }}" == "tag" ] || [ "$GITHUB_REF_NAME" == "main" ];

In this case, it's here:

• https://storybook-fields.pages.dev/