2022.01.19(Wed) <GitHub pages를 이용한 리액트 정적 사이트 배포>

이 문어인지, 고양이인지 모를 생명체가 생각보다 전지전능합니다.

1. 문제의 발단

포트폴리오 배포를 깃허브로 하기로 하였다. 포트폴리오는 정적 사이트이기 때문에 간단하게 배포할 수 있기 때문에 바로 적용해 보도록 한다. 정말 못 하는 게 없는 깃허브다.

2. 어떻게 하나요?

1. 레포를 만든다.
   • 아래의 그림처럼, 이름을 자신의 '깃허브 아이디.github.io'로 만들면 이 것이 도메인이 되어 사용이 가능하다.
   • 나는 이미 포트폴리오 사이트를 만들어 사용중이므로, 중복된 이름이라고 뜬다.
   • 퍼블릭으로 만들자.
   • Readme를 추가해주자.
2. 작업을 한다.
   • 초기 세팅은 create-react-app으로 간단하게 하고 작업하는 것이 편하다.
3. 작업이 끝나면 'gh-pages'를 install 한다. 
   • npm install gh-pages --save-dev
4. package.json파일을 수정한다.

   • "name": "[Github 아이디].github.io",
         "version": "0.1.0",
         "private": true,
         "homepage": "https://[Github 아이디].github.io",
         
         // homepage 부분을 추가한다. 주소는 레포를 만들때 설정했던 그대로 한다.

   •     "scripts": {
             "start": "react-scripts start",
             "build": "react-scripts build",
             "test": "react-scripts test",
             "eject": "react-scripts eject",
             "predeploy": "npm run build",
             "deploy": "gh-pages -d build"
         },
         
         // predeploy와 deploy 부분을 추가한다.

5. npm run deploy로 배포한다.
6. 배포한 깃허브 레포로 들어가서 Settings -> Pages 탭에 가보면 

이렇게 되어 있어야 배포가 완료 되었다는 말이다. 아직 체크표시가 아니라면 세로 고침을 하면서 기다려보자. 시간이 조금 걸릴 수 있다.