GitHub Pages 무료 호스팅 사용하기
멍카 웹페이지 - 3
이은 글입니다.
이번 글에서는 create-react-app으로 생성한 React js 페이지를 Github Pages에 올려봅니다.
GitHub Pages는 GitHub에서 무료로 호스팅을 제공하는 공개 웹페이지이다. github에 올린 소스들을 웹페이지로 띄어주는 것인데, 용량 제한이 없고 개인 도메인도 연결 가능하여 보통 기술 블로그 같은 정적인 페이지로 사용되고 있다.
pages를 만드는 방법은 아래 두 가지이다.
개인 사이트 (User or organization site)
프로젝트 사이트 (Project site)
개인 사이트는 repository를 생성할 때 저장소명을 자신의 계정으로 ex) go-rani.github.io 생성하면 master 브랜치의 내용이 페이지에 보이게 되면서 pages가 생성되고, 프로젝트 사이트는 약간의 설정을 통해 pages를 생성할 수 있다. 지난 글에 이어 우리는 생성한 프로젝트를 pages에 띄어보겠다.
URL 형식은 ex) go-rani.github.io/MeongcaWeb 같이 생성된다.
react-test 폴더에 접근해 gh-pages package를 설치하고
npm install gh-pages --save-dev
설치가 완료되면 react-test 폴더의 package.json 파일을 열어 프로덕션 빌드를 생성하고 GitHub Pages에 배포하기 위한 스크립트를 추가한다.
"homepage": "https://<GitHub-유저명>.github.io/<프로젝트-저장소명>"
"deploy" : "npm run build&&gh-pages -d build"
다시 터미널로 돌아와 react-test 폴더에서 추가 한 명령어를 실행하면 Published가 된다.
npm run deploy
이제 Github > MeongCaWeb repository > Settings 페이지의 GitHub Pages 세션을 확인해보면, 너의 GitHub 페이지 사이트는 현재 gh-pages 브런치로 구축되었다는 문구를 확인할 수 있다.
Your site is published at URL을 클릭하여 local에 생성한 페이지가 노출되는지 확인해보자.
마지막은 잊지 말고 수정사항 커밋하기
git add *
git commit -m "publish it to github pages"
git push
[참고 자료, 이미지 출처]
https://github.com/gitname/react-gh-pages
