githubpage

[웹개발] 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 파일에 내용을 채워..

[웹개발] GitHub Pages에 CSS가 적용되지 않는다..! 그 해결책

포트폴리오 사이트를 만드는데 별안간 css가 적용이 안된다. 다른건 다 적용되는데 나의 경우 여러가지 문제가 복합적으로 있었다. 먼저 원본 코드(index.html)이다. 여기서 는 ./였다. 문제 1. 경로의 문제 github에 Repository의 이름은 MyPortfolio였고, 포트폴리오 사이트 Url은 eden1109.github.io/MyPortfolio였다. 그렇다면 css파일이 index.html과 같은 파일에 있다는 가정하에, 경로가 /MyPortfolio/_font.css 가 되어야한다. 따라서 vue.config.js의 BASE_URL을 /MyPortfolio/ 로 변경하였다. 경로는 /Repository 명/폴더명/어쩌구.css가 되는 것이다. 여기서 폴더가 index.html 기준..