GBT
한국외국어대학교Global Business & Technology
GenAI 특강 · Cloudflare Pages 배포
목차 강의 홈 ↗
부록 · 배포 가이드

나만의 홈페이지 만들기
— Cloudflare Pages 배포

이 가이드를 끝내면 코딩 없이 만든 나만의 웹페이지가 프로젝트이름.pages.dev라는 주소로 인터넷에 무료로 공개된다. 준비물을 갖춘 뒤 명령 두 줄이면 배포가 끝난다.

부록 · 배포 가이드준비 4단계 + 배포 3단계무료 플랜으로 충분결과물: 프로젝트이름.pages.dev
1
STEP 1–4 · 준비

배포 전에 갖출 것

필요한 것은 네 가지다. 배포할 파일 폴더, Cloudflare 계정, Cloudflare 연결(커넥터 또는 커스텀 토큰), 그리고 Node.js. 모두 무료다.

STEP 1 · 파일 준비

홈페이지 파일 준비 — index.html이 전부다

배포는 폴더 하나를 통째로 올리는 방식이다. 폴더 안에 index.html이라는 이름의 파일이 있으면 Pages가 그것을 메인 페이지로 자동 인식한다.

my-homepage/
├── index.html     ← 필수. 이름 그대로 — Pages가 메인 페이지로 자동 인식
├── style.css      ← 선택
└── images/        ← 선택
  • 폴더 안에 index.html이 정확히 이 이름으로 존재한다
  • CSS·이미지 등 부속 파일은 같은 폴더 안에 함께 두었다
STEP 2–3 · 계정과 토큰

Cloudflare 계정 만들기와 연결

계정은 이메일 하나로 만들 수 있다. 연결은 두 가지 중 하나를 고른다 — Claude 커넥터(클릭 몇 번으로 끝, 이후 말로 배포 지시)나 커스텀 토큰(터미널 배포용, 필요한 권한만 직접 등록). 토큰은 발급 화면에서 단 한 번만 표시되므로 반드시 복사해 안전한 곳에 저장한다.

계정 만들기

  1. cloudflare.com 접속 → Sign Up
  2. 이메일 + 비밀번호 입력
  3. 이메일 인증 완료

연결 방법 A — Claude 커넥터 (클릭만으로, 추천)

토큰을 직접 다루지 않는 가장 쉬운 길이다. Claude 앱의 설정 → 커넥터(Connectors)에서 Cloudflare를 연결하면 브라우저에서 Cloudflare 로그인·승인 한 번으로 끝난다. 연결 후에는 대화에서 "이 폴더를 Cloudflare Pages에 배포해줘"라고 말로 지시하면 된다. 이 경우 아래 토큰 발급(방법 B)과 STEP 5~6의 명령 입력은 건너뛰어도 된다.

연결 방법 B — 커스텀 토큰 발급 (터미널 배포용)

  1. dash.cloudflare.com 접속 → My Profile
  2. API TokensCreate Token
  3. 맨 아래 Create Custom Token 선택 — 템플릿 대신 필요한 권한만 직접 등록한다
  4. Permissions에 추가: Account · Cloudflare Pages · Edit (Pages 배포 필수) / Account · Workers Scripts · Edit (Worker 배포, 프로젝트 3용) / User · User Details · Read (wrangler 계정 확인용, 권장)
  5. Continue to summaryCreate Token
  6. 표시된 토큰을 복사해 저장한다 — 한 번만 표시되므로 반드시 저장

템플릿 토큰 대신 커스텀 토큰을 쓰는 이유는 안전 때문이다. 필요한 권한만 등록하면 토큰이 유출되어도 피해 범위가 그 권한 안으로 제한된다. 연결 후 npx wrangler whoami로 내 계정이 표시되면 성공이다.

⚠ 토큰 보안 주의

토큰은 내 계정의 열쇠다. 채팅창·이메일·공개 문서에 절대 붙여넣지 말 것. 유출되면 누구든 내 계정에 배포할 수 있다. 유출이 의심되면 dash.cloudflare.com의 API Tokens 화면에서 즉시 삭제하고 재발급한다.

STEP 4 · 도구 확인

Node.js 설치 확인

배포 명령(npx wrangler)은 Node.js 위에서 돈다. 터미널에서 버전을 확인하고, v18 이상이면 그대로 진행하면 된다.

node --version
  • v18 이상이 출력되면 OK
  • 명령을 찾을 수 없다고 나오면 nodejs.org에서 설치 후 다시 확인
2
STEP 5–7 · 배포

7단계로 끝내는 배포

