☁️ [웹사이트 제작 4편] Cloudflare Pages 무료 호스팅으로 웹사이트 배포하기

🤔 기껏 만든 웹사이트, 매달 서버비를 내야 할까?

📌 한 줄 요약: 완성한 정적 웹사이트를 Cloudflare Pages에 연결하고, 무료 플랜을 활용해 별도의 서버를 직접 운영하지 않고 웹사이트를 배포하는 방법을 알아본다.

2편에서 웹사이트의 뼈대를 만들고, 3편에서는 노션을 콘텐츠 관리 공간으로 연결할 준비를 마쳤다.

이제 남은 것은 하나다.

"그래서 이 웹사이트를 실제 인터넷에 어떻게 올리지?"

내 컴퓨터에서 웹사이트가 정상적으로 작동하더라도 다른 사람이 접속할 수 있는 것은 아니다. 완성된 웹사이트 파일을 외부의 배포 환경에 올려야 누구나 인터넷을 통해 접속할 수 있다.

보통 웹사이트를 운영하려면 서버나 호스팅 서비스를 알아봐야 한다. 하지만 콘텐츠 중심의 개인 블로그를 시작하는 단계에서 매달 고정적인 서버 비용이 발생한다면 부담이 될 수 있다.

그래서 Pixoas에서는 Cloudflare Pages의 무료 플랜을 활용해 정적 웹사이트를 배포하는 방식을 선택했다.

이번 편에서는 GitHub에 저장해둔 웹사이트 코드를 Cloudflare Pages와 연결하고, 필요한 빌드 설정을 입력한 뒤 실제 웹사이트를 배포하는 과정까지 알아보자.

💡 왜 Cloudflare Pages를 선택했을까?

📌 한 줄 요약: 정적 웹사이트를 GitHub 저장소와 연결해 자동으로 빌드·배포할 수 있고, Cloudflare의 글로벌 네트워크를 통해 완성된 사이트를 제공할 수 있기 때문이다.

웹사이트를 배포할 수 있는 방법은 다양하다.

AWS 같은 클라우드 서비스를 직접 구성할 수도 있고, 별도의 웹호스팅 서비스를 이용할 수도 있다. 하지만 처음 웹사이트를 운영하는 입장에서는 서버를 직접 관리해야 하는 구조보다 코드를 올려두고 배포 설정만 해두는 방식이 훨씬 간단하다.

Cloudflare Pages는 GitHub 저장소와 연결해 코드를 빌드하고 배포할 수 있다. GitHub의 변경사항이 발생하면 연결된 프로젝트를 다시 빌드하고 배포하는 방식도 지원한다.

또한 Pages에 배포된 정적 파일은 Cloudflare의 글로벌 네트워크를 통해 제공된다. 따라서 별도의 서버를 직접 운영하지 않고도 정적 콘텐츠를 서비스할 수 있다는 것이 장점이다.

다만 '무료니까 모든 것이 무제한'이라는 의미는 아니다. 현재 Cloudflare Pages 무료 플랜에는 월 500회 빌드, 프로젝트당 최대 20,000개 파일, 개별 파일 최대 25MiB 등의 제한이 있다. 일반적인 텍스트 중심 개인 블로그라면 충분히 활용할 수 있지만, 대용량 파일을 많이 다루는 서비스라면 별도의 구성이 필요하다.

📊 GitHub에서 Cloudflare Pages까지, 4단계로 배포하기

📌 한 줄 요약: GitHub 저장소를 Cloudflare Pages에 연결하고 빌드 설정과 환경 변수를 입력한 뒤 배포하면 기본적인 웹사이트 배포가 완료된다.

배포 과정 자체는 생각보다 간단하다.

2편에서 만들어 GitHub에 올려둔 웹사이트 저장소를 Cloudflare Pages에 연결하면 된다. Cloudflare Pages는 GitHub 저장소의 코드를 가져와 빌드한 뒤 배포할 수 있으며, 이후 저장소에 변경사항이 발생하면 자동 배포도 가능하다.

전체적인 흐름은 다음과 같다.

Cloudflare 공식 가이드에서도 GitHub 또는 GitLab 저장소를 연결한 뒤 프레임워크, 빌드 설정, 환경 변수 등을 설정하고 배포하는 흐름으로 안내하고 있다.

