[GitHub] react app을 github.io 홈페이지로 만들기

일반적인 repository > github.io 홈페이지 만들기로는 react app은 불가능해서 이런 저런 삽질을 한 결과 아래와 같은 홈페이지를 만들 수 있게 되었다. 개발자들은 꼭 만들어야한다는 github.io 홈페이지 만드는 방법을 알아보자.

https://yeojisun.github.io/react-slick-card-multiple-row-carousel/

React App

 

1. create-react-app을 통해 만든 react app 디렉토리 내의(git repository 위에 올라가있다는 전제하에) package.json에 hompage 속성값을 추가한다.

...
  "homepage": "https://yeojisun.github.io/react-slick-card-multiple-row-carousel",
...

 

2. 현재 디렉토리에서 아래와 같은 명령어를 입력한다.

-- build
npm run build
-- 깃헙 페이지 관련 install
npm install --save-dev gh-pages

 

3. package.json으로 돌아와 scripts 내에 deploy 속성값을 추가한다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "npm run build &&gh-pages -d build"
  },

 

4. 다시 터미널에서 아래와 같은 명령어를 입력한다.

npm run deploy

 

5. github에서 해당 repository의 settings>pages로 들어가면 아래와 같이 설정할 수 있다. gh-pages를 선택해야 한다.

 

6. 완성!

쟈라란