[Github Blog] 6. Github Pages 블로그 기능 추가

이 게시물은 Github Pages 블로그, 혹은 Minimal Mistakes 테마에 없는 기능들을 추가해나간 기록들이다. html이나 css를 다룰 줄 알면 금방 할 수 있는, 혹은 다 구글링하면 나오는 내용들이긴 하지만 내가 어떻게 문제를 인식하여 어떤 과정을 거쳐 이를 해결하였는지, 에 대해 자세히 쓰고 싶었다. 그래서 이 게시물은 다른 게시물들과 달리, 내가 블로그에서 부족하다고 느낀 점들을 계속 조금씩이라도 보충해나갈 계획이다.

1. 블로그 댓글 (feat. disqus, giscus)

앞서 서술한 게시물을 보면 Github Pages는 정적 웹 사이트 호스팅 서비스라는 말이 있다. 모든 웹 페이지를 미리 생성하고, 방문자로부터 요청이 들어오면 미리 만든 웹 페이지를 그대로 응답한다는 건데, 사용자와 동적으로 정보를 주고받아야 하는 댓글 등의 기능은 불가능하다는 것이다.

그래서 처음에는 댓글 플랫폼인 disqus를 통해 이를 해결하고자 하였다. 방법은 간단한데, 사이트에 가입하고 무료 플랜을 구독한 다음에 _config.yml를 다음과 같이 수정해주기만 하면 된다.

comments:
  provider               : "disqus" # 댓글 제공자 지정
  disqus:
    shortname            :          # disqus ID 지정

그런데 disqus에서 제공하는 기능인 ‘SNS로 댓글 달기’은 개발자 친화적인 기능은 아니였고, 또 나중에는 광고가 노출되기 시작했다. 그래서 대안으로 찾은 게 giscus인데, GitHub Discussions로 작동하고, 마크다운도 지원하면서 대댓글이나 반응과 같은 자잘한 기능들이 마음에 들었다.

적용하는 방법도 Github 앱을 저장소에 설치한 뒤에 html 파일에 아래의 스크립트를 넣어주기만 하면 되는데, 나 같은 경우에는 Minimal Mistakes 테마에서 _includes/social_share.html 파일에 해당 구문을 넣어 적용시켰다.

<section class="page__share">
  <script src="https://giscus.app/client.js"
    data-repo="pocj8ur4in/pocj8ur4in.github.io"
    data-repo-id="R_kgDOICGarA"
    data-category="Q&A"
    data-category-id="DIC_kwDOICGarM4CZ65L"
    data-mapping="pathname"
    data-strict="1"
    data-reactions-enabled="0"
    data-emit-metadata="1"
    data-input-position="top"
    data-theme="dark_dimmed"
    data-lang="ko"
    data-loading="lazy"
    crossorigin="anonymous"
    async>
  </script>
</section>

2. 블로그 Google 검색 노출 및 검색 설정

아무래도 블로그를 운영하다 보면 다른 사람들의 반응이 궁금할 때가 많은데, 아무것도 설정하지 않은 블로그는 검색되지 않는다는 사실을 깨닫고 해결책을 찾아보았다. Google Search Console에서 내 도메인을 입력한 다음에 소유권 확인을 위해 다운받은 .HTML파일을 root에 위치시키만 하면 며칠 안으로 아래와 같이 적용된다.

추가로 블로그 포스트들이 검색 엔진에 검색되는 것을 가능하도록 진행할 작업들이 있는데, 먼저 _config.yml 파일에서 아래 설정들을 true로 설정한다.

search                   : # 블로그 검색 여부 지정
search_full_content      : # 블로그의 내용 검색 여부 지정

그리고 웹 크롤링을 위해 sitemap.yml과 robots.txt 파일을 생성해 root에 위치시키면 된다.

# 모든 웹 사이트 컨텐츠에 대한 모든 웹 크롤러의 접근 허용
User-agent: *
Allow: /

# 모든 웹 사이트 컨텐츠에 대한 모든 웹 크롤러의 접근 차단
User-agent: *
Disallow: /

# 구글 검색 로봇만 차단하고, 다른 모든 웹 사이트 컨텐츠에 대한 모든 웹 크롤러의 접근 허용
User-agent: Googlebot
Disallow: /

# 네이버 검색로봇만 차단하고, 다른 모든 웹 사이트 컨텐츠에 대한 모든 웹 크롤러의 접근 허용
User-agent: Yeti
Disallow: /

Sitemap: https://pocj8ur4in.github.io/sitemap.xml

만약에 블로그의 방문자 수 통계를 보고 싶다면, Google Analytics를 가입한 후 애널리틱스 데이터 스트림을 설정하면 된다. 이때, 측정 ID를 복사한 후 _config.yml 파일을 다음과 같이 수정하면 된다.

# Analytics
analytics:
  provider               : "google-gtag"
  google:
    tracking_id          : "(측정 ID)"