🔗 Cloudflare와 GitHub 연결하기

Cloudflare 대시보드에서 Workers & Pages로 이동한 뒤 새로운 애플리케이션을 생성하고 GitHub 저장소를 연결한다.

이 과정에서 Cloudflare가 GitHub 저장소에 접근할 수 있도록 GitHub App 권한을 설정하게 된다.

필요한 저장소만 선택해서 권한을 부여하는 것이 좋다. GitHub 전체 저장소에 무조건 접근 권한을 줄 필요는 없다.

🚀 빈 화면 오류를 막는 핵심: 환경 변수 설정

📌 한 줄 요약: 웹사이트가 빌드 과정에서 필요한 API 토큰이나 데이터베이스 ID가 있다면, 해당 값을 환경 변수로 안전하게 전달해야 한다.

Cloudflare Pages에 GitHub 저장소를 연결했다고 해서 무조건 웹사이트가 정상적으로 완성되는 것은 아니다.

특히 우리가 사용하는 템플릿처럼 빌드 과정에서 Notion API를 호출하는 구조라면 Notion 인증 정보와 Database ID 같은 값이 필요하다.

이 정보를 코드에 직접 적어두는 것은 좋은 방법이 아니다.

예를 들어 Notion API 인증 토큰을 GitHub 저장소의 소스 코드에 그대로 입력해 버리면 저장소를 보는 사람이 해당 값을 확인할 가능성이 있기 때문이다.

따라서 이런 민감한 값은 사용하는 프로젝트의 구조에 맞춰 환경 변수(Environment Variables) 또는 Secrets로 관리하는 것이 안전하다.

Cloudflare Pages에서도 프로젝트 설정을 통해 환경 변수를 관리할 수 있으며, 공식문서에서는 프로젝트의 Settings → Variables and Secrets에서 값을 추가하는 방법을 안내하고 있다.

환경 변수 설정에서 확인할 것

① 변수 이름(Key)

프로젝트 코드에서 실제로 사용하는 환경 변수 이름을 입력한다.

예를 들어 템플릿에서 ’NOTION_API_KEY’라는 이름을 사용한다면 동일한 이름을 입력해야 한다.

② 변수 값(Value)

3편에서 준비한 Notion 인증 토큰이나 Database ID 등을 입력한다.

여기서 가장 중요한 것은 변수 이름이 코드에서 사용하는 이름과 정확하게 일치해야 한다는 것이다.

다만 한 가지 주의할 점이 있다.

모든 웹사이트가 동일한 환경 변수를 사용하는 것은 아니다.

사용하는 오픈소스 템플릿이나 빌드 방식에 따라 필요한 변수 이름과 값이 달라질 수 있다. 따라서 다른 사람의 예제를 그대로 복사하기보다 내가 사용하는 템플릿의 설정 파일이나 README에서 요구하는 변수명을 먼저 확인하는 것이 가장 정확하다.

🌎 배포가 끝나면 pages.dev 주소가 생긴다

배포가 정상적으로 완료되면 Cloudflare에서 프로젝트를 확인할 수 있는 고유한 URL이 제공된다.

일반적으로 다음과 같은 형태다.

• 프로젝트명.pages.dev

이 주소를 브라우저에 입력하면 인터넷에서 실제로 웹사이트에 접속할 수 있다.

처음부터 개인 도메인을 연결할 필요는 없다.

먼저 pages.dev 주소에서

• 홈페이지가 정상적으로 열리는지
• CSS가 제대로 적용되는지
• 이미지가 정상적으로 표시되는지
• Notion 콘텐츠가 제대로 출력되는지

를 확인한 뒤 다음 단계로 넘어가는 것이 좋다.

Cloudflare Pages는 이후 커스텀 도메인도 연결할 수 있다.

🔐 개인 도메인과 HTTPS도 연결할 수 있을까?

📌 한 줄 요약: pages.dev 주소로 먼저 테스트한 뒤 원하는 개인 도메인을 연결해 실제 서비스 주소로 사용할 수 있다.

웹사이트가 정상적으로 작동하는 것을 확인했다면 이후에는 pixoashub.com 과 같은 개인 도메인을 연결할 수 있다.

