[웹개발] GitHub Pages에 Custom Domain(커스텀 도메인)을 연결해보자!

지난번 GitHub Pages를 사용하는 방법과 css를 적용하는 방법을 알아보았다.

 

관련 링크

poison-dog-do-everything.tistory.com/6

[웹개발] Vue.js, GitHub Page에서 작동을 안 해요! GitHub Page 사용법

poison-dog-do-everything.tistory.com/5

[웹개발] GitHub Page에 CSS가 적용되지 않는 문제

 

오늘은 GitHub Pages가 기본제공하는 깐지없는 Url 유저닉네임.github.io/repository명 을 탈피하는 법을 배워볼 것이다.

내가 나만의 사이트를 만들었는데, 주변에 들어가보라고 해야할 텐데 url이 저래서는 영 멋이 안난다.

나도 어쩌구저쩌구.com 과 같은 깐지나는 url을 쓰고 싶다면 잘 따라오시라.

 

 

먼저 어쩌구저쩌구.com과 같은 도메인(Domain)라는 것이 필요하다.

이게 공짜면 참 좋겠지만 유료다.

 

인터넷 최저가를 조회하면 0.99달러도 나오지만, 해외결제 초보에 도메인도 처음이라면 Google Domains를 추천한다.

나도 도메인 구매는 올해 8월이 처음이라 구글DNS에서 결제했다.

 

구글 도메인 링크 ⇩

domains.google/

Google Domains – Register Your Domain Name – Google Domains

 

 

 

나는 친절하니 친절하게 도메인 구매하는 법을 아주아주 간단하게 설명하겠다.

 

먼저 원하는 도메인, 어쩌구저쩌구.com을 검색한다.

 

 

 

만일 사용중이지 않은 도메인이라면 위와같이 바로 구매가 가능하지만, 만일 사용중인 도메인이라면

아쉽게도 구매하지 못한다. 스크롤을 내리면 유사한 도메인을 추천해주니 그중에서 마음에 드는 것을 구매하면 된다.

 

 

 

구매를 마쳤다면 My domains에 들어가보면 내가 구매한 도메인이 저렇게 이쁘게 들어가 있다.

 

 

 

도메인의 이름을 클릭하면 도메인의 상세페이지에 들어갈 수 있는데, 여기서 좌측의 DNS를 클릭하자.

 

 

 

DNS에서 스크롤을 밑으로 내리면 Custom resource records라는 항목이 나타난다.

우리는 위에 보이는 바와같이 github.io링크와 우리가 구매한 도메인을 연결해 줄 것이다.

 

 

 

먼저 위와 같이 입력해주고 Add를 눌러준다.

여기서 주의할 점은 닉네임.github.io. 즉 나의 기존 url을 똑바로 넣어주어야한다.

이때 repository는 넣어줄 필요가 없다.

 

여기서 www를 넣게된다면 www.도메인.com으로 나의 사이트에 접속이 가능하고, 

예를들어 blog를 넣게된다면 blog.도메인.com으로 나의 사이트에 접속이 가능하게 된다.

 

이런 방법으로 하나의 도메인을 구매해서 수십개의 사이트를 운영하는 것도 가능하다.

 

 

 

그 다음은 github의 IPv4를 넣어줄 차례이다.

github의 IPv4는 유저 상관없이 4종류로 동일하다.

 

185.199.108.153

185.199.109.153

185.199.110.153

185.199.111.153

 

이 4개중 하나를 넣어주면 된다.

만일 내가 넣은 IPv4가 영 작동을 안한다 싶으면 다른 것으로 바꿔보는게 좋다.

 

 

자 이제 반절왔다.

마지막으로 Github의 repository에 가서 Custom Domain 설정을 해줘야한다.

여기서 주의할점은 Custom Domain을 설정하면 CNAME파일이 자동 생성된다.

평소에는 문제가 안되지만 도메인 연결을 끊으려면 꽤나 문제가 된다.

이 CNAME 파일이 깔끔하게 삭제되지 않아 기존 url로 접속을 하려고 하면 계속 도메인으로 연결이 되버린다.

이에 대한 해결책은 나의 경우는 영어로 구글링을 해도 깔끔한 답변을 찾지 못했다.

 

따라서 커스텀도메인 할 생각이 없다면 건드리지 않는 것을 추천한다.

 

내가 도메인을 변경하려는 repository에 들어온 다음 상단의 Settings를 눌러준다.

 

 

 

Settings페이지에서 스크롤을 쭉 내려준다.

 

 

 

그러다보면 GitHub Pages가 나오는데, Custom domain에 구매한 도메인을 넣고 Save를 누르면 모든 작업이 끝난다.

Enforce HTTPS는 보안장치 같은건데 체크해두면 좋다. 단 체크후 적용되는데는 48시간까지 걸릴수 있다고 들었다.

 

이제 해당 repository가 게시한 사이트는 도메인을 입력하면 자유롭게 접속이 가능하다.

 

 

나의 글이 많은 사람들에게 도움이 되었길 바란다.