vue.js 를 github page에 연동하기, 깃허브 페이지 만드는법

안녕하세요 호호만두에요

요즘에 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가 있답니다)

근데 아직 한가지 못한점은 주소부분..!!

다음엔엔 주소도 맞춰서 해보려고해요!!

다들 열공하시고

궁금하신점 있으신 분은 댓글 남겨주세요

그리고 공감부탁드립니다!!