gh-page에 VuePress를 deploy할 때 template 깨짐 에러 해결

 

 

VuePress를 사용하여 gh-pages에 블로그를 deployment 하는 과정에서 

3개의 검정색 정사각형이 나타나며, VuePress의 기본 template이 깨지는 현상이 있었다.

sidebar-button을 가리키는 div tag에 생긴 에러였다. 

 

이게 local에서 vuepress dev로 localhost 포트를 열어서 확인할 때는 괜찮은데, 

github에 deploy했을 때 깨지는 것이어서 구글링하며

뭐가 잘못됐는지 확인하려고 쓸데없이 엄청 커밋을 많이 했다.

---

 

해결법은 .vuepress 폴더 아래의 config.js에 아래 그림과 같이

 해당 프로젝트의 github에 저장소에 해당하는 이름을

 

base : '/<repository>/'

 

이렇게 추가해주면 해결된다.