[GitHub Pages] gh-pages 라이브러리를 활용하여 배포하기

 

GitHub Pages란?

GitHub Pages는 GitHub에서 제공하는 무료 호스팅 서비스로, 개인, 프로젝트, 또는 조직의 웹사이트를 쉽게 호스팅(서버에 저장)할 수 있도록 해줍니다. GitHub Pages는 정적 웹사이트를 호스팅하는 데 최적화되어 있으며, 주로 HTML, CSS, 자바스크립트 파일을 사용하여 웹사이트를 구축하는 데 사용됩니다.

 

 

Vite로 생성한 React 프로젝트를 활용하여 배포하기

1.프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 실행

npm install gh-pages --save-dev

 

2.vite.config.js 파일을 열고 base 옵션을 추가

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/{repo-name}/',  // {repo-name}을 GitHub 저장소 이름으로 변경
})

 

3.package.json 파일을 열고 다음 내용을 추가

"homepage": "https://{github-username}.github.io/{repo-name}",

"scripts": {
  // ... 기존 스크립트들 ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

 

4. GitHub에서 새 저장소를 생성하거나 기존 저장소를 사용하여 코드를 올려준다.

git init //초기화
git branch -M main //main branch로 설정
git remote add origin [repo 주소] //원격저장소와 로컬 폴더를 연결
git add .
git commit -m "message"
git push origin main

 

5. 명령어로 GitHub Pages에 배포

npm run deploy

 

 

6.GitHub 저장소 페이지 -> Settings -> Pages로 이동 후, Source 섹션에서 branch를 'gh-pages'로 설정 (대부분 자동으로 되어있음)

gh-pages라는 branch가 자동으로 생성된다.

 

7.몇 분 후 "https://{github-username}.github.io/{repo-name}"에서 배포된 사이트 확인

 

8.코드를 변경한 후 배포하려면, 변경사항을 커밋하고 푸쉬 후(main branch에) 다시 npm run deploy를 실행