Cloudflare Pages에서는 프로젝트의 Custom domains 메뉴에서 도메인을 추가할 수 있다. 루트 도메인을 연결하는 경우에는 Cloudflare Zone 및 네임서버 설정이 필요할 수 있다.

여기서 중요한 점은 호스팅 비용과 도메인 비용은 별개라는 것이다.

Cloudflare Pages를 무료 플랜으로 사용하더라도 .com이나 .kr 같은 도메인을 직접 구매한다면 도메인 등록 및 갱신 비용은 별도로 발생한다.

따라서 이번 시리즈에서 말하는 '유지비 0원'은 도메인 구매 비용까지 포함한 의미가 아니라, 별도의 유료 호스팅 비용 없이 웹사이트를 운영하는 구조라는 점을 명확하게 해두자.

🙋‍♂️ 웹사이트 배포, 궁금했던 점 (Q&A)

(👉 질문을 클릭하면 자세한 답변이 펼쳐집니다)

📚 웹사이트 제작 9부작 시리즈 전체 목차

Pixoas에서는 웹사이트 제작을 쉽게 따라 할 수 있도록 9편의 튜토리얼로 쪼개어 연재한다.
차근차근 따라오면 어느새 나만의 개인 웹사이트가 완성되어 있을 것이다.

• 💡 [웹사이트 제작 1편] 유지비 0원? 워드프레스 대신 노션 택한 이유
• 🎨 [웹사이트 제작 2편] AI로 코딩 없이 웹사이트 뼈대 구축하기
• 📝 [웹사이트 제작 3편] 노션을 웹사이트 CMS로 쓰는 법
• ☁️ [웹사이트 제작 4편] Cloudflare Pages로 웹사이트 배포하기 (현재 글)
• ⚙️ [웹사이트 제작 5편] 노션 글 자동 반영! 깃허브 액션 연동법
• 🚨 [웹사이트 제작 6편] 노션 이미지 엑스박스 오류 해결
• 📈 [웹사이트 제작 7편] 검색엔진 등록 & 도메인 연결
• 💰 [웹사이트 제작 8편] 애드센스 승인, 가치 없는 콘텐츠 피하기
• 🤖 [웹사이트 제작 9편] AI로 블로그 방문자 늘리기

이 시리즈는 특정 서비스를 무조건 추천하기 위한 글이 아니다. 내가 직접 여러 방법을 비교하고 운영하면서 선택한 구조를 공유하는 기록에 가깝다. 4편에서는 완성된 웹사이트를 Cloudflare Pages에 배포하는 방법까지 알아봤다.

이어지는 5편에서는 GitHub Actions를 이용해 Notion의 콘텐츠를 가져오고, 웹사이트를 자동으로 빌드한 뒤 Cloudflare Pages에 배포하는 자동화 과정을 알아볼 예정이다.

✅ 마무리 정리

1. 2편에서 만든 GitHub 저장소를 Cloudflare Pages와 연결하면 정적 웹사이트를 인터넷에 배포할 수 있다.
2. GitHub와 연동된 Pages 프로젝트는 저장소의 변경사항을 기반으로 자동 빌드와 배포를 진행할 수 있다.
3. Notion API처럼 빌드 과정에서 필요한 인증 정보는 환경 변수나 Secrets를 활용해 안전하게 관리하는 것이 좋다.
4. 배포가 완료되면 pages.dev 주소로 먼저 사이트를 테스트한 뒤 개인 도메인을 연결할 수 있다.
5. Cloudflare Pages 무료 플랜은 일반적인 콘텐츠형 웹사이트에 활용할 수 있지만 빌드 횟수, 파일 수, 파일 크기 등의 제한이 있으므로 '무제한 무료'는 아니다.

💡 참고: Cloudflare 공식 문서 기준으로 현재 Pages 무료 플랜에는 월 500회 빌드, 프로젝트당 20,000개 파일, 개별 파일 25MiB 제한이 있다. 이 글에서 소개하는 구조는 일반적인 텍스트 중심 개인 블로그나 콘텐츠 사이트를 기준으로 한다. 대용량 파일 저장이나 복잡한 서버 기능이 필요한 서비스라면 다른 인프라 구성이 필요할 수 있다.