9단계 — GitHub Pages 무료 호스팅

저장소 = 사이트. 무료 + 무제한 트래픽 + HTTPS 자동. 정적 사이트만 가능하지만 진짜로 무료에서 끝나요.

첫 배포 — 두 가지 길

(a) 가장 단순 — index.html push

mkdir my-site && cd my-site
echo "<h1>Hello GitHub Pages</h1>" > index.html
git init && git add . && git commit -m "first"

# GitHub 에 my-site 저장소 만들고 push
git remote add origin git@github.com:USER/my-site.git
git push -u origin main

GitHub UI 에서 Settings → Pages → Source: main / / (root). 1~2분 후 https://USER.github.io/my-site/ 로 접근.

(b) Actions 빌드 후 배포 (권장)

Vite/Astro/Next.js 같은 SSG 사용. .github/workflows/deploy.yml:

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment: github-pages
    steps:
      - uses: actions/deploy-pages@v4

GitHub UI 에서 Settings → Pages → Source: GitHub Actions 선택.

URL 패턴 — base path 함정

저장소 종류	URL	base path
<user>.github.io	https://<user>.github.io/	/
<user>/<repo>	https://<user>.github.io/<repo>/	/<repo>

Project site 는 /<repo> prefix. Vite 의 base, Next 의 basePath 설정 필수.

// vite.config.ts
export default defineConfig({
  base: '/<repo>/',  // user site 면 '/'
  plugins: [react()],
});

// next.config.ts (Static Export)
export default {
  output: 'export',
  basePath: '/<repo>',
  images: { unoptimized: true },
};

커스텀 도메인 — 무료 HTTPS

1. 저장소 루트에 CNAME 파일 (한 줄: example.com).
2. DNS 설정:
   • apex (example.com) → A 레코드 4개 (185.199.108.153 · .109.153 · .110.153 · .111.153)
   • www → CNAME <user>.github.io
3. UI 에서 Enforce HTTPS 체크. Let's Encrypt 자동 발급.

한계 — 무엇을 할 수 없는가

• 백엔드 코드 없음 — Express · FastAPI 불가. SSR 도 불가 (Static Export 만).
• DB 없음 — 빌드 시점 정적 JSON 또는 외부 API 만.
• Form 처리 — Formspree · Cloudflare Forms 같은 외부 서비스 위임.
• 트래픽 100GB/월 soft limit — 일반 사이드 프로젝트는 도달하지 않음.

Replit / Vercel / Netlify 와 비교

측면	GitHub Pages	Replit Static	Vercel	Netlify
비용	무료 무제한	무료 1 deployment	hobby 100GB	starter 100GB
Custom domain (무료)	✓	✗ (Core)	✓	✓
HTTPS 자동	✓	✓	✓	✓
SSR	✗	일부	✓	✓
Preview deployment	✗	✗	✓	✓
학습 곡선	보통	낮음	낮음	낮음

오픈소스 문서 · 포트폴리오 · 블로그 → GitHub Pages. SSR · 동적 → Vercel/Netlify.

직접 해 보기

getting-started 의 Vite React 앱을 GitHub 에 push → Actions deploy 로 <user>.github.io/<repo> 띄워 보세요. 끝나면 저장소를 archive 하거나 삭제.

더 깊이

• GitHub Pages 노트
• Replit 노트 — 동적 백엔드가 필요할 때

다음 단계

10단계에서는 오브젝트 스토리지 로 사용자 파일을 어디 두고 누구에게 보일지 — 버킷 · 파일 RLS · 서명 URL 을 손으로 익혀요.