GitHub 블로그 테마 이주 #6 - 운영 사이트에 반영

GitHub 블로그 테마 이주 #6 - 운영 사이트에 복제

이 글에서는 테스트 서버를 충분히 검증한 경우, 운용 사이트에 복제하는 과정을 담고 있습니다. 동일한 데이터를 사용하되 운영 사이트와 테스트 사이트에 따라 다르게 동작시키는 방법도 포함하고 있습니다.

관련글
테스트 서버 구성
기존 데이터 복사
사이트 설정
커스터마이징 (Part 1)
커스터마이징 (Part 2)
운영 사이트에 복제
테스트 사이트의 수정 사항 일괄 반영

파일 정리

Minimal Mistakes 테마를 복사할 때, 샘플이나 설명문이 함께 따라옵니다. 이는 본인의 사이트와 관련이 없으니 제거할 수 있습니다.

매뉴얼에 불필요한 파일 목록이 잘 정리되어 있습니다. 이 파일들은 Minimal Mistakes 리포지토리에서 언제라도 다시 확인이 가능하니 지워도 무방합니다.

해당 목록 중에서 minimal-mistakes-jekyll.gemspec는 지우지 않는 것이 좋습니다. 이 파일을 지울 경우 GitHub에서 페이지를 빌드하는 과정에서 다음과 같은 주의(warning) 메시지가 발생합니다.

Warning: github-pages can't satisfy your Gemfile's dependencies.

주의
.github 대신 .git를 지우지 않도록 주의해야 합니다. .git에는 로컬 리포지토리에 대한 관리 정보를 담고 있습니다. 실수로 지운 경우에는 테스트하고 있는 리포지토리(제 경우에는 QuantKangAlpha.github.io)를 클론해서 다시 받거나 로컬 리포지토리를 재설정해야 합니다. 최악의 경우 최종 푸시한 이후 로컬에서 변경한 사항이 사라질 수 있습니다.

사이트 소유자 확인 코드

구글/빙/네이버/사이트 소유자 확인 코드는 사이트마다 다르게 발급됩니다. 테스트 사이트는 검색 노출이 목적이 아니므로 운용 사이트의 소유자 확인 코드를 넣어 두어도 무방할 듯 합니다. (주의: 확인된 사항은 아닙니다.)

혹시 모르니 사이트 주소를 이용하여 테스트 서버인 경우에는 소유자 확인 코드를 생성하지 않도록 하겠습니다.

GitHub는 site.github 아래 프로젝트(리포지토리 포함) 정보를 담아 Jekyll에 넘겨줍니다. 이 중에서 사용하기 간편한 것 중에 하나는 최종 사이트 주소를 넣어주는 site.github.url입니다.

index.md에 아래와 같이 site.github.url 변수를 출력하도록 해 보겠습니다.

**site.github.url: {{ site.github.url }}**

이 변수를 이용하면, 현재 사이트가 운영 사이트인지 아니면 테스트 사이트인지 구분할 수 있습니다.

아래와 같이 운용중인 사이트의 URL과 테스트 사이트 URL을 _config.yml에 정의했습니다.

# Production/Test site urls.
prod_url__          : "https://quantkang.github.io"
test_url__          : "https://quantkangalpha.github.io"

MD 파일이나 HTML 파일에서는 아래와 같이 사용하면 됩니다.

{% if site.github.url == site.prod_url__ %}
**This is production site.**
{% endif %}

{% if site.github.url == site.test_url__ %}
**This is test site.**
{% endif %}

_config.yml에서 조건문을 쓸 수 있으면 더 편리하겠지만, 기본 설정으로는 사용할 수 없는 듯 합니다.

사이트 소유자 확인 코드로 <meta> 태그를 만드는 코드는 _includes/seo.html에 있습니다. 운영 서버인 경우로 한정하여 출력하기 위해 앞에서 설명한 조건문으로 감싸겠습니다.

{% if site.github.url == site.prod_url__ %}

{% if site.google_site_verification %}
  <meta name="google-site-verification" content="{{ site.google_site_verification }}" />
{% endif %}
{% if site.bing_site_verification %}
  <meta name="msvalidate.01" content="{{ site.bing_site_verification }}">
{% endif %}

{% endif %}

테스트 사이트에서는 아래와 같이 소유자 확인 코드가 나오지 않습니다.

반대 조건을 설정해서 제대로 나오는지도 확인해 보겠습니다.

{% if site.github.url == site.test_url__ %}

{% if site.google_site_verification %}
  <meta name="google-site-verification" content="{{ site.google_site_verification }}" />
{% endif %}
{% if site.bing_site_verification %}
  <meta name="msvalidate.01" content="{{ site.bing_site_verification }}">
{% endif %}

{% endif %}

원하는 대로 잘 동작하고 있습니다.

이렇게 각 페이지마다 조건문을 설정하는 것이 아니라, _config.yml에서 직접 사용할 수 있다면 가장 좋을 것입니다. 이에 대해서는 좀 더 알아보아야 하겠습니다.

애널리틱스 확인 코드

애널리틱스 코드도 사이트 소유자 확인 코드와 마찬가지로 사이트마다 다르게 발급됩니다. 제 경우 구글 애널리틱스와 네이버 애널리틱스를 사용하고 있습니다.

구글 애널리틱스

운영 서버에서는 구글 애널리틱스 코드가 아래와 같이 나오고 있습니다. 구글 애널리틱스 설명서의 예제와는 달리 gtag()가 두번 불리고 있습니다. Alembic의 오류로 보입니다.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WXLKNYCMNQ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<YOUR ID>');
  gtag('config', '<YOUR ID>', {
    'anonymize_ip': true
  });
