GitHub pages로 무료 호스팅/배포/Vite 오류 해결

"정적 페이지"라면 GitHub pages로 무료 호스팅을 이용할 수 있다.

특별히 공부할 것이 없어서 쉽게 이용할 수 있으니, 초보에게 추천한다.

또, 해당 브랜치에 푸시를 하면 자동으로 웹사이트 내용이 업데이트 되므로 편리하다.

 

 

완성한 웹사이트 코드를 우선 빌드해둔다.

 

 

1. GitHub에서 배포할 코드를 올릴 repository를 새로 만든다.

이 때, Configuration > Choose visibility 는 "Public"으로 설정한다. 

 

 만약 이미 만들어서 사용하고 있던 repository를 사용한다면,

 메뉴에서 Settings > General 페이지의 가장 하단 Danger Zone에서 Change repository visibility를 수정한다.

 

 

2. Settings > Pages 페이지에서 배포한 브랜치를 선택한 후 "Save"를 클릭한다.

 

GitHub Pages는 아래 위치를 진입 위치로 인식한다.

- 사용자가 설정한 브랜치(ex. main) :  "/(root)", "/docs" 위치
- ph-pages 브랜치 : "/(root)"

(ph-pages에 대해서는 아래에서 설명)
그리고 해당 위치의 "README.md" 파일과 "index.html" 파일을 진입 파일로 인식한다.

 

 

그럼 같은 페이지에 이렇게 주소가 생긴다.
개인이 가진 도메인이 있으면 하단에서 해당 도메인으로 변경할 수도 있다.

 

 

3. Action > All workflow에서 해당 페이지의 빌드 및 배포 상황을 볼 수 있다.

배포되는데에는 약 30초~1분 정도 걸린다.

 

끝.

 

 

문제 상황

 

그런데 이와 똑같이 했는데, 배포된 페이지에서 아무것도 보이지 않는 상황이 발생.

(하얀 페이지만 나옴)

 

 

원인 및 해결 방안

 

배포한 프로젝트는 Vite를 이용하여 생성하고 React를 이용하여 작성한 프로젝트였다.

그런데 Vite는 빌드 시 일반적으로 적용되는 위치인 '/build'가 아닌 '/dist'에 위치에 파일이 저장된다.

이를 GitHub pages가 인식하지 못하는 것이다.

 

이를 해결하기 위해 여러가지 방법이 있다.

우선 vite.config.js 파일에 base 설정을 추가한다. 값은 레포지토리명으로 한다.

 

 

1. 빌드 후 "/dist"의 파일은 "/docs"로 옮겨 저장한다.
수정사항이 있어 빌드할 때마다 계속 반복해야 하는 작업이라 번거로울 수 있다.

 

2. gh-pages 패키지를 설치한다.

Vite, Vue 등에서 자주 사용하는 방법이다.

 

1) 우선 터미널에 명령어를 입력하여 gh-pages를 설치한다.

npm install --save-dev gh-pages

 

2) package.jason에 아래 스크립트를 추가한다.

"scripts": {
  "deploy": "gh-pages -d dist"
},
"homepage": "https://your-username.github.io/your-repo-name"

 

3. 이후 기존과 동일하게 프로젝트를 "빌드"한 후, deploy 스크립트를 아래와 같이 실행한다.

npm run deploy

 

이후 다시 사이트 주소를 들어가면 정상적으로 웹사이트가 나오는 것을 볼 수 있다.