GitHub 페이지를 사용하여 React UI 구성 요소의 쇼케이스를 설정하는 방법

내 워크플로

내 워크플로는 기존 GitHub 작업, 빌드Styleguide 예제 및 GitHub 페이지에서 결과 호스팅을 위한 작은 스크립트의 사용을 기반으로 합니다.

자신의 시각적 문서/구성 요소 또는 정적 웹 사이트 데모를 호스팅하기 위한 예제를 빌드하는 데 사용할 수 있습니다. 반응 UI 라이브러리 또는 빌드 도구와 동일한 워크플로 - Storybook , Styleguidist 또는 기타:)

주요 이점 중 하나 - 리포지토리의 주요 분기에서 각 푸시/풀 요청에 대해 자동으로 최신 버전의 UI 라이브러리 또는 앱을 받게 됩니다.

제출 카테고리:

DIY 배포

Yaml 파일 또는 코드 링크

실행을 위한 5가지 빠른 단계

다음으로 구성된 초기 설정을 수행한 후:

GitHub 설정 페이지에서 자신의 Personal Access Token을 만듭니다. 이 액세스 토큰을 실제 계정 비밀번호가 아닌 아래 코드의 비밀번호로 사용하십시오.

setup your GitHub username을 USERNAME으로, 원격 URL을 REMOTE_URL로(예: https://github.com/winner95/styleguide.git ) GitHub Secrets.

setup GitHub Pages 귀하의 리포지토리에 대해.

리포지토리에 파일.github/workflows/publish-docs.yml을 만듭니다.

다음 코드를 붙여넣습니다.

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/[email protected]
        with:
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          remote_url: ${{ secrets.REMOTE_URL }}

변경 사항을 저장소에 푸시하십시오.

축하합니다! GitHub 페이지에서 빌드 결과를 찾을 수 있습니다. 제 경우에는 이것을 통해 link .

추가 리소스/정보

제 경우에는 종속성을 설치하는 데 최대 1분이 소요되며 이는 매우 빠릅니다.