Github 블로그에 Custom 도메인 연결하기

블로그를 운영하다보니 조금씩 욕심이 생기는것 같다 ㅎㅎ Hexo를 이용해 github 블로그를 만들고 SEO를 적용시켜보기도 하고 댓글 시스템도 연결하고 스타일도 조금씩 건들여보고 하다보니 결국에 나만의 도메인을 만들어서 연결해 보고 싶었다.

그래서 여러가지를 알아보다보니 Github 자체에서 Custom Domain을 간편하게 연결할수 있도록 해주고 있었다.
기본적으로 Github를 통해서 정적페이지를 호스팅 하게되면 기본도메인이 주어는데 아래와 같은 형식으로 생성됩니다.

USERNAME.github.io
그래서 저는 mishka86.github.io 로 설정되었습니다.

원하는 도메인을 연결하려면 원하시는 도메인 주소를 구입하신 후에 도메인 연결을 하시면 됩니다.
저는 mishka.kr 도메인을 hosting.kr을 통해서 구입했습니다.

DNS 설정 방법

저는 hosting.kr 설정을 위주로 설명하겠지만 다른 도메인 서비스에서도 비슷한 루트로 변경이 가능 하니 참고하시기 바랍니다.
도메인의 네임서버를 변경해 주어야합니다. hosting.kr에서는 부가서비스로 구분이 되어있네요.
Home > 도메인 > 부가서비스 > 네임서버 설정 관리 들어가서 github에서 요구 하는데로 변경을 시켜줍니다.

Type 서브 도메인 IP주소 / 레코드 값
A Record 185.199.108.153
A Record 185.199.109.153
A Record 185.199.110.153
A Record 185.199.111.153
CName Record www USERNAME.github.io

A Record는 Domain을 물리적인 IP 주소로 연결 할 수 있도록 합니다.
CName은 물리적인 IP 주소가 아닌 다른 Domain을 연결 합니다.

A Record의 경우 위에 것에서 하나를 선택해서 입력해 주면됩니다.
네임서버 설정 관리
저는 A Record와 CName을 위와 같이 세팅 해주었습니다.

Github Pages 설정

Github에서 블로그가 있는 Repository 로 이동합니다.
메뉴에서 Settings > Options 에 Gihub Pages 항목에서
Costom domain 을 자신이 가지고 있는 도메인 주소로 변경하고 Save 버튼을 눌러줍니다.
HTTPS주소를 사용하시려면 하단에 Enfoce HTTPS 항목을 체크해 주시면 됩니다.

2018년 5월 1일 Github 공식 블로그 에서 정식 지원 소식이 올라왔습니다.

Github Setting
위와 같이 설정을 하면 이후에 USERNAME.github.io 로 접근되는 요청이 설정하신 도메인으로 Redirect 됩니다.
이렇게 설정을 하면 설정하신 도메인으로 정상적으로 노출이 됩니다.

이렇게 진행을 했는데 저는 문제가 한가지 발생했는데요 블로그를 배포하면 Custom domain 설정이 날아가는거였습니다.
혹은 CNAME 파일이 정상적으로 생성되지 않은 경우도 발생 할 수도 있다고 하는데요 그럴 경우에 아래와 같은 해결법이 있습니다.

hexo의 CNAME 생성을 위한 패키지를 설치 합니다.

bash
1
npm install hexo-generator-cname --save

그리고 _config.yml 파일에서 아래와 같이 플러그인 설정을 해줍니다.

_config.yml
1
plugins: hexo-generator-cname

그리고 _config.yml 에서 url 이름도 적용한 도메인과 같게 변경해 주세요.

_config.yml
1
url: https://mishka.kr

이렇게 Github 블로그에 Custom Domain을 연결해 주었습니다. 여러분들도 자신만의 도메인을 연결해서 자신만의 블로그에 특징을 더해보세요.

Reference

Github Pages에 Custom Domain 적용하기
블로그 만들기 GitHub 심화 3편 - 커스텀 도메인
Github Pages 개인 도메인도 무료로 HTTPS 지원 시작!

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×