지킬 페이지에 새로운 도메인과 Https 적용하기

지킬 블로그에 내 도메인을 적용하자

March 18, 2017 - 3 minute read -
jekyll DNS network domain blog https

들어가기에 앞서

DNS 에 대한 이해가 부족한 상황에서 도메인을 Redirect 하는 일은 생각보다 쉽지 않았다. 1시간 가량 씨름을 하다가 아래 페이지들을 보고 문제를 쉽게 해결할 수 있었다.

How to have a SSL-enabled Jekyll site with a custom domain on GitHub Pages Set Up SSL on Github Pages With Custom Domains for Free - Sheharyar Naseer

준비물 :

  • (GoDaddy 에서 구매한) Domain
    • Godaddy에서는 1년 Promotion이 항상 있어서 1200원 선에 .com 도메인을 구매할 수 있다. 구매에 앞서 Retailmenot 에서 쿠폰 코드를 찾아 적용하자. - 추천하는 코드 : CJC99ZCOM1
  • GIthub page

과정

  1. DNS 관리 페이지로 진입한다.
  2. 레코드 탭에서 아래 두 A record를 추가한다. 다른 A 레코드는 삭제. (참조 - ‘ Setting up an apex domain - User Documentation ‘)
    • 192.30.252.153
    • 192.30.252.154 — 호스트에 @을 쓰고 지시방향에 위 IP 를 쓰면 된다. 아래와 같이 추가된다.

  3. CNAME을 추가한다. (www > wangki.github.io ) 아래와 같이 추가가 된다.

  4. Github Page의 Root 디렉토리에 CNAME 파일을 추가하자. (Master Branch, Root dir) 딱 한 줄만 추가하면 된다!

     thisiswk.com
    

자 이렇게 하면 거의 모든 과정이 완료 되었다. 이제 약 10분 정도 뒤에 친구들에게 링크를 공유하면 “인증서 문제 있다는데” 라는 답변이 돌아온다(진짜로 그랬음).

문제는 HTTPS 가 아닌 HTTP 로 페이지를 표시하고 있는 것 ! 스크립트를 이용해 해결하는 방법도 있지만, 정말 간단하게 CloudFlare 를 이용해 해결해보자. (CloudBleed 사건으로 사용이 꺼려지겠지만, 소 잃고 외양간 고친다는 말이 있듯, 오히려 이제 보안 문제는 없지 않을까?.. 하하)

HTTP 를 HTTPS 로 바꾸기.

  1. CloudFlare 에 가입하여 도메인을 등록하자. (무료 계정도 됨)

    깃헙 주소가 아닌 구매한 도메인을 입력해야 한다 ( 나의 경우엔, thisiswk.com )

  2. 그러면 아래 이미지와 같이 새로운 DNS 를 준다.

  3. 이 DNS를 기존에 Godaddy 가 제공하던 서버 대신 사용한다. 간단히 추가하면 아래와 같이 표시된다.

  4. 그리고 Crypto 페이지로 진입하여
    • SSL 설정을 ‘Flexible’로
    • Automatic HTTPS 를 ‘ON’ 으로 설정한다. 아래와 같이 설정되면 완료.

  5. Https 강제 사용(1)

    _config.yml 에 아래와 같이 URL 을 설정한다.

    url: https://www.yoursite.com   # https protocol 포함
    enforce_ssl: www.yoursite.com   # protocol 없이
    

    예를 들어 내 설정은

      url: https://thisiswk.com
      enforce_ssl: www.thisiswk.com
    
  6. HTTPS 강제 사용(2)

    Head.html 에 아래 스크립트를 포함시켜 강제로 HTTPS 로 표시하도록 한다.

<script type="text/javascript">
      var host = "thisiswk.com";
      if ((host == window.location.host) && (window.location.protocol != "https:"))
          window.location.protocol = "https";
  </script>

결과

DNS 가 적용되는 시간이 조금 걸릴 수 있다. Cloud Flare에서는 24시간을 명시하고 있다. 나는 페이지에 올려놓은게 없어서 그런지 30분만에 완료 되었다. 아래 명령어를 이용하면 잘 설정이 되었는지 확인할 수 있다.

dig wangki.github.io +noall +answer // github page 주소
dig thisiswk.com +noall +answer // 내 도메인

아래와 같이 같은 주소 (151.101.100.133) 을 바라보고 있는 것을 볼 수 있다.

완성!