How to set up showcase of your React UI-components using GitHub Pages

My Workflow

My workflow is based on the use of existing GitHub actions, small script for building Styleguide example and hosting results on GitHub Pages.

You can use it for building an example for hosting your own visual documentation / components or static website demo. The same workflow with any react UI library or building tool - Storybook, Styleguidist or any other:)

One of the main benefits - on each push / pull request in main branch of your repo, you will automatically get an up-to-date version of your UI Library or App.

Submission Category:

DIY Deployments

Yaml File or Link to Code

5 quicks steps to run

After you perform initial setup, which consists of:

1. create your own Personal Access Token on GitHub setting page. Use this access token as the password in code below, not your actual account password.
2. setup your GitHub username as USERNAME and remote url as REMOTE_URL (for example https://github.com/winner95/styleguide.git) in GitHub Secrets.
3. setup GitHub Pages for your repo.
4. create file .github/workflows/publish-docs.yml in your repo.
5. paste the following code:

name: Styleguide-build
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE,
      # so your job can access it
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: 12.18.3

      # install javaScript dependencies
      - run: yarn install
      # this is a line, which you can change 
      # to your own building script
      - run: yarn styleguide --buildDir ./docs

      # deploy action
      - name: GitHub Pages Deploy
        uses: appleboy/gh-pages-action@v0.0.2
        with:
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          remote_url: ${{ secrets.REMOTE_URL }}

Try to push any change to your repo.

Congratulations! You can find the results of your build on GitHub Pages. In my case via this link.

Additional Resources / Info

In my case the build take up to 1 minutes with installation of dependencies, which is quite fast.