프로젝트를 GitHub Pages로 배포하기! (feat. React)

들어가며

이력서, 개인 프로젝트 페이지 호스팅을 하는 방법을 알아보다가 Github Pages를 통해 할 수 있다고 해서 한 번 세팅 해보기로 했다!
개발 환경은 React, Node.js, yarn 이다.

GitHub Pages

Github 저장소의 내용을 웹페이지로 만들어 주는 서비스이다.
Github에 자신의 웹 프로젝트를 업로드하면 Github에서 호스팅을 해 준다.
public 프로젝트에 대해서만 무료로 웹 사이트를 구축할 수 있다.

😺 세팅방법

1. gh-pages 패키지 설치

> yarn add gh-pages --dev

2. package.json 수정

1. homepage 추가

내 git repository 주소를 적어준다.

"homepage" : "https://[user_name].github.io/[repository_name]"

2. delploy 추가

 "predeploy": "yarn build",
 "deploy": "gh-pages -d build"

• predeploy : deploy 전에 수행함
• yarn build : 현재 프로젝트 코드를 빌드함
• gh-pages -d build : build 디렉토리(-d)에 있는 파일을 GitHub Pages에 업로드함.

3. 배포하기

> yarn deploy

4. 완료!!

위 사진처럼 Published라고 뜨면 완료된것이다!

5. git repository 세팅

git repository로 가서 Settings -> Pages로 이동하여 Branch를 gh-pages로 바꿔준다. 공식문서 참조

6. 접속해보기

package.json 파일 homepage에 작성했던 링크로 접속해보자!!
처음 배포 시에는 페이지가 뜨는데 시간이 좀 걸린다고 한다.