Cloudflare Pages로 워드프레스 없이 애드센스 달기 — 유지비 0원 웹사이트 배포법

애드센스로 수익을 내고 싶은데, 워드프레스를 설치하고 관리해야 한다는 말에 시작조차 못 하고 있나요? 서버를 사고, 워드프레스를 설치하고, 업데이트와 보안을 챙기는 일은 생각만 해도 부담스럽습니다. 그런데 애드센스를 다는 데 워드프레스가 꼭 필요한 것은 아닙니다.

이 글을 읽고 나면, 워드프레스 없이 Cloudflare Pages와 GitHub으로 유지비 0원 웹사이트를 만들고 애드센스까지 다는 방법을 알 수 있습니다. 저장소 준비부터 자동 배포, 커스텀 도메인 연결, 애드센스 연결까지 순서대로 정리했습니다.

Cloudflare Pages를 쓰는 이유

Cloudflare Pages는 정적 웹사이트를 무료로 배포해 주는 서비스입니다. 무료 조건이 넉넉해서 개인 포트폴리오 용도에는 사실상 제한이 없습니다.

• 월 500회 빌드까지 무료입니다. 개인 사이트를 하루에도 몇 번씩 고쳐도 충분합니다.
• 트래픽과 요청 수가 무제한입니다. 글이 갑자기 퍼져도 추가 요금이 나지 않습니다.
• 커스텀 도메인을 프로젝트당 최대 100개까지 연결할 수 있고, SSL 인증서도 자동으로 발급됩니다.
• GitHub에 코드를 올리면 자동으로 빌드하고 배포합니다. FTP로 파일을 올릴 필요가 없습니다.
• 워드프레스처럼 서버를 설치하고 업데이트할 필요도 없습니다. 관리할 서버가 없으니, 글 쓰는 일에만 집중할 수 있습니다.

이런 분들에게 추천합니다

• 워드프레스가 부담스러워 애드센스를 미뤄온 분: 서버 설치, 업데이트, 보안 관리가 필요 없습니다. 글을 쓰고 GitHub에 올리는 것만으로 사이트가 운영됩니다.
• 서버 비용 없이 포트폴리오나 블로그를 운영하고 싶은 분: 호스팅 비용이 0원이라, 도메인만 있거나 pages.dev 주소만 써도 바로 시작할 수 있습니다.
• 글이 갑자기 퍼지는 것이 걱정되는 분: 트래픽이 무제한이라, SNS에서 글이 퍼져도 추가 요금이나 접속 차단 걱정이 없습니다.
• 보안에 신경 쓰는 분: 정적 사이트는 데이터베이스와 서버 프로그램이 없어서, 해커가 노릴 만한 구멍이 적습니다. SQL 인젝션이나 서버 취약점 공격이 들어갈 곳 자체가 없습니다. 여기에 Cloudflare CDN이 앞단에서 악성 트래픽과 DDoS 공격을 걸러주고, HTTPS도 자동으로 적용됩니다. 뚫을 서버 자체가 없으니, 서버 해킹을 당할 일도 없습니다.
• 자주 고치고 미리 확인하고 싶은 분: GitHub에 올리기만 하면 자동 배포되고, 브랜치별 미리보기 주소로 수정 내용을 먼저 확인한 뒤 본 사이트에 반영할 수 있습니다.
• 자기 도메인을 무료로 쓰고 싶은 분: 커스텀 도메인 연결과 SSL 인증서 발급이 모두 무료라, 도메인 구입비 외에는 들지 않습니다.

GitHub Pages도 있는데 왜 Cloudflare Pages인가

이름이 비슷해서 처음에는 헷갈리기 쉽습니다. 정리하면, GitHub Pages는 GitHub이 제공하는 정적 웹사이트 호스팅이고, Cloudflare Pages는 Cloudflare가 제공하는 정적 웹사이트 호스팅입니다. 둘 다 GitHub 저장소에 있는 코드로 웹사이트를 만들 수 있습니다. Cloudflare Pages를 쓴다고 GitHub을 안 쓰는 것이 아닙니다. 코드는 계속 GitHub에 두고, 배포만 Cloudflare가 맡는 구조입니다.

GitHub Pages가 나쁜 선택은 아닙니다. 간단한 사이트를 GitHub 안에서만 끝내고 싶다면 GitHub Pages가 더 단순합니다. 그럼에도 이 글에서 Cloudflare Pages를 쓰는 이유는 트래픽 때문입니다. 글이 갑자기 퍼져도 트래픽 제한에 걸리지 않고, 전 세계 CDN으로 빠르게 뜹니다. 브랜치별 미리보기 배포도 유용합니다. 수정 중인 내용을 별도 주소로 먼저 확인하고, 괜찮으면 본 사이트에 반영할 수 있습니다.

정적 웹호스팅이란?

정적 웹호스팅은 미리 만들어진 파일을 그대로 건네주는 방식입니다. 비유하자면, 미리 인쇄해 둔 전단지를 나눠주는 것과 같습니다. 누가 받든 같은 전단지가 나갑니다. 서버는 HTML, CSS, 이미지, 자바스크립트 파일을 그대로 방문자에게 보낼 뿐, 요청할 때마다 내용을 새로 만들지 않습니다.

정적 사이트의 예시는 다음과 같습니다.

• 개인 포트폴리오, 이력서 페이지
• 블로그 글 페이지, 회사 소개 페이지
• 제품 안내 랜딩 페이지, 문서 사이트

