설치

npm i gh-pages

설정

package.json에 homepage항목 추가

{
  "name" : "asdfasdf",
  "versios" : "1.0.0",
  ...
  
  ... ,
  "homepage" : "your github pages URL" <---- 추가
}

배포하기

gh-pages -d <배포할 경로>

예를 들어, 아래와 같은 디렉토리가 있다고 하자.

[User]
ㄴ[Project]
	ㄴpackage.json
	ㄴ[src]
    ㄴ[public]
    	ㄴindex.html
        ㄴglobal.css
        ㄴ[build]
        	ㄴ(something files...)

또, 아래와 같은 상황을 가정하자

• 현재 터미널의 위치는 Users
• github pages에 배포해야 할 폴더는 Users/Project/public

그렇다면, 아래와 같이 명령을 입력할 수 있다.

gh-pages -d Project/public

스크립트로 정신건강 챙기기

package.json에 scripts.deploy, scripts.predeploy를 추가한다.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "deploy" : "gh-pages -d public",  <------- 추가
  	"predeploy" : "npm run build"     <------- 추가
  },
  ...
  "devDependencies": {
	...
  }
}

설정이 끝난 뒤에는 아래 명령을 통해 배포할 수 있다.
deploy명령을 내리면, 자동으로 predeploy를 먼저 실행 한 다음 deploy를 실행한다.

npm run deploy

부록 : github pages에 custom domain을 사용하는 경우

일반사항

deploy하는 경로에 CNAME이라는 이름의 파일을 만들고, 내용으로 도메인을 적어넣어야 한다. 그렇지 않으면 deploy할 때마다 github pages setting에서 custom domain설정이 초기화된다.

다시 아래와 같은 디렉토리가 있다고 하자. public디렉토리를 배포하고자 한다면, 그 경로에 CNAME이라는 이름의 파일을 만든다. (확장자 없음)

[User]
ㄴ[Project]
	ㄴpackage.json
    ㄴ[public]
    	ㄴindex.html
        ㄴglobal.css
        ㄴCNAME    <---------- 추가

그리고 내용은 아래와 같이 구성한다.

www.example.com

확인된 케이스

svelte/template, create-react-app으로 프로젝트를 구성한 경우, 두 경우 모두 public이라는 폴더에 CNAME을 만들면 된다.