Github를 이용해 페이지 배포하기 (gh-pages)

Github Pages

• 깃허브를 이용해 웹 사이트를 무료로 호스팅할 수 있는 서비스
• 사용자가 깃허브 레포에 자신의 웹 프로젝트 빌드 결과물을 업로드하면 깃허브가 그를 호스팅한다.
• 일반 사용자는 public 레포에 대해서만 무료 호스팅이 가능하고, private 레포를 호스팅하기 위해선 깃허브 프로 계정이 필요하다.

---

설치

• 아래 커맨드를 입력해 본인의 node.js 프로젝트에 gh-pages 패키지를 설치한다.

npm i gh-pages

• 프로젝트의 package.json에 homepage 항목을 추가한다.

{
   "homepage" : "https://(GitHub ID).github.io/(Repository name)/"
}

• 프로젝트 package.json의 script에 predeploy와 deploy를 추가한다.

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

• 해당 프로젝트를 깃허브 레포에 배포(업로드)한다.

git remote add origin https://github.com/(GitHub ID)/(Repository name).git

• 이제 방금 script에 입력해둔 배포 커맨드를 입력해 배포한다

npm run deploy

• 이제 방금 package.json의 homapage에 설정한 주소로 접속하면 정상적으로 배포되었을 것이다.
• 무료 호스팅이라 적용에 시간이 걸릴 수는 있다.