Vercel / GitHub Pages로 웹사이트 배포하기 (초보자 정리)

오늘은 내가 만든 HTML 웹페이지를 실제 인터넷에 배포하는 방법을 배웠다.
생각보다 어렵지 않았고, 자동 배포까지 연결되니까 개발 흐름이 훨씬 편해진 느낌이었다.

1. 무료 배포 플랫폼

대표적으로 아래 두 가지를 사용한다.

Vercel
Netlify

두 플랫폼 모두 정적 웹사이트(HTML, CSS, JS) 기준으로 무료 배포 가능

2. Vercel 배포 과정

1) 회원가입 & GitHub 연동

이름 입력 후 가입 진행
GitHub 계정 연동
이메일 인증 코드 입력 → 연동 완료

핵심: GitHub와 연결하면 자동 배포 가능

2)프로젝트 Import

Import Git Repository 화면 진입
내가 GitHub에 올린 프로젝트 리스트 확인
원하는 프로젝트에서 Import 클릭

3) 배포 설정

Application Preset → Other 선택
Deploy 클릭

HTML 프로젝트는 별도 설정 없이 바로 가능

4) 배포 완료

빌드 진행 후 완료
Continue to Dashboard 클릭

✔ 이 상태 = 배포 완료 + 자동 재배포 연결 상태

5)배포 주소 확인

상단 Domains 영역에서 URL 확인

이 주소가 내 웹사이트 주소!

3. 자동 배포 구조 (중요 ★)

코드 수정 → GitHub 업로드(push) → 자동 배포

즉, 파일 수정만 하면 사이트가 자동 업데이트됨

4. 추가 프로젝트 생성

좌측 상단 Projects
Add New Project

여러 개 사이트 운영 가능

5. Vercel 무료 플랜 주의사항

완전 무제한 무료 ❌
일정 크레딧(약 $5) 제공
사용량 제한 존재

개인 프로젝트 / 포트폴리오용으로는 충분

6. 지원/비지원 기능

✔ 가능한 것

HTML / CSS / JavaScript
정적 사이트
간단한 프론트엔드 프로젝트

❌ 제한 있음

Python
PHP
일부 서버 기반 기능

이런 경우는 Render 라는 사이트 사용 가능

7. GitHub Pages 배포

GitHub Pages 는 GitHub에서 제공하는 무료 배포 기능이다.

핵심 개념

정적 웹사이트 호스팅
GitHub 저장소 기반 배포

배포 흐름

코드 수정 → commit → push → 자동 배포

Vercel과 동일하게 자동화 구조

설정 방법

저장소(Settings) → Pages
배포 브랜치 선택
- main 또는 gh-pages

8. 배포 시 주의사항

파일 경로

이미지, CSS, JS 경로 중요
상대경로 / 절대경로 정확히 작성해야 함

👹에러 대응

배포 후 오류 확인
수정 → 다시 push → 자동 반영

이 반복이 실력 쌓이는 핵심

9. 활용 아이디어

웹 명함
포트폴리오 사이트
모바일 청첩장
간단한 랜딩페이지

오늘 느낀 점

배포는 어려운 작업이라고 생각했는데, GitHub만 잘 활용하면 거의 자동으로 해결된다.

특히 Vercel은 “코드만 수정하면 알아서 배포되는 구조”라서 개발 흐름이 훨씬 편해진다.

한 줄 정리

GitHub + Vercel = 자동 배포 시스템 완성

2026년 5월 2일 토요일