vue-cli방식을 활용한 vue 포트폴리오 사이트 제작및 github 배포하기

https://loy124.github.io/vue-portfolio/

frontend

배포한 포트폴리오 사이트

 

 

배너 이미지 (별속에 떠다니는 느낌을 살려보고자 하였다..) 

 

 

 

Skill 파트 

 

포트폴리오(클릭시 상세 정보가 팝업으로 나타난다)

 

 

vue -cli 3 버전을 활용하여 포트폴리오를 제작및 배포하였습니다.

 

먼저 프로젝트 root 폴더에 vue.config.js 를 생성후 github에 있는 저장소와 publicPath를 일치시켜줍니다

 

그후 npm run build를 실행하여 build 실행 

 

빌드가 되었으면

 

cd dist

git init

git add .

git commit -m "배포하기"

git push -f https://github.com/본인github아이디/저장소이름.git master:gh-pages

해당 명령어를 실행하면 본인의 github저장소의 gh-pages에 branch를 생성해서 배포한 dist를  넣어준다

(재배포시 git push origin --delete 브랜치이름으로 저장소를 날려준 뒤 재 배포)

 

그후  본인의 저장소의 setting에 들어가서 

 

스크롤을 내려

github page쪽의 source를 gh-pages로 설정후

 

배포가 완료되면 아래와 같이 사이트에 대한 주소가 나옵니다.