콘텐츠로 이동

Github page

사용되는 기술

  • 정적 사이트 호스팅 (HTML, CSS, JavaScript만 지원)
  • Jekyll (기본 정적 사이트 생성기)
  • GitHub Actions (자동 배포용)

프로젝트의 개요

GitHub에서 제공하는 무료 정적 호스팅 서비스로, 프론트엔드만 배포 가능합니다. - React/Vue 등은 npm run build 후 생성된 정적 파일들을 업로드 - 메인 저장소는 닉네임.github.io 형태

기본 배포 방법

1. 저장소 설정

저장소명: username.github.io
(예: john123.github.io)

2. Pages 설정

  1. Settings 탭 클릭
  2. 좌측 사이드바에서 Pages 선택
  3. Source: Deploy from a branch 선택
  4. Branch: 원하는 브랜치 선택 (보통 main 또는 gh-pages)
  5. Save 클릭

3. 배포 완료

기본 방법의 한계점

  • 종종 사이트가 꺼짐
  • 주기적으로 접속하여 활성화 필요
  • 수동 업데이트 필요

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 폼 처리, 함수 지원 빌드 시간 제한