Cloudflare Pages에 GitHub 연결하고 무료 배포하기

Cloudflare dashboard에서 Workers 및 Pages를 누릅니다.
애플리케이션 만들기를 누릅니다.
Pages를 선택합니다.
Git에 연결을 누릅니다.
GitHub를 승인하고 배포할 repository를 고릅니다.
설정 시작을 누릅니다.

정적 웹 기본 설정

항목	입력값	설명
Project name	`sample-web-site`	pages.dev 주소에 사용
Production branch	`main`	실제 공개 branch
Framework preset	None	순수 HTML 사이트
Build command	비워두기	build step이 없는 일반 Git integration
Build output directory	`public`	index.html이 있는 folder
Root directory	비워두기	repository root 사용

가장 많이 틀리는 output directory

Cloudflare는 지정한 output folder만 인터넷에 공개합니다. public/index.html 구조라면 output은 public입니다. 일반 Git integration은 Build command를 비워둘 수 있고, Pages Functions를 함께 쓰며 명시적 성공 command가 필요하면 exit 0을 사용할 수 있습니다. output을 /나 dist로 잘못 적으면 build가 성공해도 404가 나올 수 있습니다.

branch preview 활용

main이 아닌 branch를 push하면 production을 건드리지 않고 preview 주소에서 먼저 확인할 수 있습니다. 예를 들어 sample-web-site branch를 사용하면 기존 프로그램 사이트를 유지하면서 별도 가이드 사이트를 확인할 수 있습니다.

성공 확인

Cloudflare deployment 상태가 성공
홈페이지에서 CSS가 정상 적용
Mobile에서도 menu가 열림
/robots.txt 접속 가능
없는 주소는 404 page 표시

Git integration과 Direct Upload를 먼저 선택

GitHub push 자동 배포가 목적이면 처음부터 Git integration을 선택하세요. Direct Upload로 만든 project는 같은 project를 Git integration으로 전환할 수 없고, 반대 방향도 동일합니다.

공식 참고: Cloudflare Pages — Git integration guide ↗

순수 HTML package의 정확한 입력값

항목	입력값	확인 이유
Repository	`[본인 GitHub ID]/[repository 이름]`	본인 account의 repository 선택
Production branch	`main`	Cloudflare 연결 전에 GitHub에 push되어 있어야 함
Framework preset	없음	순수 HTML·CSS·JavaScript
Build command	비워두기	build step이 없는 일반 Git integration
Build output directory	`public`	`public/index.html`이 실제 공개 파일
Root directory	비워두기	repository root가 project root

왜 어떤 공식 문서는 exit 0이라고 하나요?

Cloudflare Git integration 안내는 build가 없으면 빈 칸을 허용합니다. 별도의 static HTML 안내와 build configuration 표는 preset이 없거나 Pages Functions를 함께 쓸 때 명시적 성공 command로 exit 0을 사용할 수 있다고 안내합니다. 따라서 순수 정적 웹은 빈 칸, Functions를 함께 쓰거나 UI에서 명시적 command가 필요하면 exit 0으로 선택합니다.

Git integration과 Direct Upload를 섞지 마세요

GitHub push 자동 배포가 목표면 처음부터 Git integration project를 만듭니다. 같은 Pages project 안에서 시작 방식을 임의로 바꾸지 말고 현재 공식 문서의 전환 제한을 먼저 확인합니다.

구조별 빠른 비교

구조	Build command	Output
순수 HTML — public/index.html	비워두기	`public`
이 한방배포 guide package	`python generate_site.py`	`public`
순수 HTML + Pages Functions	`exit 0` 사용 가능	`public`
순수 HTML — root/index.html	비워두기	`.`
Vite	`npm run build`	`dist`
동적 관리자 웹	project별 build	Workers/Pages Functions + D1/R2 검토

이 guide package만 build command가 다른 이유

python generate_site.py가 Cloudflare의 CF_PAGES_URL을 읽어 canonical·robots·sitemap을 실제 배포 URL로 생성합니다. custom domain을 붙인 뒤에는 Cloudflare 환경변수 HANBANG_SITE_URL=https://www.example.com을 등록하고 재배포합니다. 일반 순수 HTML site에는 이 generator가 없으므로 Build command를 비워둡니다.

공식 참고: Git integration · Build configuration