create-react-app으로 만든 React 프로젝트를 GitHub Pages에 배포해보자!!
1. GitHub 저장소 만들기
자신의 GitHub에서 레파지토리를 만들어준다.
아래사진과 같이 자신이 원하는 레파지토리이름과 설명을 적은 후
Create repository 버튼을 클릭!!
Create repository 버튼 클릭 후 아래의 사진과 같이 화면이 나온다.
프로젝트 터미널 창에 명령어 입력!!
<아래 명령어 설명>
git init - 프로젝트에 git 설치
git add * - 모든파일을 올리기
git commit -m "Comments" - commit 메시지를 작성하는 명령어이다. "" 안에 내가 작성하고자하는 메시지를 간단하게 작성하기!
git remote add origin {저장소 링크} - git 저장소 연결
git push -u origin master - git master로 push (나의 경우 윈도우라서 main으로 시도해봤지만 오류가 나서 master로 해보니 잘 작동하였습니다.)
아래의 사진을 보고 순서대로 작성하라!! 단, 주의사항은 git remote add origin {자신의 레파지토리 링크를 작성하라!!}
push까지 다 완료가 되면 github페이지로 돌아가서 새로고침을 하면 내가 작성한 코드들이 올라와 있습니다.
2. GitHub 페이지 배포하기
-
프로젝트에 gh-pages를 설치해주세요
-
설치가 완료된 후 package.json파일을 열어서 "homepage" 주소를 추가해주세요.
아래사진의 형식은 https:// {사용자 이름}.github.io/{저장소 이름}으로 작성해야 합니다.
어디에 추가하는지 궁금하다면? package.json파일에서 전체코드의 마지막에 추가해주면 된다.(아래사진 참고)
-
그 다음 package.json파일에서 scripts 부분에 deploy, predeploy를 추가하고 저장해주세요.
-
저장후 터미널 창을 열고 npm run deploy를 실행해주세요.
그러면 아래와 같이 deploy가 성공했다고 나옵니다.
-
성공했다면? 본인의 레파지토리에 가서 아래사진 속 노란부분을 클릭해서 확인할 수 있습니다.
-
GitHub Pages 설정이 궁금하다면? Settings에 들어가면 아래사진과 같이 GitHub Pages 부분이 나온다. Check it out here! 버튼을 클릭하면 두번째 사진처럼 GitHub Pages 설정화면이 나온다.
