정적 사이트 또는 단일 페이지 앱을 github 페이지에 배포하는 단계별 가이드

gh-pages 패키지 사용

    "scripts": {
      // replase dist with your build dir folder
      "deploy": "gh-pages -d [dist]"
    }
    /*
     * Replace <username> and <repositoryname> with your username
     * from GitHub and the name of your new repository.
     */
    "home": "https://<username>.github.io/<repositoryname>/",

gh-pages behind the scenes will create another branch called gh-pages to push your build files into it

Github 작업 사용

# Runs build and test
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout 🛎️
        uses: actions/[email protected] # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/[email protected]
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: _site # The folder the action should deploy.
          CLEAN: true # Automatically remove deleted files from the deploy branch

Notes: The above set up will work on every push and every pull request created