</script>

구글 애널리틱스 태그 아이디는 _config.yml에서 정의할 수 있습니다. 대개의 경우 새로 구글 애널리틱스를 시작하면 태그(tag) 방식입니다. 저도 태그 방식이기에 google이 아닌 google-gtag로 설정하였습니다.

analytics:
  provider               : "google-gtag"
  google:
    tracking_id          : "<YOUR ID>"

구글 애널리틱스를 설정하면 아래와 같이 코드가 생성됩니다. Minimal Mistakes는 구글 애널리틱스 매뉴얼에 소개한 그대로 나오고 있습니다.

  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WXLKNYCMNQ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<YOUR ID>', { 'anonymize_ip': false});
</script>

구글 애널리틱스 코드를 생성하는 부분은 _includes/analytics.html에 있습니다만, 이 파일은 _includes/scripts.html에서 가져오는 코드입니다. 그러니 아래와 같이 _includes/scripts.html에서 처리하는 것이 보다 간편합니다.

{% if site.github.url == site.prod_url__ %}
  {% include analytics.html %}
{% endif %}

HTML 맨 마지막에 있던 구글 애널리틱스 코드가 사라진 것을 알 수 있습니다.

네이버 애널리틱스

네이버 애널리틱스는 Minimal Mistakes를 기본 지원하지 않습니다. 앞서 소개한 _includes/analytics.html에 넣어두면 테스트 사이트에서는 나오지 않고, 운영 사이트에만 나오게 될 것입니다.

하지만 이 보다는 _includes/analytics-providers 디렉토리에 네이버 애널리틱스 스크립트를 넣어 두고 이를 포함하는 것이 더 관리가 편합니다.

_includes/analytics-providers/custom.html을 복사해서 naver.html을 만들고 다음과 같이 네이버 애널리틱스 코드를 채워 넣었습니다.

<!-- 네이버 애널리틱스 -->
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
  if(!wcs_add) var wcs_add = {};
  wcs_add["wa"] = "<YOUR ID>";
  if(window.wcs) {
    wcs_do();
  }
</script>

이 파일을 포함하도록 _include/analytics.html을 수정하였습니다. _include/analytics.html 파일은 운영 사이트인 경우에만 포함하도록 설정하였으니, 테스트 사이트에서는 구글 애널리틱스와 마찬가지로 네이버 애널리틱스 코드도 나타나지 않습니다.

{% include /analytics-providers/naver.html %}

애드센스

애드센스 코드 역시 운영 사이트에서만 사용하는 것이 바람직합니다. 애드센스 코드는 <head> 태그 사이에 들어가는데, _includes/head/custom.html에 두는 것이 무난합니다.

{% if site.github.url == site.prod_url__ %}
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=<YOUR ID>"
       crossorigin="anonymous"></script>
{% endif %} 

robots.txt

Minimal Mistakes의 기본 robots.txt는 사이트맵에 대한 정보만 담고 있습니다. 크롤링은 기본으로 모두 허용된 상태입니다.

이전 글에서 테스트 사이트는 크롤링을 막기 위해 이를 다음과 같이 변경했습니다.

User-agent: *
Disallow: /

인터넷 검색을 해 보니 .txt 파일에 조건문을 쓰는 예가 있기는 합니다만, 제 경우에는 동작하지는 않았습니다. 변수가 치환되지 않고, 해당 파일 내용이 그대로 나타납니다.

일단은 테스트 사이트의 robots.txt를 그대로 두되, 운영 서버로 복사 후 최종 푸시 전에 삭제하는 방법이 지금으로서는 무난할 듯 합니다.

운영 사이트 리포지토리에 복사하기

검증이 완료된 테스트 사이트를 운영 사이트에도 동일하게 사용게 하려면, 테스트 리포지토리를 운영 리포지토리에 복사하면 됩니다.

참고
이러한 용도로는 브랜치(branch)를 따서 테스트 사이트를 개발하고, 검증이 완료되면 본래 브랜치(메인:main, 또는 마스터:master)에 지금까지의 수정 사항을 반영하는 것이 보다 적절한 방법입니다. 이 글에서는 다른 테마로 이주하는 과정이기에 최종 사항을 복사하는 방법을 사용하였습니다.

운영 사이트 리포지토리를 최종 푸시하고 사본을 만들어 놓습니다. 로컬에 리포지토리 사본이 있으면, 문제가 발생했을 경우 빠르게 대처할 수 있습니다.

cd ../QuantKang.github.io
git add -A
git commit -m 'BACKUP BEFORE MIGRATION'
git push
cd ..
mkdir BACKUP
cp -R QuantKang.github.io BACKUP/
rm -rf *
ls -a

.  ..  .git  .github  .gitignore

테스트 사이트 리포지토리를 일괄 복사합니다. 운영 사이트와 설정이 다른 robots.txt는 삭제하고, 푸시하였습니다.

cp -R ../QuantKangAlpha.github.io/* .
rm robots.txt
git add -A
git commit -m 'PUSH NEW THEME (MM)'
git push

점검하기

이제 제대로 설정되었는지 한 번 살펴보겠습니다.

메인 페이지

운영 사이트	테스트 사이트

제대로 생성되었습니다.

사이트 확인을 쉽게 하기 위해 테스트 사이트의 배경에 워터마크로 DEMO라는 글자를 넣어 두었습니다만, 조금 과해 보입니다.

robots.txt

제대로 생성되었습니다.

사이트 소유주 확인 코드

운영 사이트	테스트 사이트

제대로 생성되었습니다.

애널리틱스 코드

운영 사이트	테스트 사이트

제대로 생성되었습니다.