홈 › 배포·운영
GitHub와 Cloudflare Pages로 무료 배포하기: git push 한 번이면 끝
내 컴퓨터에만 있는 HTML 파일은 나만 볼 수 있습니다. GitHub에 올리고 Cloudflare Pages와 연결하면, 이후로는 git push 한 번으로 전 세계에 공개됩니다. 이 사이트도 그렇게 운영하고 있습니다.
전체 흐름
- 내 컴퓨터에서 파일을 고친다.
git push로 GitHub 저장소에 올린다.- Cloudflare Pages가 새 커밋을 알아채고 자동으로 배포한다.
- 보통 30~40초 뒤 사이트에 반영된다. (이 사이트에서 직접 잰 시간입니다.)
1. GitHub 저장소 만들기
GitHub에서 새 저장소(repository)를 만들고 index.html을 올립니다. 처음에는 웹 화면의 "Add file → Upload files"로 올려도 됩니다. 저장소 맨 위(루트)에 index.html이 있어야 사이트 첫 화면이 됩니다.
2. Cloudflare Pages와 연결하기
Cloudflare 대시보드에서 Pages 프로젝트를 새로 만들고 GitHub 계정을 연결한 뒤 저장소를 고릅니다. 이 사이트처럼 HTML 파일을 그대로 쓰는 경우 설정은 간단합니다.
- 프레임워크: 없음(None)
- 빌드 명령: 비워 둠
- 출력 폴더: 저장소 루트
Cloudflare 화면의 메뉴 이름은 바뀔 수 있으니, 위 세 가지 뜻만 기억해 두면 됩니다.
연습하다 보면 같은 저장소에 Pages 프로젝트를 두 개 연결하기 쉽습니다. 실제로 이 저장소에도 githubtest, githubtest2 두 프로젝트가 연결되어 push할 때마다 둘 다 배포되었습니다. 쓰지 않는 프로젝트는 정리하는 편이 헷갈리지 않습니다.
3. 이후로는 git push만
내 컴퓨터의 사이트 폴더를 GitHub 저장소와 한 번 연결해 두면, 고칠 때마다 아래 명령만 실행하면 됩니다.
git add .
git commit -m "다크모드 추가"
git push커밋 메시지는 나중에 기록을 볼 때 무엇을 바꿨는지 알 수 있게 한국어로 짧게 적으면 충분합니다.
배포 주소는 두 종류다
Cloudflare Pages는 주소를 두 가지로 보여 줍니다. 이 차이를 몰라서 구글 애드센스에 사이트를 추가할 때 한참 헤맸습니다.
| 주소 모양 | 뜻 | 쓰임 |
|---|---|---|
프로젝트명.pages.dev | 항상 최신 배포를 보여 주는 기본 주소 | 방문자에게 알리는 주소, 애드센스·검색 등록 |
71f5173e.프로젝트명.pages.dev | 배포할 때마다 새로 생기는 그 회차 전용 주소 | 배포 결과 미리 확인 |
앞에 무작위 글자가 붙은 회차 전용 주소를 직접 확인해 보니, 응답에 x-robots-tag: noindex가 붙어 있었습니다. 검색엔진과 구글 로봇에게 "이 주소는 보지 말라"고 알리는 표시입니다. 애드센스에 이 주소를 넣었을 때는 사이트 추가가 되지 않았고, 앞부분을 뗀 기본 주소를 넣자 바로 추가되었습니다.
# 응답 헤더 확인 (터미널)
curl -sI https://71f5173e.githubtest2.pages.dev | grep -i robots
# x-robots-tag: noindex정리
- 사이트는 GitHub에 두고, 공개는 Cloudflare Pages에 맡긴다.
- 고친 뒤에는
git add,git commit,git push세 줄이면 된다. - 다른 사람에게 알리거나 서비스에 등록할 때는 무작위 글자가 없는 기본 주소를 쓴다.
댓글