Github page
사용되는 기술
- 정적 사이트 호스팅 (HTML, CSS, JavaScript만 지원)
- Jekyll (기본 정적 사이트 생성기)
- GitHub Actions (자동 배포용)
프로젝트의 개요
GitHub에서 제공하는 무료 정적 호스팅 서비스로, 프론트엔드만 배포 가능합니다. - React/Vue 등은 npm run build 후 생성된 정적 파일들을 업로드 - 메인 저장소는 닉네임.github.io 형태
기본 배포 방법
1. 저장소 설정
2. Pages 설정
- Settings 탭 클릭
- 좌측 사이드바에서 Pages 선택
- Source: Deploy from a branch 선택
- Branch: 원하는 브랜치 선택 (보통 main 또는 gh-pages)
- Save 클릭
3. 배포 완료
- 설정 후 10분 정도 대기
- https://username.github.io에서 사이트 확인 가능
기본 방법의 한계점
- 종종 사이트가 꺼짐
- 주기적으로 접속하여 활성화 필요
- 수동 업데이트 필요
GitHub Actions를 통한 자동 배포 (권장)
React 프로젝트 자동 배포 예시
.github/workflows/deploy.yml 파일 생성: yaml
name: Deploy React App to GitHub Pages
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
Pages 설정 변경
- Source: Deploy from a branch → GitHub Actions 선택
| 서비스 | 장점 | 단점 |
|---|---|---|
| GitHub Pages | 무료, 간편, Git 연동 | 정적 사이트만, 빌드 시간 제약 |
| Vercel | 빠른 배포, 많은 프레임워크 지원 | 상용 프로젝트 제한 |
| Netlify | 폼 처리, 함수 지원 | 빌드 시간 제한 |