[웹개발] Vue.js, GitHub Pages에서 작동을 안 해요! GitHub Pages 사용법

오늘은 Vue로 개발한 나의 사이트를 GitHub Page에 등록하는 법을 알아볼 것이다.

중간중간 주의할 점을 알려주니 오류가 난 사람도 참고하기 좋을 것이다.

 

참고로 나는 VScode를 사용하니 주의바란다.

 

 

우리가 github pages를 사용하려면 평소에 하던 빌드와는 약간 다른 빌드가 필요하다.

평소에 빌드를 하면 dist 폴더가 생성되었지만, 우리에게 필요한 것은 docs폴더다.

 

따라서 빌드 설정을 바꿔줘야하는데, vue 3.0이상 버전의 사람이라면 vue.config.js 파일을 만들어 관리해준다.

 

제일 밑에 vue.config.js파일이 보인다.

파일 만드는 건 별거없고 그냥 새파일 만들기해서 이름만 vue.config.js로 바꿔주면 된다.

 

이제 vue.config.js 파일에 내용을 채워넣자.

 

publicPath는 위와같이 직접 repository 이름을 명시해 줘도 좋고

 

 

이렇게 비워두면 지 알아서 Path를 찾는다.

 

 

주의할 점은 개인 도메인(어쩌구.com)을 사용했다면 publicPath를 "./"로 해주자. 알아서 못찾는다.

 

놀라지 마시라 vue.config.js의 내용은 저걸로 충분하다.

물론 필요한게 있다면 저기에 여러 설정을 적어둘 수 있지만... 귀찮다.

 

그다음 Ctrl+`을 눌러 터미널을 키고, npm run build를 통해 빌드하자.

그럼 짜잔~ docs 폴더가 생겼다.

 

!주의! dist 폴더가 있다면 지워주자. 괜히 각종 버그만 뿜게 된다.

 

이제 경건한 마음으로 push를 해준다.

어떻게 push하는지 모르겠다면 밑의 글을 참조.

 

poison-dog-do-everything.tistory.com/7

[Git] GitHub와 GitLab, Sourcetree로 연동하고 Push 해보자!

 

성공적으로 push를 마쳤다면 이제 본격적으로 github pages를 설정할 차례이다.

 

먼저 이쁘게 잘 push된 나의 repository를 보면 다음과 같은 화면일 것이다.

 

여기서 위 화면상 중앙 상단의 Settings에 들어간다.

 

 

 

 

짠 Settings페이지이다. 쭉 밑으로 내리자.

 

 

 

밑으로 쭉 내리다보면 GitHub Pages라는 항목이 나오는데 None으로 설정되어 있다.

나의 경우 Custom domain을 설정해 두었는데, 원래 Custom domain은 비어있다. 신경쓰지 말자.

 

저기서 Source의 None을 master로 변경한다.

그리고 중요한게 여기서 끝이 아니라 내가 빌드한 빌드파일인 docs를 선택해줘야한다.

 

 

 

결과적으로 위와같은 모습을 해야한다.

 

나는 여기서 저 망할 docs를 선택하지 않아 1시간을 넘게 헤맸다.

 

이제 깃허브닉네임.github.io/repository명 으로 접속하면 정상적으로 사이트가 나오는 것을 확인할 수 있다.

 

앗 여기서 css가 적용되지 않았다구?!

밑의 글을 확인하자.

 

poison-dog-do-everything.tistory.com/5

[웹개발] GitHub Page에 CSS가 적용되지 않는 문제

 

push후 적용까진 시간이 걸리니 안된다고 바로 코드바꾸고 다시 push하지말고 1~2분정도는 기다려주자.

인터넷이 느리다면 5분까지는 기다려야한다.