JAVASCRIPT/REACT.JS

[리액트] github.io 프로젝트 생성하기 (+ github push)

개발자 배찌 2022. 5. 3. 14:53
728x90

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

 - 결과물을 github pages에 업로드 할 수 있게 해주는 nice 한 패키지

 - github에서 제공하는 무료 서비스!!

 - 파일을 올리면 웹사이트로 만들어서 무료로 배포해줌!!

 

2. package.json 파일의 맨아래에 추가해주기 

"homepage": "https://{github username}.github.io/{github repository}"

 - github repository 가 없다면 깃허브에서 먼저 생성해주어야함.

 - git remote -v 실행하면 repository 이름을 확인할 수 있음.

 

3. package.json파일의 scripts에 추가해주기

"deploy" : "gh-pages -d build"

"predeploy" : "npm run build"

 

4. 터미널 실행 : npm run deploy

 

5. 결과화면

 

 

 

😊참고😊 

gh-pages가 하는일은 build폴더를 여기에 적어놓은 웹사이트에 업로드 하도록 하는것이다.

**바로 적용이 안되면 2분정도 있다가 홈페이지를 열기를!!  github 무료서비스라서 업데이트하는데 시간이 좀 걸린다고 함... 기다리면 페이지가 생성되어 잘 열리는것을 볼 수 있다.

 

나중에 코드를 수정하고 업데이트 했다면,

터미널에 npm run deploy 를 실행시키면 github pages에 push 되면서 웹사이트도 업데이트 되는것을 확인할 수 있다.