Cloudflare 도메인 + GitHub Pages 연동

왜 커스텀 도메인을 사용했는가?

클라우드플레어에서 도메인 구매하고 갱신하는 비용이 약 연간 10달러 정도로 부담스러운 것도 아니고
내 사이트를 소유하는 느낌이라 한번 해보고 싶어서 등록해 봤습니다.

클라우드 플레어 도메인 구입

제가 클라우드 플레어를 사용했으니 해당 서비스로 설명을 합니다.

클라우드플레어 가입 후 메뉴에서 도메인 등록 -> 도메인 구매에서 사용하고 싶은 도메인을 먼저 검색해서
사용 중인지 확인 후, 구매 가능하면 결제를 진행하면 됩니다. 주소는 영문으로 작성했습니다.

DNS 설정

도메인을 구매하셨으면 도메인 DNS 설정에서 깃허브 페이지 IP 주소 설정이 필요합니다.

구매한 도메인 페이지에 들어가 보면 DNS -> 레코드 설정하는 부분이 있습니다.
해당 부분에 깃허브 페이지 IP 4개, CNAME 1개를 입력해 줘야 깃허브 페이지에서 DNS 설정이 가능합니다.
사진에서 TXT, google-site… 로 시작되는 부분은 제 구글 서치콘솔 연동으로 등록된 거라 무시하시면 됩니다.

사진에 파란색으로 + 레코드 추가 버튼 눌러 아래와 같은 설정 화면을 열어주시면 됩니다.

중요 : 프록시(구름 아이콘)는 OFF로 두셔야 깃허브 페이지에서 인식합니다.

해당 설정 5개 모두 입력 진행해 주시면 됩니다.

깃허브 페이지 커스텀 도메인 입력

도메인 구매, DNS 설정까지 완료되었으면 깃허브 페이지 저장소에서 커스텀 도메인 설정만 해주면 작업은 완료됩니다.
DNS 설정 반영까지 약 5분 ~ 15분 정도 시간이 소요된다고 하니 해당 시간 동안은 커스텀 도메인 입력해도 오류가 뜰 수 있습니다.
설정 후 여유를 두고 커스텀 도메인을 입력해 주세요.

본인 깃허브 페이지 저장소에서 설정 -> 도메인 하단에 커스텀 도메인에 구매한 도메인을 입력하고 Save하면 DNS 설정 검사가 시작되고, 문제가 없을 경우 성공하면 앞으로 username.github.io 로 접속해도 구매한 도메인으로 리다이렉트 됩니다.

Enforce HTTPS는 http로 입력해도 https로 리다이렉트 시켜주니 일단 켜줍시다.
.config 등에서 기존 github.io 주소를 사용하던 부분이 있다면 구매한 도메인으로 변경해 주면 됩니다.

제 경우 GitHub Actions를 사용해 main 브랜치에 커밋하면 github-pages 브랜치로 빌드 및 배포되도록 구성되어 있습니다.
이 과정에서 커스텀 도메인 설정이 초기화되는 문제가 있어 main 루트에 CNAME 파일을 추가해 주었습니다.