Github pages 배포하기

1. 깃허브 Repository 생성

깃허브에서 레파지토리를 하나 생성한다. 이후 프로젝트에서 깃허브 레파지토리 생성 첫화면에 나오는 명령어를 참고해서 소스를 push한다.

git init
git add *
git commit -m 'first commit'
git remote add origin https://github.com/JIHYE-P/react-github-pages.git
git push -u origin master

2. gh-pages 패키지 설치

깃허브에 배포하기 위해 아래 명령어를 통해 gh-pages 패키지를 설치한다.

npm install gh-pages --save-dev

3. package.json 수정

패키지 설치 후에 package.json을 열고 아래 항목들을 수정한다.

• homepage를 추가한다.

//... 
"homepage": "http://{깃허브아이디}.github.io/{레파지토리명}"

• scripts 부분에 해당 명령어를 추가한다.

"scripts": { 
    //... 
    "predeploy": "npm run build", 
    "deploy": "gh-pages -d build" 
}

저장 후 npm run deploy 명령어를 실행하면 배포할 수 있다.

4. 확인

hompage의 값으로 준 url을 타고 들어가면 배포된 페이지를 확인할 수 있다.

또는 깃허브 레파지토리의 Settings > Pages 메뉴로 들어가면 아래와 같이 정상적으로 배포된 것을 확인할 수 있다.

caution은 private 레파지토리지만 해당 배포 페이지는 public으로 접근할 수 있어서 뜨는 것이다. 무시해도 된다.

참고

[React] 프로젝트 GitHub Pages 배포하기