VueJS & GitHub IO 활용하여 나만의 페이지 만들기

vuejs 를 사용하여 github io를 통해 나만의 페이지를 만드려고 합니다.
SPA(Single Page Application) 으로 만들 예정입니다.
 
설치 환경
- Mac OS (Mac Silicon)
 
1. github 저장소 생성 및 설정
1-1. public 저장소로 생성해야 합니다 (private으로 하면 웹페이지 접근이 불가합니다.)

1-2. 생성 후 해당 저장소로 진입 후 Settings > Pages 로 진입하여 Branch 항목에서 아래와 같이 설정 후 저장해줍니다

 
2. 로컬에서 vuejs 설치 및 설정하기
2-1. nodejs 설치 : node 홈페이지 접속 후 자신의 os 환경에 맞는 installer 를 다운로드 받아 설치
- 설치가 완료 된 후 node -v 확인하면 아래와 같이 확인됩니다.
- node js 버전 업데이트 : npm install -g npm

2-2. vue & vue/cli 설치
- npm install -g vue
- npm install -g @vue/cli
- vue 버전 확인 : vue --version
 
2-3. 프로젝트 생성
- vue project {folder name} ex) vue project vue_spa
- 생성 후 npm run serve 실행하면 아래와 같이 확인

2-4. vue 소스코드를 웹에 빌드하기 위한 설정
- vue.config.js 파일에 내용 추가 (root 디렉토리에 생성)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    outputDir:'docs', // github pages 메뉴에서 설정 한 폴더명
    publicPath:'/buchet', // github io url의 경로정보
    lintOnSave:false // eslint 실행 여부
})

2-5. build 하기
- npm run build 를 하게 되면 vue 소스코드를 수정 한 화면들이 있다면 docs > css,js 폴더등에 새로운 파일들이 생성됩니다.
- build 명령어 실행 후 화면은 아래와 같습니다.

3. github 저장소 연동
3-1. github 저장소 생서 시 처음에 제공되는 명령어대로 실행

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin {저장소url}
git push -u origin main

4. github io url 확인
4-1. github 저장소에 push를 진행하면 pages 설정 후 자동으로 생성되는 Actions 메뉴의 build workflow가 실행됩니다.

4-2. io url 확인은 pages 메뉴에 접속하면 GitHub Pages 영역에서 확인 가능합니다.

 
초기설정은 몇년전에 진행해서 빠진 부분들이 많을것같은데.. 혹시라도 댓글로 문의해주시면 최선을 다해서 답변 드리겠습니다.
다시 vue spa 개발을 하고 있는데 개발 중 알게 된 tailwind css , fontawesome 등 설치 및 사용방법 관련해서도 글을 남길 예정입니다.
 
감사합니다.