프로젝트 생성은 최초 1회, 이후에는 deploy 명령 한 줄만 재실행하면 수정 사항이 반영된다.

전체 흐름

배포 7단계 한눈에 보기

준비(1~4단계)를 마쳤다면 남은 것은 세 단계다. 프로젝트를 만들고, 폴더를 올리고, 주소를 확인한다.

  1. 홈페이지 파일 준비index.html이 든 폴더 하나 (STEP 1)
  2. Cloudflare 계정 만들기 — cloudflare.com에서 가입 + 이메일 인증 (STEP 2)
  3. Cloudflare 연결 — Claude 커넥터 연결 또는 커스텀 토큰(권한 직접 등록) 발급 (STEP 3)
  4. Node.js 설치 확인node --version으로 v18 이상 확인 (STEP 4)
  5. Pages 프로젝트 생성 — 최초 1회. 프로젝트 이름이 URL의 일부가 된다 (STEP 5)
  6. 파일 업로드(배포) — 수정할 때마다 이 명령만 재실행 (STEP 6)
  7. 확인 — 브라우저에서 프로젝트이름.pages.dev 접속 (STEP 7)
STEP 5 · 프로젝트 생성

Pages 프로젝트 생성 — 최초 1회

프로젝트를 처음 한 번 만들어 둔다. 이때 정한 프로젝트 이름이 곧 URL의 일부(프로젝트이름.pages.dev)가 되므로 신중히 고른다.

CLOUDFLARE_API_TOKEN=발급받은토큰 npx wrangler pages project create 프로젝트이름 --production-branch main
  • 발급받은토큰 자리에 STEP 3에서 저장한 토큰을 넣었다
  • 프로젝트이름을 원하는 이름으로 바꿨다 (URL이 된다)
STEP 6 · 파일 업로드

파일 업로드 — 수정할 때마다 이 명령만

폴더를 통째로 올리는 배포 명령이다. 홈페이지를 수정한 뒤에는 이 명령 한 줄만 재실행하면 새 버전이 반영된다.

CLOUDFLARE_API_TOKEN=발급받은토큰 npx wrangler pages deploy ./폴더경로 --project-name 프로젝트이름 --branch main
  • ./폴더경로가 index.html이 든 폴더를 가리킨다
  • 프로젝트이름이 STEP 5에서 만든 이름과 일치한다
STEP 7 · 확인

내 주소 확인 — 두 종류의 URL

배포가 끝나면 두 종류의 주소가 생긴다. 다른 사람에게 공유할 주소는 고정 URL이다.

URL 종류형태용도
고정 URL (영구)프로젝트이름.pages.dev공유용 — 항상 최신 배포를 보여준다
배포별 고유 URLxxxxxxxx.프로젝트이름.pages.dev배포 1회마다 새로 생성 — 특정 버전 확인용
생각해보기

수정 후 재배포하면 배포별 고유 URL이 하나 더 생긴다. 예전 버전과 새 버전을 나란히 비교하고 싶을 때, 어느 URL을 열어보면 될까?

3
마무리

무료 한도와 핵심 정리

개인 홈페이지 용도라면 무료 플랜으로 충분하다.

무료 플랜 한도

무료로 어디까지 쓸 수 있나

항목무료 플랜 한도
프로젝트 수최대 100개
배포 횟수월 500회
대역폭무제한
커스텀 도메인프로젝트당 100개
핵심 정리

하나. 배포의 최소 단위는 index.html이 든 폴더 하나다. Pages가 index.html을 메인 페이지로 자동 인식한다.

둘. 프로젝트 생성(STEP 5)은 최초 1회, 이후 수정 반영은 deploy 명령(STEP 6) 한 줄 재실행이 전부다.

셋. API 토큰은 한 번만 표시된다 — 저장은 안전하게, 공유는 절대 금지, 유출 시 즉시 삭제·재발급.

  • 내 홈페이지가 프로젝트이름.pages.dev에서 열린다
  • 파일을 수정하고 deploy 명령 재실행으로 반영을 확인했다
  • Cloudflare를 연결했다 — 커넥터를 연결했거나, 커스텀 토큰을 발급해 안전한 곳에 보관했다

출처 원본 노션 페이지 — 나만의 홈페이지 만들기: Cloudflare Pages 배포 가이드, indecisive-pyramid-af1.notion.site

한국외국어대학교 Global Business & Technology · GenAI 특강 · 부록 배포 가이드.
이 자료는 단일 HTML 파일로 배포되며, 보기 모드 전환과 실습 요소는 순수 JavaScript로 구현되어 오프라인에서도 동작한다.