[Github] Github Pages 이용하여 홈페이지 배포 +

기존에 간단히 포스팅했던 글에 업그레이드 버전의 포스팅을 하려한다.

(기존 포스팅 바로가기)

[Github] GitHub Pages 서비스 이용하기

 

[gh-page 설치]

npm install --save gh-pages

[프로젝트 내 package.json 살피기]

"scripts": {
    ...
    "build": "react_scripts build",
    ...
}

"build": "react_scripts build",의 "react_scripts build"는 실행시 해당 플젝의 production ready code를 생성하게된다. production ready란 코드가 압축되고 모든게 최적화 된다는 의미.

 

[npm run build]

그후 플젝 바로 아래 build란 폴더가 생성된다.

 

[현재 repository 이름 확인]

git remote -v

[다시 package.json 으로 가서]

마지막 태그가 닫히는 부분 위에 아래와 같이 추가한다.

	},
	"homepage": "https:// github username.github.io/현재 배포할 githubrepository",
}

[deploy와 prodeploy 추가]

먼저 build 후 deploy를 해야한다는 번거로움을 줄이기 위해 predeploy command를 추가한다.

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

 

 

"deploy": "gh-pages -d build", 는 설치한 gh-pages를 실행 하고 build란 디렉토리를 가져가는 것을 의미한다.

그리고 build전 만들어 놓은 predeploy 키 값을 먼저 실행하게 된다.

 

[npm run deploy 실행] 

실행 하면 그 전에 노드(Node.js)가 우리가 입력해둔 predeploy를 실행하게 된다.

("deploy": "gh-pages -d build", "scripts" 안 react-scripts build 를 실행하고, gh-pages -d build가 실행되는데 gh-pages 가 build 폴더를 "homepage" 값에 업로드 하게 된다.

그래서 수정 또는 업데이트후에도 npm run deploy를 하면 연결해둔 github page에 반영된다.