GitHub Pages로 웹사이트를 무료로 배포하는 방법

GitHub Pages는 GitHub에서 제공하는 정적 웹사이트 호스팅 서비스로, HTML, CSS, JavaScript 등으로 만든 정적 웹사이트 또는 클라이언트 사이드 애플리케이션을 무료로 배포할 수 있습니다. GitHub Pages를 사용하면 별도의 서버나 호스팅 서비스를 설정하지 않고도 간편하게 웹사이트를 온라인에 공개할 수 있습니다.

사용 예시

• 리액트 애플리케이션: React로 만든 클라이언트 사이드 애플리케이션
• 포트폴리오 사이트: HTML, CSS, JS 파일로 구성된 개인 포트폴리오
• 문서 또는 블로그: 정적 페이지로 구성된 개인 블로그나 기술 문서

1. GitHub Pages 설정 요건

• GitHub 계정이 필요합니다.
• 배포하려는 웹 애플리케이션이 정적 파일로 이루어져 있어야 합니다.
• 리포지토리가 공개되어 있어야 하며, 개인용 또는 비공개 리포지토리에서는 GitHub Pages를 지원하지 않습니다.

2. GitHub Pages 배포 준비하기

1. 리포지토리 생성

GitHub에서 새 리포지토리를 만들고, 코드를 푸시합니다.

 

2. 프로젝트 설정

package.json 파일의 homepage 필드를 GitHub Pages URL로 설정합니다.

{
  "homepage": "https://[username].github.io/[repository-name]"
}

리액트 프로젝트라면, react-router-dom을 사용하는 경우 HashRouter를 사용해 라우팅 문제를 피할 수 있습니다.

 

3. gh-pages 설치

GitHub Pages에 배포하기 위해 gh-pages 패키지를 사용합니다.

npm install --save gh-pages

 

4. 배포 스크립트 설정

package.json에 predeploy와 deploy 스크립트를 추가합니다.

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

3. GitHub Pages 배포하기

1. 프로젝트 빌드 및 배포

• 다음 명령어를 실행하여 빌드하고 배포합니다.

npm run deploy

2. GitHub Pages 설정

• 리포지토리의 Settings > Pages에서 GitHub Pages 섹션으로 이동합니다.
• Source를 gh-pages 브랜치로 설정하면 배포가 완료됩니다.

3. 사이트 접속

• GitHub Pages URL로 접속하여 웹사이트가 정상적으로 배포되었는지 확인하세요.
• URL: https://[username].github.io/[repository-name]

주의 사항

• 비공개 리포지토리는 GitHub Pages에서 호스팅되지 않습니다.

GitHub Pages를 사용하면 별도의 서버 없이 쉽게 정적 웹사이트를 배포할 수 있습니다. 클라이언트 사이드 애플리케이션, 포트폴리오, 블로그, 문서 등을 무료로 배포해보세요.