내 도메인을 GitHub Pages에 연결하자.
TL; DR
- 도메인과 깃허브 페이지스를 연결하는 법을 알아보자.
Not in this Post
- 도메인에 관한 상세한 지식
- Github Pages의 일반적인 설정 방법
What in this Post
- 도메인 구입하고 깃헙 페이지스로 연결하는 방법
도메인 구입
구입은 편한 곳에서 하시면 되겠다. 나는 Google Domains를 이용했다. 도메인을 산다는 것은 무엇일까? 예를 들어 이 홈페이지를 위해 구입한 도메인은 lostineconomics.com이다. 나는 www.lostineconomics.com을 산 것이 아니었다! 웹 서비스 www을 도메인의 하위 도메인으로 설정할 수 있지만, 구입한 것은 도메인 lostineconomics.com이다. 그리고 하위 도메인에는 www만 있는 것이 아니다. blog.lostineconomics.com이나 mail.lostineconomics.com도 설정할 수 있다.
자세한 내용은 여기를 참고하자.
보통 도메인 구입처에서 DNS, 즉 도메인네임서버 관련한 기본적인 서비스를 제공한다. 가장 기초적인 서비스는 포워딩 서비스다. 즉, lostineconomics.com을 호출했을 때 이를 다른 도메인으로 연결시켜주는 서비스다. 개념이 직관적이고 이용이 편리하지만, 포워딩되는 주소로 바뀌는 것이 조금 머쓱하다. 도메인 이름이 좋아서 구입했다면, 녀석이 계속 주소 창에 남아야 하지 않겠는가!
여기서는 구글 도메인스의 설정을 소개한다. 대체로 많은 도메인 서비스들이 DNS 관련 설정 서비스를 제공하니 업체별로 검색하면 대체로 비슷한 역할을 수행하는 기능을 발견할 수 있을 것이다.
GitHub에 보유 도메인 소유 증명하기
GitHub Pages는 훌륭한 스태틱 웹 서비스다. js, css 정도를 쓰는 html 문서를 전달하는 데에는 이보다 싸고 (무료다!), 편한 서비스를 찾기 어려울 듯 싶다. GitHub Pages는 개별 리포의 주소를 외부 도메인과 연결하는 서비스도 제공한다. 다만 연결을 위해 몇 가지 절차를 거쳐야 한다.
도메인 확인하기 1 (GitHub)
먼저 연결하고자 하는 도메인이 소유자의 것이 맞는지를 확인하는 절차가 필요하다. 깃허브의 계정 Settings > “Code, planning, and autiomation” 섹션에 Pages라는 항목으로 들어가보자.
www를 제외하고 구입한 도메인 이름을 넣으면 아래와 같은 창이 뜬다. 1번은 도메인의 앞에 붙여줄 하위 주소 이름이고, 2번은 이를 인증할 수 있는 값이다. 이 창을 띄워 두고 도에인 구입처로 가자. 두 값은 아래 그림처럼 버튼을 통해 복사하면 된다.
자세한 내용은 여기를 확인하자. 그런데 이렇게 도메인을 연결해도 actions의 프로세스에 따라서 custom domain이 풀리는 경우가 있다. 이때 필요한 것이 CNAME 파일이다. 페이지가 만들어지는 리포의 디렉토리(보통은 root)에 CNAME 파일을 만들고, 그 안에 연결할 도메인 이름을 적어주면 된다. 이렇게 하면 페이지를 퍼블리싱할 때 해당 도메인이 함께 설정된다. 페이지스 설정에 CNAME 파일이 함께 만들어지는 경우가 있으면 그대로 활용하면 되고 만들어지지 않았다면 추가해서 넣어주면 된다.
도메인 확인하기 2 (Google Domains)
구글 도메인스를 비롯한 도메인 구입처는 대체로 DNS와 관련해서 다양한 서비스를 제공한다.
- 인증하려는 도메인의 DNS 설정 메뉴로 가자.
맞춤 레코드 관리>새 레코드 만들기- 아래 그림에 각 번호에 위 GitHub 인증 메뉴의 1, 2번을 붙여 넣고 저장한다.
- 1번은 “호스트 이름”이고 2번은 “데이터”다.
- “유형”은 “TXT”로 설정한다.
- 옆의 3600은 그대로 두면 된다. 구글 도메인스에서도 이를 권장한다.
도메인 확인하기 3 (GitHub)
다시 Pages 설정 메뉴로 돌아가서 verify를 눌러준다. 설정되는데 다소 시간이 걸리지만 “verifyig”을 눌러 요구하다보면 인증이 된다. 앞서 도메인 서비스에서 설정한 값이 해당 DNS에 반영되고 이를 깃허브에서 끌어와 확인하면 도메인 소유 확인이 완료된다.
GitHub Pages를 도메인에 연결하기
특정한 리포지터리의 깃허브 페이지({유저-ID}.github.io/{리포지터리-이름})를 도메인과 연결하기 위해서는 두 가지 과정이 필요하다. Google Domains에서 DNS 설정을 통해 CNAME을 설정해야 한다. CNAME이란 도메인의 이름에서 도메인의 이름으로 연결해주기 위한 설정이라고 생각하면 쉽다. 앞서와 같이 구글 도메인스의 DNS 설정으로 가자.
도메인 연결 1 (Google Domains)
위 그림에서 보듯이 유형을 “CNAME”으로 잡는다. 이제 구입한 도메인 앞에 접두어(하위 도메인)이 들어간다. 가장 흔하게 쓸 수 있는 것이 www다. 즉, www.lostineconomics.com을 치면 어디로 포워딩되어야 하는지를 표시하면 된다. 호스트 이름이 www가 되고, 데이터는 anarinsk.github.io가 된다.
주의할 점; 데이터에 해당 것허브 페이지스의 주소가 /{리포지터리-이름}까지 전부 전달되어야 할 것 같지만, 깃허브 페이지스의 최상위 페이지까지만 DNS에 전달해야 한다. 이후 과정은 연결은 GitHub Pages의 몫이다. /가 들어간 디렉토리는 전달할 수 없다. {이용자-ID}.github.io까지만 전달하면 해당 깃허브 페이지스의 디렉토리 자원과 도메인의 연결이 자동적으로 이루어진다.
해당 도메인이 깃허브 페이지까지 잘 연결되는지 보려면, 아래의 셸 명령을 활용해보자.
$ dig www.lostineconomics.com +nostats +nocomments +nocmd윈도 파워셸에는 dig 명령어가 없다. 설치가 가능하니 검색을 통해 적절히 방법을 찾으시라. 결과가 {이용자-ID}.github.io까지 잘 타고 들어가는지 확인하면 된다. 뒤에서 다루겠지만 여기서 IP 주소도 확인할 수 있는데, 이 녀석들이 설정에서 다시 활용될 수 있다.
도메인 연결 (GitHub Pages)
커스텀 도메인, 즉 www.lostineconomics.com을 기본 도메인으로 쓰면서 각 리포지터리 이름들이 /아래 서브 디렉토리처럼 들어가는 URL을 생각해보자. 이를 구현하려면 특별한 리포리터리를 만들어야 한다. {이용자-ID}.github.io을 이름으로 갖는 리포를 생성하자. 그리고 이 리포의 GitHub Pages 설정에서 커스텀 도메인을 www.lostineconomics.com로 설정한다. 해당 리포의 Pages의 경우 index.md 혹은 index.html 파일을 고쳐서 적당한 주소로 포워딩되도록 처리하자. 이렇게 해두면 이후 리포의 도메인에서 커스텀 도메인을 지정하지 않아도 www.lostineconomics.com이 내 계정의 기본 도메인이 된다.
만일 커스텀 도메인이 필요하다면, www을 다른 것으로 바꾸는 방식으로 페이지를 지정할 수 있다. 즉, books.lostineconomics.com 이런 식으로 커스텀 도메인을 지정하고 앞서 살펴본 필요한 조치를 취하면 된다. 다만 이런 주소의 경우 /로 시작하는 서브 도메인은 설정할 수 없다.
정리 및 응용
흐름을 정리해보자. 구입한 도메인의 네임 서버(DNS)가 {이용자-ID}.github.io까지 타고 들어가면 깃허브 페이지스의 설정이 해당 주소를 해당 페이지스의 랜딩 페이지와 연결한다. 따라서 크게 작업 흐름을 정리해보면 다음과 같다.
- 사용하려는 도메인 이름이 것히브 페이지스 도메인(
{개별-ID}.github.io)에 연결되도록 설정한다. - 1을 구현하려면 깃허브에서 내가 구입한 도메인을
txt파일을 통해 인증헤야 한다. - 각 리퍼지토리의 깃허브 페이지스 설정에서 1의 도메인이 해당 리포의 페이지를 호출할 수 있도록 연결한다.
도메인으로 꼭 www만 써야 할까? 아니다. 다른 이름도 가능하다. 이 페이지를 예로 들어보자.
- DNS의 레코드 관리에서 호스트의 이름으로
blog설정하고blog.lostineconomics.com을anrinsk.github.io까지 연결한다. - 이 블로그를 담고 있는 리포에서 커스텀 도메인으로
blog.lostineconomics.com을 지정하면 이 주소는 이 블로그의 깃허브 페이지스로 연결된다. anarinsk.github.io라는 이름의 리포가 생성하고 이 리포의 커스텀 도메인은www.lostineconomics.com이다.index.html을 통해blog.lostineconomics.com으로 연결되도록 했다. 즉,www.lostineconomics.com이 호출되면 기본으로blog.lostineconomics.com으로 연결된다.- 이제 이 계정의 리포들의 페이지스는 기본으로
www.lostineconomics.com을 기본 주소로 지닌다. 만일 별도의 커스텀 도메인이 필요하다면,blog.lostineconomics.com처럼 호스트 이름을 바꾸어서 설정하면 된다.
곁눈질; www가 없는 호출 포위딩하기
웹페이지에 들어갈 때 www를 쓰지 않는 경우가 있다. 이런 경우에도 해당 페이지로 잘 안내되는 것은 최상위 도메인이 www 등이 붙은 하위 도메인으로 연결되기 때문이다. 이를 구현하려면 구글 도메인스 DNS 설정에서 “A” 유형을 추가하면 된다. A 유형은 해당 호출을 바로 IP로 연결해준다. 해당 IP는 앞서 설정한 CNAME과 같기 때문에 원 도메인이 CNAME 도메인으로 연결된다.
앞서 dig 명령을 실행하면 포워딩되는 IP 주소를 확인할 수 있다. 이를 DNS 레코드 관리에서 설정해주자. 도메인 이름은 비워둔다. 유형에는 “A”를 설정하고, 데이터에는 연결되는 IP 주소를 가급적 다 적어주자.
구글 도메인의 전체적인 DNS 설정을 한번 정리해보자.
| 유형 | 기능 | 호스트 이름 | 데이터 | 예시 |
|---|---|---|---|---|
| A | 원 도메인을 IP로 연결 | IP 주소 | yours.com → 185.XXX.1X8.15X |
|
| TXT | 도메인 소유 여부 입증 | 깃허브 계정 설정 제공 | 깃허브 계정 설정 제공 | |
| CNAME | 해당 DNS에서 호출되는 이름을 다른 이름으로 연결 | www, blog, … |
연결될 도메인 이름 | www.yours.com → yours.github.io (호출한 리포의 페이지스로 연결) |
참고자료
A follow-up
빌어먹을 구글이 Domains 서비스를 접었다. 하지만 우리에게는 그에 못지 않은 훌륭한 대안이 있다. 도메인 구매와 DNS 관리 그리고 analytics까지 모두 제공하는 Cloudflare를 추천한다. 큰 회사라서 안정성도 큰 염려는 없을 듯 싶다. (하지만 구글은…)
가입 후 웹 사이트를 등록하면서 DNS을 바꿔주면 그 이후 세부 설정을 할 수 있다. 이 홈페이지의 예시를 간략하게 스샷으로 소개하겠다. 도메인 관리의 모든 기능이 제공되고 인터페이스도 편리하다.
