Cloudflare Pages - GitHub Pages보다 빠른 무료 호스팅

---

무료 호스팅인데 속도까지 빠르면 어떨까요? Cloudflare Pages가 그런 서비스입니다.

Cloudflare는 전 세계 300개 이상의 서버를 운영하는 CDN 회사입니다. 그 인프라를 무료로 쓸 수 있습니다.

---

Cloudflare Pages가 특별한 이유

GitHub Pages  → GitHub 서버에서 직접 제공
Netlify       → Netlify 서버에서 직접 제공
Cloudflare    → 전 세계 300+ 서버 중 방문자와
Pages           가장 가까운 곳에서 제공

한국에서 접속하면 한국 서버에서 바로 응답합니다. 속도 차이가 체감될 정도입니다.

무료 제공 항목:
✅ 트래픽 무제한 (GitHub Pages/Netlify는 월 100GB)
✅ HTTPS 자동 적용
✅ 커스텀 도메인 연결 가능
✅ 서브도메인 무료 (yoursite.pages.dev)
✅ 빌드 횟수 월 500회
✅ 전 세계 CDN 자동 적용

트래픽 무제한이 가장 큰 장점입니다.

---

준비물

✅ Cloudflare 계정 (cloudflare.com에서 무료 가입)
✅ GitHub 계정 (연동 방식 사용 시)
✅ 올릴 HTML 파일

---

배포 방법 두 가지

Cloudflare Pages는 배포 방법이 두 가지입니다.

1. Direct Upload - 파일 직접 업로드 (쉬움)
2. GitHub 연동  - push하면 자동 배포 (편함)

처음이라면 Direct Upload, 자주 수정한다면 GitHub 연동을 추천합니다.

---

Direct Upload 방법 (5분)

1단계 - 가입 및 로그인

cloudflare.com 접속 → 회원가입 → 로그인합니다.

---

2단계 - Pages 접속

좌측 메뉴에서 Workers & Pages → Pages 탭 → Create 클릭합니다.

---

3단계 - Direct Upload 선택

Direct Upload 탭 선택 → 프로젝트 이름 입력합니다.

프로젝트 이름이 주소가 됩니다.
honggildong → honggildong.pages.dev

---

4단계 - 파일 업로드

index.html이 있는 폴더째로 드래그앤드롭 → Deploy site 클릭합니다.

30초 후 주소가 생성됩니다.

https://honggildong.pages.dev

---

GitHub 연동 방법 (자동 배포)

한 번 설정해두면 GitHub에 push할 때마다 자동으로 배포됩니다.

1단계 - 저장소 연결

Pages → Create → Connect to Git 탭 → GitHub 계정 연결 → 저장소 선택합니다.

2단계 - 빌드 설정

단순 HTML이라면 빌드 설정 없이 그냥 넘어갑니다.

React/Vue 프로젝트라면 이렇게 설정합니다.

Framework preset: React (또는 Vue)
Build command: npm run build
Build output directory: dist

3단계 - 배포

Save and Deploy 클릭하면 끝입니다. 이후 GitHub에 push할 때마다 자동으로 반영됩니다.

---

세 서비스 최종 비교

GitHub Pages Netlify Cloudflare Pages

트래픽	월 100GB	월 100GB	무제한
속도	보통	빠름	가장 빠름
배포 난이도	약간 복잡	쉬움	쉬움
자동 배포	GitHub 연동	GitHub 연동	GitHub 연동
드래그앤드롭	❌	✅	✅
어울리는 대상	개발자	누구나	누구나

---

어떤 걸 써야 하나요?

처음 시작 → Netlify (가장 쉬움)
개발자    → GitHub Pages (Git 워크플로우와 자연스러움)
속도/트래픽 중시 → Cloudflare Pages

셋 다 무료니까 하나씩 써보고 본인에게 맞는 걸 쓰면 됩니다.

---

마치며

Cloudflare Pages는 무료임에도 트래픽 무제한에 전 세계 CDN까지 제공합니다. 방문자가 늘어나도 속도 걱정이 없다는 점에서 장기적으로 가장 안정적인 선택입니다.

다음 글에서는 Vercel/Netlify로 프론트엔드 무료 배포하기를 다뤄보겠습니다.

---