몇 주 전부터 만들었던 프로젝트를 github을 이용하여 무료웹사이트로 배포하고 싶었는데 어떻게 해야할지! 고민이 많았다.. 아무리 인터넷을 찾아도 접근하기가 어려웠다.
드디어! 오늘 공부중에 우연히 알게 되었다ㅋ
* 구글에 찾아보면 여기저기 설명이 잘 되어있는곳이 있지만, 개인적으로 너무 길이 길고,, 따라하다가 안되는 결말을 맞이한 분이라면 꼭 이 글이 도움이 되었으면 좋겠습니다. (최대한 짧고 핵심만 요약해서 올림)
👏 중간 중간 설명은 안 읽어도 됨. 그냥숫자옆보라색 글씨만 확실하게 입력! 👏
👇 START 👇
0. 프로젝트가 완성되었다는 가정 하에 시작합니다. ( '비쥬얼 스튜디오 코드' 프로그램 기준)
1. 터미널 ( 새 터미널 클릭) 을 엽니다.
2. npm i gh-pages 를 입력후 엔터! //(여기서 i 는 install 설치를 의미. i 대신 install을 쳐도 됩니다.) -. gh -pages를 설치하는 과정인데.. 설명하자면 내가 github에 업로드 하는것을 허가해주는 모듈이다.(몰라도 됨) - gh-pages는 우리의 웹사이트를 github의 github page 도메인에 나타나게 해준다. - github는 우리에게 무료 웹사이트를 제공함 (ex: static 웹사이트, html, css , js 웹사이트 등..) -일반적으로 동작하는 방식은 github에서 우리의 project 이름을 가져오는 방식임.
3. 프로젝트의 정확한 이름을 체크하기위해 git remote -v 를 입력하고 엔터! (띄어 쓰기 주의)
4.https://couchcoding.github.io/paint.js 가 나의 프로젝트 사이트가 될 것이다. (username 부분을 couchcoding 으로 예시를 들어본다면) <--위 사진 참고! (하지만 아래와 같이 404 에러 하면이 뜰 것이다. 왜냐하면 우리는 아직 아무것도 업로드 하지 않았기 때문!)
5. package.JSON 으로 가서 home page를 추가한다. (필수!!!)
- . 우리가 앞서 설치했던 gh - pages 가 동작하는데 필요함 예시 ) https://couchcoding.github.io/paint.js 를 추가할거임. https:// {your github username}.github.io/{the name of your project in github} <== 이 형식에 대입하시오.
-> 프로젝트 이름은 github에 있는 내 프로젝트 이름을 적으면 된다.(소문자인지 확인하기)
6.package.json 파일에서 조금만 스크롤해서 찾아보면 scripts 가 있다. 거기에다가 아래 사진과 같이deploy 와 predeploy 를 추가해주자!
- deploy 는 build 폴더를 upload 함 우리가 build 폴더를 얻는 방법은 npm run build 를 실행시키는거임. - deploy를 먼저 호출하면, predeploy가 자동적으로 실행됨. pre (이전)의 뜻 그대로 먼저 실행되는듯? ㅇㅇ
7. npm run build 를 터미널에 입력후 엔터!
그러면 왼쪽 카테고리에 보면 build 폴더가 생성됨.
8. npm run deploy 를 터미널에 입력후 엔터!
9. 끝!!!!!!!!!!!!!!! 그럼 아까 위에서 언급한 그 홈페이지주소 <-- package.JSON 파일에 hompage 추가한 그 주소!!! 를 인터넷 주소창에 입력후 들어가보면 프로젝트 웹 페이지가 생성되었음을 확인 할 수 있다. https://{your github username}.github.io/{the name of your project in github}/ <-- 이 형식임
