시작에 앞서
이력서를 무료로 호스팅 가능하고 형상관리까지 할 수 있다...?
하지만 쉽지않다 ㅎㅎ
필자는 노션으로 이력서를 작성 했었지만, 이력서를 웹사이트 개발하여 호스팅하고 싶어졌다.
물론 노션도 공유 설정을 하면 다른 사람도 웹사이트로 접속하여 열람할 수 있다.
하지만 주소가 너무 이쁘지 않다... 외워서 들어가는 것은 절대 불가능하다!
따라서 링크를 가지고 있지 않다면 접속하기가 힘들다.
만약 Github Pages와 함께라면?
바로 이거지 ㅎㅎㅎ 무료에 형상관리까지 할 수 있다는 점!
그럼 이제 React로 이력서 만들어서 Github Pages로 호스팅 하는 방법을 배워보자.
Github 레파지토리 생성
Github에 접속하여 레파지토리를 새로 생성한다.
필자는 위와 같이 생성하였다.
해당 레파지토리에서는 원하는 브랜치에 형상관리 하고, gh-pages 브랜치에 호스팅할 결과물을 올리게 된다.
gh-pages 브랜치는 React에서 라이브러리를 사용하여 배포하면 자동으로 생기게 되니 신경쓸필요 없다.
필자는 main 브랜치에서 작업하였다.
React 프로젝트 생성
우선 React로 이력서를 만들거라 React 프로젝트를 생성하여 만들어 놓은 Github 레파지토리와 연동해야 한다.
공식문서를 참고하여 React 프로젝트를 생성하자.
npx create-react-app 프로젝트명
프로젝트를 생성 완료했으면, npm start로 로컬에 띄워서 잘 동작하나 확인한다.
npm start
포트를 기본으로 설정한 경우 http://localhost:3000 에 접속하여같은 화면이 출력되면 성공!
이제 만들어놓은 레파지토리와 생성한 React 프로젝트를 연동한다. 이 부분은 생략.
gh-pages 설치 & 배포
다음 명령어를 입력하여 React를 Github Pages로 배포하기 위한 라이브러리를 설치한다.
npm install gh-pages --save-dev
설치를 완료했다면 package.json을 수정해주자.
scripts를 다음과 같이 수정한다.
"predeploy": "npm run build",
"deploy": "gh-pages -d build"이 두개를 추가하면 된다.
그리고 hompage를 추가하면 된다!
hompage 명명 규칙은 <Github 유저명>.github.io/<프로젝트 저장소명> 이니까 참고하자.
이제 모든 준비는 끝이 났고, 다음 명령어만 입력하면 React로 만든 이력서를 hompage 주소로 배포할 수 있다.
npm run deploy
명령어 입력 후 위와 같이 Published가 나오면 배포에 성공한 것이다.
이제 배포한 이력서에 접속해보자.
바로 접속이 안될 수 있다. 404 에러가 뜨면 조금만 기다렸다가 다시 접속해보자!
정상적으로 배포된 것을 확인할 수 있다.
이제 본인의 입맛대로 이력서를 작성한 뒤 다시 명령어를 입력하여 배포하면 된다.
기다려도 안되는데요...?
호스팅에 실패한 경우 다음 두 가지를 확인해 보자.
우선 gh-pages 브랜치가 정상적으로 생성되었는지 확인해 본다.
배포가 정상적으로 성공하였으면 해당 브랜치가 생성되어 있을 것이다.
그 다음으로는 설정 -> Pages의 Source가 정상적으로 매핑 되어있나 확인한다.
위와 같이 되어있어야 한다.
필자가 배포한 이력서
