웹사이트를 코딩했다면 이제는 배포(deploy)해야 합니다.
로컬에서 만든 프로젝트를 인터넷에 공개하는 과정이 바로 배포인데,
무료 배포 플랫폼 중 대표적인 것이 Netlify와 GitHub Pages입니다.
이번 글에서는 두 플랫폼을 비교하고, 실제 배포 방법까지 정리해 드립니다.
배포란 무엇인가요?
- 코딩 완료된 웹사이트를 인터넷에 올려 누구나 접근 가능하게 만드는 과정
- HTML, CSS, JS 파일 또는 정적 사이트 프레임워크를 서버에 업로드
💡 정적 배포 플랫폼은 서버 설정 없이 빠르고 쉽게 배포할 수 있는 방식입니다.
GitHub Pages 소개
| 항목 | 내용 |
|——|——|
| 주소 | https://사용자명.github.io
| 설치 | GitHub 계정만 있으면 OK
| 사용 방식 | GitHub 저장소 → Settings → Pages → 브랜치 선택
| 지원 | 정적 사이트 (HTML, React, Vue – 빌드 후 파일만 가능)
✅ 배포 순서
- GitHub에 코드 업로드
- Settings > Pages > Branch 선택 (보통
main) index.html파일이 root에 위치해야 함- 몇 분 뒤 자동 배포 완료
🧩 custom domain 연결도 무료로 가능하며, HTTPS 기본 제공
Netlify 소개
| 항목 | 내용 |
|——|——|
| 주소 | 랜덤 도메인 (keen-sunset-123.netlify.app) 제공
| 특징 | GitHub 연동만으로 자동 배포, CI/CD 내장
| 추가 기능 | 환경변수, 양식(form) 처리, 서버리스 함수 지원
| 빌드 옵션 | Gatsby, Next.js, React 등 다양한 프레임워크 지원
✅ 배포 순서
- Netlify 계정 생성 → GitHub 계정 연동
- “New site from Git” 클릭
- 저장소 선택 → 빌드 커맨드 및 디렉토리 설정
- 자동 배포
🖼️ ALT 태그 위치 예시:
GitHub Pages vs Netlify 비교 정리
| 항목 | GitHub Pages | Netlify |
|——|—————|———|
| 배포 난이도 | 간단함 | 매우 간단함 (UI 중심) |
| 도메인 설정 | GitHub 설정 필요 | UI로 쉬움 |
| 빌드 자동화 | 불가 | 지원 |
| 서버리스 기능 | 미지원 | 지원 |
| 추천 대상 | 입문자, 정적 페이지 | 실무형 프로젝트, React 등 SPA
커스텀 도메인 연결 팁
- GitHub Pages: DNS 설정 직접 입력 필요
- Netlify: 자동 인증서 발급(Let’s Encrypt), DNS 자동 설정
🔐 두 플랫폼 모두 HTTPS를 기본 제공하여 보안 걱정 없음
마무리
웹사이트를 단순히 만들기만 하면 아무도 못 봅니다.
배포까지 완료해야 진짜 끝!
GitHub Pages는 정적 웹페이지에, Netlify는 프론트엔드 프레임워크 기반 프로젝트에 적합합니다.
오늘 만든 페이지, 오늘 배포해보세요!
🔎 다음 포스팅 주제 추천
→ 6번: 나만의 포트폴리오 웹사이트 만들기
→ 40번: 깃허브 레포지토리 관리법과 협업 팁
참고자료
- https://pages.github.com/
- https://www.netlify.com/