gh-pages로 Github에 배포하기

이재찬·2022년 8월 23일
0

Github-Pages

목록 보기
1/2
post-thumbnail
Vite와 Vue3로 진행 중인 프로젝트의 Github Repository를 무료로 배포해보자.

Github Pages

Github Pages란 Github에서 제공하는 Static Webpage Hosting Service로, 간단한 사이트를 무료로 배포할 수 있게 도와주는 기능이다.

gh-pages

Github에

gh-pages

브랜치로 자동 배포해주는 라이브러리

사용법

# 설치

$ pnpm install -D gh-pagaes
# package.json

"scripts": {
    ...,
    deploy: "gh-pages -d dist" // dist, public, build, ...
}
위와 같이 설정을 하였다면, 각자 사용하는 프레임워크에서

build

를 진행한 후

pnpm run deploy

를 실행한다.

> gh-pages -d dist

Published
이상 없이 위와 같은 문구가 나왔다면, github repository에서

gh-pages

라는 브랜치가 생성되었는지, dist 폴더가 정상적으로 push 되었는지 확인한다.
여기까지 진행이 되었으면, Github Respository Setting에 들어가서 Pages 메뉴를 클릭한다.

성공적으로 배포가 되었다면 아래와 같은 화면을 만날 수 있을 것이다.

404 Error

  • 공개범위가 public이 아닐 경우
  • github-pages는 기본적으로 public일 경우에만 무료로 서비스를 제공한다. github pro 혹은 github enterprise cloud 등을 이용한다면 private로도 github-pages를 이용 가능하다.
  • base index가 index.html이 아닐 경우
  • 사용 중인 프레임워크의 설정(webpack, rollup, ...) 등에서 route 설정을 잘 해준다.

ETC

*

Github Actions

를 이용하여 별도의 deploy 과정 없이 push가 일어날 때 마다 자동으로 배포되게끔 설정할 수도 있다.
profile
Jr.Frontend Developer / Vue.js Developer

0개의 댓글