GitHub Pages로 내 사이트 10분만에 올리기

---

무료 호스팅을 찾다 보면 반드시 만나게 되는 이름이 있습니다. GitHub Pages입니다.

개발자들이 포트폴리오, 프로젝트 데모, 기술 문서를 올리는 데 가장 많이 쓰는 무료 호스팅입니다. 왜 인기 있는지, 어떻게 쓰는지 알아봅니다.

---

GitHub Pages가 뭔가요?

GitHub는 개발자들이 코드를 저장하고 공유하는 플랫폼입니다. GitHub Pages는 거기에 딸린 무료 호스팅 서비스입니다.

코드 저장소에 HTML 파일을 올리면 자동으로 웹사이트가 됩니다.

무료 제공 항목:
✅ HTTPS 자동 적용
✅ 커스텀 도메인 연결 가능
✅ 월 100GB 트래픽
✅ 저장소 용량 1GB
✅ 서브도메인 무료 (username.github.io)

---

준비물

✅ GitHub 계정 (github.com에서 무료 가입)
✅ 올릴 HTML 파일 (AI로 만든 index.html)

---

1단계 - GitHub 가입 (3분)

github.com 접속 → Sign up → 이메일로 가입합니다.

가입할 때 username을 신중하게 정하세요. 나중에 주소가 됩니다.

username이 honggildong 이면
→ honggildong.github.io 가 내 주소

---

2단계 - 저장소 만들기 (2분)

로그인 후 우측 상단 + 버튼 → New repository 클릭

저장소 이름을 아래 형식으로 입력합니다.

username.github.io

본인 username으로 바꿔서 입력하세요. 이 형식이 아니면 메인 페이지가 안 됩니다.

✅ honggildong.github.io
❌ my-website
❌ portfolio

Public 선택 후 Create repository 클릭합니다.

---

3단계 - 파일 올리기 (2분)

저장소 페이지에서 uploading an existing file 링크를 클릭합니다.

index.html 파일을 드래그앤드롭 → 하단 Commit changes 클릭합니다.

이미지 파일이 있다면 같이 올려야 합니다.

---

4단계 - Pages 설정 (1분)

저장소 상단 Settings → 좌측 메뉴 Pages 클릭

Branch 를 main 으로 선택 → Save 클릭

1~2분 기다리면 상단에 이런 메시지가 뜹니다.
"Your site is live at https://honggildong.github.io"

---

5단계 - 확인

주소를 브라우저에 입력하면 내 사이트가 열립니다.

https://honggildong.github.io

---

수정하고 싶을 때

index.html을 수정했으면 저장소에서 기존 파일을 클릭 → 연필 아이콘(Edit) → 붙여넣기 → Commit changes 하면 1~2분 후 자동 반영됩니다.

자주 수정한다면 GitHub Desktop 앱을 쓰면 훨씬 편합니다.

---

React/Vue 결과물 올리기

AI가 만든 단순 HTML이 아니라 React/Vue 프로젝트라면 빌드 후 올려야 합니다. 매번 빌드하기 귀찮으니 자동화합니다.

프로젝트 루트에 아래 파일을 만들어두면 push할 때마다 자동으로 빌드 후 배포됩니다.

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

---

Netlify랑 뭐가 다른가요?

앞서 소개한 Netlify와 비교하면 이렇습니다.

GitHub Pages Netlify

배포 방식	Git 기반	드래그앤드롭 가능
배포 속도	1~2분	30초
트래픽	월 100GB	월 100GB
난이도	약간 복잡	더 쉬움
어울리는 대상	개발자	비개발자 포함 누구나

코딩에 익숙하다면 GitHub Pages, 처음이라면 Netlify가 더 쉽습니다.

---

마치며

GitHub Pages는 한 번 설정해두면 코드를 올리는 것만으로 자동 배포되는 구조라 개발자에게 특히 편합니다. 포트폴리오, 프로젝트 데모, 오픈소스 문서 사이트 용도로 딱 맞습니다.

다음 글에서는 속도가 가장 빠른 무료 호스팅 Cloudflare Pages 를 소개합니다.

---