[github] github pages 배포 방법

1.

github에 접속 후, repository를 생성한다. ( 대문자를 포함해서는 안됨! ) 

아래 코드를 터미널창에 입력해 깃에 업로드합니다. 

---

2. 

터미널창에 npm i gh-pages를 입력하여 gh-pages를 설치한다. 

---

3.

 root에 있는 package.json 파일에 scripts 부분을 수정해줍니다. 

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

위의 코드 2줄을 scripts에 추가 후,

마지막에 homepage를 추가해줍니다.

https://git아이디.github.io/repository이름

그러면 코드가 위의 이미지처럼 작성이 되어있을겁니다!

---

4. 배포를 위해 

npm run deploy

를 입력합니다. 

Published로 나오면 성공 !

---

리액트 파일을 git pages에 업로드 했는데 빈화면만 나온다면? 

라우터의 문제이므로 

BrowserRouter에 basename={process.env.PUBLIC_URL}을 적어준다. 

basename={process.env.PUBLIC_URL}

process.env.PUBLIC_URL란?

process.env.PUBLIC_URL 은 Node.js 라이브러리의 일부이며 당신의 개발모드가 로컬에서 작동하냐 아니면 Github Pages와 같이 실제 서버에서 작동하냐에 따라 동적으로 생성되는 URL 입니다.

​

public에 이미지 폴더(/images)를 만들어 넣었다면, 

경로를 

src={`${process.env.PUBLIC_URL}/images/이미지이름.png`}

이렇게 적어주면 된다. 

---