react 프로젝트를 만들면서 많은 커밋을 했다.
build한것을 기존에 사용하던 레파지토리에 배포 하기가 너무 어려웠다.

그래서 그냥 새 레파지토리를 만들고 build안 파일들만 올리면
되기때문에,

그렇게 할까 생각 했지만 잘못되고 비효율적인 방법인 것 같아서 찾게 되었다.

GitHub Pages에 쉽게 배포 가능한 gh-pages 패키지를 사용해보자.

사용법

1.터미널에서 설치해준다.
npm i gh-pages


2. package.json 수정

package.json에 scripts부분에 2개 추가.

"predeploy": "npm run build"
"deploy": "gh-pages -d build"


package.json 맨 하단에 추가.
"homepage": "https://github사용자이름.github.io/저장소이름"


3. 터미널에서 npm run deploy 배포 해준다.


4. github 저장소에 들어가서 setting => pages => branch에서 gh-pages로 설정 해준다 (대부분 자동으로 되어 있을것임)

주의사항

레파지토리 생성 했을때 저장소이름을

github사용자이름.github.io가 아닌

my-react-app 이라든지 등 자신이 임의로 설정한 경우는

build 폴더 => index.html에 link태그에 href경로를 수정해주어야 한다.

ex)
href="my-react-app/...어쩌구저쩌구"
경로 맨 앞에 레파지토리 저장소 이름을 추가해야 한다.

그렇지 않으면 홈페이지를 접속해도 하얀화면일 것이다.



수정 했다면 다시 터미널에서 npm run deploy

https://사용자이름.github.io/저장소이름/
홈페이지를 접속하면 잘 나올 것이다.

배포한 홈페이지 수정 하고 싶을때

수정하고싶다면 그냥 코드 짜고 npm run deploy만 해주자.

수정 내용에 대해서 커밋을 해도 안해도 상관 없다.

변경되기 까지 시간이 좀 있는 것 같다.
(ctrl + f5) 1분정도 해주니 바뀐다.