안녕하세요 호호만두에요
요즘에 vue.js를 공부하고 있는데요
처음에 html, css, js를 이용해서
github page를 만드려고 할때는
index.html을 잘 인식해서 하더라구요
그런데 vue.js로 만든 프로젝트를
github page를 이용해서 띄워보고 싶었는데
안되서 어떻게 해야될지 모르겠어서
찾아보다가 드디어 해결했어요!!
그래서 vue.js로 진행하다가
github page를 이용하여 올리고 싶은신 분들이
또 있을까봐 공유하려고해요!!
그전에 github page란??
Github pages?
github pages는 github repo 저장소의 내용들을
웹페이지로 만들어주는 github에서 무료로 제공해주는 기능이에요
쉽게 말하자면, 무료로 서버를 만들어서 사용할 수 있다는거죠!!
이러한게 있다는것을 저도 안지 얼마되지 않았는데요
정말 좋은것 같아요!!
이를 이용해서 github 블로그를 운영하는 사람들도 있어요
지킬을 이용해서 꾸미고 관리하고 그런것 같은데
해보고는 싶은데 시간이 부족하네요 ㅠㅠ
아직은 vue.js 공부하기만도 바빠서요
그러면 이제 무료 웹 서버 github page에
vue-cli로 만든 프젝트를 올리러 고고~~
vue on github page
우선 저는 그동안 진행해온 vue로 만든 사이트를
github page에 올려보려했어요
뭣도 모르고 모든 파일을 다 푸시햇는데 그럴 필요 없답니다
index.js 속성 바꾸기(빌드 속성 바꾸기)
자신이 진행하는 vue-cli 프로젝트에서
config 폴더의 index.js 파일을 찾아주세요
webpack을 만들었다면 다 있을거에요
index.js 파일에서 밑으로 내리다보면
위와 같은 부분을 볼 수 있어요
비슷하게 생긴 부분이 위에도 잇는데
build안의 속성들을 바꿔주어야해요
여기서 바꿀 부분은 총 세개에요
index
assetsRoot
assetsPublicPath
index와 assetsRoot 부분에서 dist라고 쓰여있는 부분을
docs라고 바꿔주세요
그리고 assetsPublicPath에서 '/'라고 되어있는걸 ''로 바꿔주세요
위와 비교해보시면 바꾼게 보이실거에요
이렇게 하는 이유는 build를 하게되면
기본적으로 vue-cli가 dist 디렉토리를 바라보고 있어서
docs로 수정해야한다고 해요
그러면 기본 설정은 끝났어요!!
vue-cli 프로젝트 빌드하기
cmd창을 키고 자신의 vue-cli 프로젝트 경로로 이동해주세요
저는 MyPage라는 폴더로 이동했어요
이 폴더에 방금 수정한 vue-cli 프로젝트 내용물들이 담겨있어요
이제 빌드를 하면 되요
npm run build 명령을 입력해서
Build complete라고 뜨면 빌드 성공!!
빌드한 docs파일 레파지토리(repository)로 푸시(push)하기
저는 지금 현재 atom editor를 이용하고 있기 때문에
atom 자체에서 바로 푸시했어요
위의 파일들만 push하면 github page로 인식해서
vue-cli로 만들었던거랑 똑같이 나오게되요
build해서 생긴 docs폴더 전부
그리고 최상위 폴더의 index.html
이렇게 2개만 푸시해주면 되요
저는 설명도 넣기 위해서 README.md도 업로드했어요
깃허브(github) 레파지토리(repository) 설정 바꾸기
깃허브 페이지를 만들기 위해서
레파지토리(repository)를 하나 만들어주세요
그리고 설정으로 이동하시면
아래와 같은 화면을 볼 수 있어요
그러면 github page 부분에서
source를 선택할 수 있는데
기서 master branch / docs folder로 선택해주세요
그러면 아까 build할떄 docs로 왜 바꿨는지 감이 오실거에요
그리고 위에 초록색으로 되어있는 부분에 주소가 있는데
거기로 들어가면 만든 웹페이지가 뜬답니다
어디서든 저 주소로 접속할 수 있어요!!
(참고로 새로 push했을때 github page에 반영되는데 delay가 있답니다)
근데 아직 한가지 못한점은 주소부분..!!
다음엔엔 주소도 맞춰서 해보려고해요!!
다들 열공하시고
궁금하신점 있으신 분은 댓글 남겨주세요
그리고 공감부탁드립니다!!