[React] Github page 배포하기

1. create-react-app  

npx create-react-app blog
cd blog
npm start

2. github repository 생성.

{username}.github.io 로 생성이 되는데 나는 뒤에 추가 링크가 생기는게 싫어서 {username}.github.io 로 링크를 만들었다. 

3. blog에 git 달아주기

저 {link} 라고 되어있는 부분은 아래 이미지에서 가져오자. 

git init 
git add *
git commit -m "first commit" 
gir remote add origin {link}
git push -u origin master

 

4. gh-pages 설치 및 setting 

`gh-pages` 패키지 설치 

npm install gh-pages

설치 완료 후 package.json 파일에 다음과 같이 홈페이지 주소 추가 만약 저장소 이름이 {username}.github.io 가 아니라면 뒤에 저장소 이름을 붙여 주면 된다. 

"homepage": "http://{username}.github.io/

다음으로 편한 deploy를 위해 다음과 같은 스크립트 추가 

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

스크립트 실행 

npm run deploy

 

 

5. 마지막 

만약 readme 문서가 뜬다면 .. 레포지토리의 setting 에 가서 

브랜치가 gh-pages 로 바뀌어 있는지 확인해야 한다! 

이렇게 하면 이제 리액트로 편리하게(?!) 내 github page를 꾸밀 수 있다 ㅎㅎ