1. new repository를 선택해서 깃허브 저장소를 생성한다.
● 로컬 앱과 저장소 연결
create repository를 누르면 이렇게 command line 이 나타난다.
이 command Line을 모두 복사하여 visual studio의 터미널에 붙여넣기 해준뒤 실행시켜준다.
그리고 레파지토리를 새로고침해서 확인해보면 이렇게 readme 파일이 올라간 것을 확인 할 수 있다.
< 설명 >
작업 디렉토리 상의 모든 변경 내용을 스테이징 영역에 추가
: git add .
스테이징 영역에 있는 소스 코드를 로컬 저장소에 간단한 메시지와 함께 저장
: git commit -m "메세지"
원래는 자동으로 master 브랜치가 설정되지만, 따로 main 브랜치를 설정해 이용
: git branch -M main
로컬 깃 저장소와 깃 허브의 리모트 저장소를 연결
: git remote add origin https://github.com/아이디명/레파지토리명.git
로컬 깃 저장소에 있는 소스 코드를 깃 허브 저장소로 푸시
: git push -u origin main
< git 과정 >
● gh-pages 모듈 설치
깃허브 페이지 라는 것을 이용해서 배포를 할 껀데 그 때 이용하는 것이 깃허브 모듈이다.
개발환경(development)을 위한 모듈 설치를 해준다.
npm install gh-pages --save-dev
위의 명령어를 터미널창에 입력한 뒤 엔터를 눌러준다.
그러면 왼쪽 사이드바의 package.json에 들어가서 맨 밑에 확인해보면 devDependencies가 생긴 것을 확인 할 수 있다.
● 홈페이지 url 작성
package.json 의 맨 위에 homepage를 작성해준다.
http://{깃허브 유저 이름}.github.io/{저장소이름}/
● 배포를 위한 script 추가
그리고 package.json에 script 부분에 predeply와 deploy를 작성해준다.
● deploy 시작!
npm run build를 터미널창에서 먼저 해줘서 파일들을 빌드해준다.
이렇게 빌드가 끝나면 왼쪽 사이드바에서 build 폴더가 생성된 것을 확인할 수 있다.
그리고 터미널창에 run deploy 로 배포를 해준다.
(위의 스크립트를 작성하면 ctril+s로 저장해줘야 밑의 명령어가 성공적으로 실행된다.)
npm run deploy
이렇게 맨 밑에 Published가 나오면 성공한 것이다.
● 배포 확인!
1. 위에서 작성한 homepage 주소를 바로 입력해서 확인해도 되고
2. 깃허브로 가서 해당 레파지토리의 브랜치를 확인해보면 gh-pages라는 브랜치가 생성된 것을 확인할 수 있는데
이 브랜치로 이동하면 배포한 파일들이 있는 것을 확인 할 수 있다.
해당 브랜치로 이동한 뒤 상단바의 settings로 들어가 왼쪽 사이드바의 pages를 누르면
Your site is live at 배포주소 이렇게 나오는데 이 주소를 누르면 배포한 틱택토를 확인 할 수 있다.
만약 수정 할 것이 생기면 수정을 한 뒤 위에서 한 것을 모두 따라하면 수정본이 배포가 된다.
github 명령어는 add . 랑 git commit -m "", git push origin 하면 됨 (아마?)
1. 수정하기
2. 코드 수정 후 버전 관리 : git add .
git commit -m ""
git push
3. 빌드 다시하기 : npm run build
4. 배포 다시하기 : npm run deploy