여기서 헷갈리기 쉬운 점이 하나 있습니다. 정적이라고 해서 화면이 멈춰 있다는 뜻은 아닙니다. 메뉴가 열리고, 이미지가 넘어가고, 다크 모드로 바뀌는 것은 모두 방문자의 브라우저에서 자바스크립트가 처리하는 일이라 정적 사이트에서도 가능합니다. 정적과 동적을 가르는 기준은 화면이 움직이는지가 아니라, 서버가 사람마다 다른 내용을 만들어서 보내주는지입니다.

Cloudflare Pages로 배포할 수 없는 사이트

서버가 사람마다 다른 내용을 만들어야 하는 사이트는 정적 호스팅으로 배포할 수 없습니다. 대표적인 예시는 다음과 같습니다.

• 로그인이 필요한 사이트: 회원 가입과 로그인, 사람마다 다른 마이페이지가 있는 사이트
• 글을 저장하는 사이트: 게시판에 글을 쓰고 저장하거나 댓글을 다는 사이트
• 주문과 결제가 있는 사이트: 장바구니, 결제, 주문 내역을 처리하는 쇼핑몰
• 실시간으로 바뀌는 사이트: 채팅, 예약 현황, 게임 서버

워드프레스로 만든 블로그도 여기에 해당합니다. 워드프레스는 서버와 데이터베이스가 있어야 돌아가기 때문에, 파일을 그대로 Cloudflare Pages에 올린다고 동작하지 않습니다.

완전히 불가능한 것은 아닙니다. Pages Functions를 쓰면 일부 동적 기능을 붙일 수 있습니다. 다만 그때부터는 이 글의 범위인 무료 정적 배포를 벗어나 Workers 요금 체계로 넘어가게 됩니다. 이 글에서는 순수한 정적 사이트만 다룹니다.

GitHub 저장소 준비 방법

먼저 웹사이트 파일을 담을 GitHub 저장소를 만듭니다.

1. GitHub에서 새 저장소를 만듭니다. 공개 저장소로 만드는 것이 무료 조건에 유리합니다.
2. 포트폴리오 파일들을 저장소에 올립니다. 가장 간단한 형태는 index.html 파일 하나만 있는 정적 사이트입니다.
3. 파일을 올리고 나면 저장소 주소가 생깁니다. 이 주소를 다음 단계에서 Cloudflare에 연결합니다.

Cloudflare Pages 연결 및 배포 방법

1. Cloudflare 대시보드에서 컴퓨트 - Workers 및 Pages로 들어가 애플리케이션 생성을 클릭합니다.
2. GitHub 연결을 선택하고, 방금 만든 저장소를 고릅니다.
3. 빌드 설정을 입력합니다. 순수 HTML 사이트라면 프레임워크 프리셋은 없음으로 두고, 빌드 명령은 비우고, 출력 디렉토리는 루트로 두면 됩니다.
4. 배포를 시작하면 몇십 초 뒤에 이름.pages.dev 형태의 주소가 생깁니다. 이 주소로 바로 접속할 수 있습니다.

커스텀 도메인 연결 방법

pages.dev 주소가 마음에 들지 않는다면 자기 도메인을 연결할 수 있습니다.

1. Pages 프로젝트 설정에서 사용자 지정 도메인 추가를 선택합니다.
2. 연결할 도메인을 입력합니다.
3. 안내에 따라 도메인 DNS에 CNAME 레코드를 추가합니다.
4. 잠시 뒤 SSL 인증서가 자동으로 발급되고, 자기 도메인으로 접속할 수 있습니다.

도메인이 없다면 pages.dev 주소만 써도 됩니다. 이 경우 도메인 비용까지 0원이 됩니다.

애드센스도 사용가능

애드센스도 Cloudflare Pages 사이트에 달 수 있습니다. 애드센스는 자바스크립트 코드라 서버 기능이 필요 없고, 정적 파일에 코드를 붙여넣는 것만으로 동작합니다. Cloudflare Pages 약관에도 광고를 막는 규칙은 없습니다.

방법은 다음과 같습니다.

1. 애드센스 계정에 사이트를 추가합니다.
2. 발급받은 광고 코드를 페이지 HTML에 붙여넣습니다.
3. 애드센스에서 안내하는 ads.txt 파일을 사이트 출력 디렉토리 루트에 넣고 배포합니다.
4. 배포 후 도메인/ads.txt 주소로 파일이 뜨는지 확인합니다. 파일이 안 뜨면 캐시를 비우고 다시 확인합니다.

업데이트 방법

사이트를 고치고 싶을 때는 GitHub 저장소에 변경 내용을 올리기만 하면 됩니다. Cloudflare Pages가 변경을 감지해 자동으로 다시 빌드하고 배포합니다. 배포가 끝나면 새 내용이 바로 반영됩니다.

무료로 유지할 때 주의할 점

• 이 방법은 정적 사이트 기준입니다. 로그인이나 데이터베이스 같은 동적 기능은 Pages만으로 되지 않습니다.
• 동적 기능을 붙이면 Pages Functions를 쓰게 되는데, 이 부분은 Workers 요금 체계로 넘어갈 수 있습니다.
• 사이트당 파일 2만 개, 파일당 25MiB 제한이 있습니다. 사진이 많은 포트폴리오라면 이미지 용량을 줄이는 것이 좋습니다.

정리

Cloudflare Pages와 GitHub만 있으면 워드프레스 없이도 애드센스를 다는 웹사이트를 만들 수 있습니다. 저장소를 만들고, Pages에 연결하고, 도메인을 붙이고, 애드센스 코드를 넣으면 끝입니다. 이후 업데이트는 GitHub에 올리는 것만으로 자동으로 반영됩니다.

워드프레스가 부담스러워 애드센스를 미루고 있었다면, 오늘 저장소부터 만들어 보세요. 막히는 부분이 있으면 댓글로 남겨주세요!