초보자도 1시간 만에 완성하는 Cloudflare + GitHub 무료 웹서비스 100% 실전 가이드

복잡한 서버 관리나 복잡한 명령어 없이, 누구나 1시간 내에 나만의 웹사이트나 웹 앱 서비스를 인터넷에 무료로 공개할 수 있습니다.

본 실전 가이드는 Cloudflare + GitHub 웹서비스 구축 완전 매뉴얼에 이어, 초보자의 눈높이에서 클릭 몇 번과 간단한 절차만으로 Cloudflare Pages와 GitHub을 연동하여 웹서비스를 라이브 배포하는 모든 과정을 순서대로 안내합니다.

초보자를 위한 핵심 용어 사전

실전 가이드를 따라할 때 등장하는 핵심 단어의 개념입니다.

Repository (저장소): 나의 웹사이트 파일(HTML, CSS, JS 등)을 모아두는 깃허브 폴더입니다.
Commit (커밋): 내가 수정하거나 작성한 코드를 저장소에 정식으로 기록 및 저장하는 동작입니다.
Custom Domain (커스텀 도메인): mywebsite.com 처럼 내가 구매하거나 보유한 나만의 웹사이트 주소입니다.
CNAME Record (CNAME 레코드): 내 커스텀 도메인을 Cloudflare 배포 서버 주소와 연결해 주는 인터넷 주소록 설정 항목입니다.
Build Command (빌드 명령어): 소스 코드를 웹 브라우저가 바로 읽을 수 있는 정적 파일로 변환하도록 로봇에게 내리는 명령(예: npm run build)입니다.

웹서비스를 배포하기 위해 필요한 준비물은 다음 2가지뿐입니다.

Cloudflare 배포 단계별 인포그래픽

모든 작업은 웹 브라우저 화면에서 클릭만으로 진행할 수 있도록 구성되어 있습니다.

브라우저를 열고 GitHub 공식 사이트에 접속하여 무료 회원가입을 진행합니다.
로그인 후 상단 오른쪽 플러스(+) 아이콘을 클릭하고 New repository 항목을 선택합니다.
Repository name 란에 원하시는 프로젝트 이름(예: my-first-web-app)을 영어로 입력합니다.
공개 설정을 Public으로 선택하고, 아래 Add a README file 체크박스에 체크한 후 Create repository 버튼을 클릭합니다.

이제 내 웹사이트 코드가 저장될 온전한 공간이 준비되었습니다.

가장 단순한 HTML 파일 1개만 올리더라도 즉시 전 세계에 배포 가능한 상태가 됩니다.

Select repository 단계에서 만들어둔 저장소를 선택하고 Begin setup 버튼을 클릭합니다.
Framework preset 항목을 내 프로젝트 환경에 맞게 선택합니다:
- 일반 HTML/CSS 파일인 경우: None 선택 (Build command 공란, Build output directory 공란 또는 /)
- Astro 프레임워크인 경우: Astro 선택 (Build command: npm run build, Output: dist)
- Vite 기반 React/Vue인 경우: Vite 선택 (Build command: npm run build, Output: dist)
맨 아래 Save and Deploy 버튼을 클릭합니다.

1~2분 정도 기다리면 축하합니다! 페이지와 함께 .pages.dev로 끝나는 나만의 고유 인터넷 주소가 바로 발급되며 글로벌 배포가 완료됩니다.

나만의 전용 도메인(예: mydomain.com)을 연결하는 방법도 매우 간단합니다.

배포가 완료된 Cloudflare Pages 프로젝트 상세 화면에서 Custom domains 탭을 클릭합니다.
Set up a custom domain 버튼을 누른 후 보유하신 도메인 주소를 입력합니다.
도메인이 이미 Cloudflare DNS로 관리 중인 경우, 클릭 한 번으로 CNAME 레코드가 자동 추가됩니다.
타사 도메인 대행사(가비아, 후이즈 등)를 이용 중이시라면 도메인 관리 화면의 DNS 설정에 생성된 CNAME 레코드 값을 복사하여 추가합니다.

설치 완료 후 5분 내로 세계 최고 수준의 TLS/SSL 보안 인증서(HTTPS)가 무료로 자동 적용됩니다.

대시보드의 View build logs를 클릭하여 에러 메시지를 확인합니다. 대부분 오타나 package.json의 의존성 누락 문제이며, local 컴퓨터에서 npm run build 명령어가 성공하는지 먼저 체크해보면 쉽게 해결됩니다.

컴퓨터나 GitHub 웹화면에서 파일 내용을 수정하고 Commit을 남기기만 하면, Cloudflare 로봇이 30초 내에 자동으로 새로 빌드하여 전 세계 사용선에 최신 버전 웹사이트를 선보입니다.

이제 1시간 만에 완성된 완벽한 무료 글로벌 웹서비스의 주인공이 되어보세요!