노마드코더로 리액트를 공부하던 중에 gh-pages에 다루게 되었는데, 이게 어떤 역할을 하는지 정확한 정리가 필요할 것 같다.

이 글에서 github에 대한 기본적인 설명은 생략한다.

gh-pages?

gh-pages는 github pages로 github에서 제공하는 github repository를 무료로 웹호스팅 하는 서비스이다. 단, 일반사용자는 public repository로 공개된 저장소를 사용해야 한다.

사용방법

1. git repository 생성

2. 원격 저장소 위치 설정

git remote add origin https://github.com/(GitHub ID)/(Repository name).git

3. gh-pages 설치

npm install --save gh-pages

4. package.json 수정

homepage 추가 (제일 상위에 추가)

{
   "homepage" : "https://(GitHub ID).github.io/(Repository name)/"
}

script 추가

{
  "script": {
    "predeploy": "npm run build",
    "deploy": "gh-pages master -d build"
  }
}

5. 빌드 후 배포

npm run deploy

6. 웹에서 확인

homepage주소에서 확인

느낀점😲

웹서버를 따로 설치하지 않아도 개발중에 바로 빌드해서 배포하고, 웹을 통해서 바로 확인하는건 엄청 매력적인것 같다. 간단한 리액트 프로젝트를 만들어보다가도 서버를 구축하는데 많은 시간을 잡아먹곤 했는데, gh-pages를 이용해서 바로바로 테스트하고 또 필요한 부분들을 추가할 수 있을 것 같다.

참고
LoveShinak님 벨로그

생활코딩