React 와 Typescript로 포트폴리오를 만든 뒤 깃허브 페이지로 배포를 하려고 보니 생각보다 간단하지가 않았다. 내가 자유롭게 만든 사이트 구성 방식이 깃허브 페이지로 배포하기에 알맞지 않아 많은 수정을 거친 후에야 배포에 성공할 수 있었다. 여러 서치를 통해 여기저기서 조각처럼 끌어모은 'React + Typescrip 정적 웹페이지 깃허브 페이지로 배포하기' 정보를 공유하고자 한다.

gh-pages 설치

npm install gh-pages --save-dev

package.json 수정

package.json 에 각 코드를 추가한다.

index 와 App 구성하기

아래는 내 웹사이트 구성에 맞춰 index.tsx 파일과 App.tsx 파일을 구성한 화면이다. 참고로 깃허브 페이지는 index파일을 필수로 필요로 한다.(index 없이 하는 방법도 많이 보았지만 내 환경에서는 오류가 많이 나 index를 만들어주었다. 각자의 방법대로 시도해보길 바란다.)

깃허브 페이지에서는 BrowserRouter 보다 HashRouter을 더 권장한다는 글을 여럿 보았는데, 나의 경우 BrouserRouter로 해야 오류가 나지 않았다. 자꾸 흰화면 혹은 route 오류가 난다면 해당 라우터를 수정해보길 바란다.

배포하기

npm run predeploy
npm run deploy

predeploy 시 build 폴더가 생성됐는지 확인한다.

deploy 시 터미널에 Published 가 뜨면 성공!
깃허브 해당 레파지토리에 들어가 오른쪽 메뉴-deployments 의 gh-pages를 확인한다.

만약 이미지가 안 뜬다면?

이미지가 public/images에 있는 경우 상대경로로 이미지가 안 뜰 수 있다. 그런 경우 상대경로가 아닌 절대경로를 사용해주자.

<Img src"https://깃허브아이디.github.io/레파지토리 이름/images/파일명.JPG">