Github pages로 정적 웹 무료 호스팅하기

Github pages를 사용하여, React로 제작한 정적 웹을 무료로 호스팅하는 방법을 정리해보려고 한다.

 

---

 

Github pages 설정

(https://pages.github.com/ 참고)

 

 

GitHub 리포지토리의 HTML, CSS, JavaScript 파일을 빌드 및 실행하여 웹 사이트를 게시하는 정적 사이트 호스팅 서비스이다.
게시된 사이트는 기본적으로 github.io 도메인을 갖는다.

 

 

먼저 JS 프로젝트에 gh-pages를 설치한다.

npm install gh-pages --save-dev

 

 

package.json에 홈페이지와 배포 스크립트를 추가한다.

"homepage": "http://사용자이름.github.io/저장소이름",
"scripts": {
  "deploy": "gh-pages -d build"  // 여기서 build는 배포될 폴더명를 가리킴
}

 

그리고 deploy 스크립트를 실행하여 빌드 및 배포해보자!

npm run deploy

 

 

실행 후 Github Repository의 Branch 목록을 보면 gh-pages라는 새로운 브랜치가 보일 것이다.

 

 

 

이제 Github Repository > Settings > Pages로 이동한다.

여기서 Github Pages로 빌드 및 배포할 브랜치로 gh-pages를 지정해줄 것이다.

 

 

Visit site를 클릭하여 페이지로 바로 이동할 수도 있다.

 

생성된 홈페이지는 https://사용자명.github.io/저장소명 이 기본이며, 도메인을 구입하여 변경할 수도 있다.