원페이지 만들기 (클라우드플레어 + 깃허브 페이지)

문서화

원페이지 만들기 (클라우드플레어 + 깃허브 페이지)

태천인 2025. 9. 1. 09:09

728x90

개인 포트폴리오, 서비스 소개, 이벤트 안내처럼 간단한 웹사이트(원페이지) 가 필요할 때 가장 많이 쓰이는 조합이 바로 GitHub Pages + Cloudflare 입니다.

이 글에서는 도메인 연결부터 실제 배포까지, 처음 해보는 사람도 따라 할 수 있도록 설정 방법을 정리해봅니다.

1. 전체 구조 한눈에 보기

구성은 아주 단순합니다.

GitHub Pages : HTML/CSS/JS 파일을 호스팅
Cloudflare : 도메인 관리 + HTTPS + CDN

흐름은 다음과 같습니다.

브라우저 → Cloudflare → GitHub Pages

2. GitHub 저장소 생성

GitHub에 로그인
새 Repository 생성
- Repository 이름: username.github.io
- Public 선택

⚠️ 반드시 내 GitHub 아이디.github.io 형식이어야 기본 도메인이 정상 작동합니다.

3. 원페이지 파일 작성

저장소 루트에 index.html 파일을 생성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>My One Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>GitHub Pages + Cloudflare</p>
</body>
</html>

커밋 후 푸시하면 기본 준비는 끝입니다.

4. GitHub Pages 활성화

Repository → Settings
Pages 메뉴 이동
Source
- Branch: main
- Folder: / (root)
Save

잠시 후 아래와 같은 주소가 생성됩니다.

https://username.github.io

이 주소로 접속해서 페이지가 보이면 성공입니다.

5. Cloudflare에 도메인 추가

이제 개인 도메인을 연결해봅니다.

Cloudflare 가입 및 로그인
Add a site 클릭
보유한 도메인 입력
요금제는 Free 선택

Cloudflare가 기존 DNS를 스캔한 후 네임서버(NS)를 제공합니다.

6. 네임서버 변경

도메인을 구매한 사이트(가비아, 카페24 등)에서

기존 NS 삭제
Cloudflare에서 제공한 NS 2개 등록

적용까지 최대 수십 분 정도 걸릴 수 있습니다.

7. DNS 레코드 설정

Cloudflare DNS 메뉴에서 레코드를 추가합니다.

기본 설정

타입	이름	값	프록시
CNAME	@	username.github.io	🔶 활성화
CNAME	www	username.github.io	🔶 활성화

프록시(주황 구름)를 켜야 Cloudflare의 HTTPS/CDN 기능을 사용할 수 있습니다.

8. GitHub Pages에 커스텀 도메인 설정

GitHub Repository → Settings → Pages

Custom domain에 내 도메인 입력
example.com
Save 클릭

저장하면 저장소에 CNAME 파일이 자동 생성됩니다.

9. HTTPS 강제 적용

Cloudflare에서 다음 설정을 확인합니다.

SSL/TLS → Overview
- 모드: Full
Edge Certificates
- Always Use HTTPS: ON

이제 접속 시 자동으로 HTTPS가 적용됩니다.

10. 배포 확인

브라우저에서 도메인 접속

https://example.com

정상적으로 페이지가 뜨면 모든 설정이 완료되었습니다 🎉

11. 이런 분들께 추천

서버 관리 없이 간단한 웹페이지가 필요한 경우
포트폴리오 / 랜딩페이지 / 소개 페이지
비용 없이 HTTPS + CDN을 쓰고 싶은 경우

728x90

사업자 정보 표시

'문서화' 카테고리의 다른 글

독자 AI 파운데이션 모델 프로젝트 1차 발표회 이슈 관련 개인적인 생각 (0)	2026.01.16
Apache LogFormat 포맷 옵션 핵심 정리 (0)	2025.09.02
Medium, Velog도 좋은데… 내가 티스토리를 쓰는 이유 (0)	2025.08.31
Python Selenium으로 실시간 채팅 수집하기 (0)	2025.08.29
LG U+ 할인 때문에 시작된 Cursor → Antigravity 전환기 (0)	2025.08.28

현재글원페이지 만들기 (클라우드플레어 + 깃허브 페이지)

태천인