포트폴리오 사이트나 기술 블로그를 만들고 싶은데 호스팅 비용이 부담스럽다면 GitHub Pages가 답이다. 무료에다 HTTPS도 지원하고, Git push만 하면 자동으로 배포된다. 나도 처음 기술 블로그를 GitHub Pages로 시작했는데, 트래픽이 꽤 나올 때까지 문제없이 잘 버텨줬다.

저장소 만들기

GitHub에서 새 저장소를 만든다. 두 가지 방식이 있다:

  1. 사용자 사이트: 저장소 이름을 username.github.io로 만들면 https://username.github.io로 접속
  2. 프로젝트 사이트: 아무 이름으로 만들면 https://username.github.io/repo-name으로 접속

개인 블로그라면 사용자 사이트가 깔끔하다.

mkdir my-site && cd my-site
git init
git remote add origin https://github.com/username/username.github.io.git

기본 페이지 만들기

간단한 index.html부터 시작하자:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 사이트</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>안녕하세요</h1>
    <p>GitHub Pages로 만든 사이트입니다.</p>
</body>
</html>

push하면 바로 반영된다:

git add .
git commit -m "first page"
git push origin main

GitHub Pages 활성화

저장소 Settings → Pages로 가서:

  1. Source를 “Deploy from a branch"로 선택
  2. Branch를 main, 폴더를 / (root) 선택
  3. Save

1~2분 후에 https://username.github.io로 접속하면 페이지가 보인다.

커스텀 도메인 연결

자기 도메인을 쓰고 싶으면 DNS 설정이 필요하다. 도메인 관리 패널에서:

# A 레코드 (apex 도메인)
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

# 또는 CNAME (서브도메인)
www → username.github.io

그리고 저장소 루트에 CNAME 파일을 만든다:

example.com

Settings → Pages에서 Custom domain에 도메인을 입력하고 “Enforce HTTPS"를 체크하면 된다. DNS 전파에 시간이 좀 걸리는데, 보통 몇 분에서 길면 24시간 정도다.

GitHub Actions로 자동 빌드

정적 사이트 생성기(Hugo, Jekyll, Next.js 등)를 쓴다면 GitHub Actions로 빌드 자동화가 가능하다. .github/workflows/deploy.yml을 만든다:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install & Build
        run: |
          npm ci
          npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

push할 때마다 자동으로 빌드해서 gh-pages 브랜치에 배포한다. Settings에서 Pages 소스를 gh-pages 브랜치로 바꿔주면 된다.

404 페이지 커스텀

GitHub Pages는 404.html 파일을 자동으로 인식한다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>페이지를 찾을 수 없습니다</title>
</head>
<body>
    <h1>404</h1>
    <p>요청하신 페이지가 존재하지 않습니다.</p>
    <a href="/">홈으로 돌아가기</a>
</body>
</html>

제한사항

알아두면 좋은 제한:

  • 저장소 크기 1GB 권장 (넘어도 되긴 하지만)
  • 사이트 크기 1GB 제한
  • 월 대역폭 100GB soft limit
  • 시간당 빌드 10회 제한
  • 서버사이드 코드 실행 불가 (정적 파일만)

대부분의 개인 사이트나 블로그에서는 이 제한에 걸릴 일이 없다. 무료 호스팅치고 이 정도면 훌륭하다. 처음 시작하기에 이만한 게 없고, 나중에 트래픽이 늘면 Cloudflare Pages나 Vercel로 옮기면 된다.