[gh-pages] github Pages 사용

노마드 코더의 "ReactJS로 영화 웹 서비스 만들기" 를 하다보면 중간에 gh-pages가 나오게 되는데, 그것을 활용하는 방법에 대해서 기록하려고 합니다. 해당 작업은 Visual Studio Code, window환경에서 이용하였습니다.

 

우선 해당 리액트로 이루어진 프로젝트를 완성했다는 가정하에

 

1. Create a new repository

github에서 새로운 레포지토리를 생성하고 url을 준비

 

2. install gh-pages

VS Code에서 해당 작업한 폴더에서 Ctrl + ` 을 누르게 되면 터미널이 열리는데, npm i gh-pages --save-dev 입력하여 라이브러리 설치

 

3. publishing

프로젝트 내 package.json 에서 homepage 주소 설정, script 추가

(github username).github.io/(repository name)

predeploy 빌드 명령어, deploy 게시 명령어

npm run deploy 입력하여 homepage 게시

Failed to get remote.origin.url 과 같은 오류가 나왔으나, git remote add origin (repository 주소) 입력 후 git remote -v 확인

 

오류를 해결하였거나, 정상 작동이라면 아래와 같이 진행될 것입니다.

4. check github pages 

브랜치에 gh-pages가 생성이 되었다면, 성공적이기에 아까 homepage 주소로 저장되었던 곳으로 가게 되면 정상적인 웹으로 구현이 되어있는 것을 확인할 수 있습니다.

브랜치 명을 바꾸고 싶다면 gh-pages --branch | -b <branch name> 넣어주면 됩니다.

추가적인 옵션의 경우는 npm gh-pages 에서 확인하면 됩니다.