깃허브 블로그 조회수 기능 추가

댓글 기능을 추가하니 조회수도 보이면 좋겠다는 생각이 들었다. 티스토리의 방문자 집계 방식이 마음에 들어 그걸 그대로 하고싶었으나, 깃허브 블로그에서는 대부분 HITS라는 서비스를 이용하는것 같았다.

https://hits.seeyoufarm.com

250328 추가
분명 처음 테스트할때는 위 링크에서 했던 것 같은데 글쓰고 게시하는 사이에 404 에러가 뜬다;; 도메인이 만료되신건지.. 배지도 깨진다..

처음에는 도메인만 바뀌거나 문제가 생긴건가 하고 찾아보다가 같은 이름의 유사한 서비스를 발견하였다. 이하 설명은 동일.

https://hits.sh/

구현은 매우 단순하다. 레포 링크를 넣으면 배지를 위한 html 코드가 생성되고, 이를 적절한 위치에 삽입하면 된다.

본인은 티스토리 스타일을 추종하기 위해 _includes/sidebar.html에 tagline 아랫줄에 추가하였다. 색상을 같게 해서 배지처럼 안보이게 하고 싶었는데 색상을 잘못 넣은건지 그라데이션 효과 때문인지 그렇게 되지는 않았다.

<!-- The Side Bar -->
<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
  <header class="profile-wrapper">
    <a href="/" id="avatar" class="rounded-circle"><img src="/assets/img/photo.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a>

    <h1 class="site-title">
      <a href="/">reason_rock</a>
    </h1>
    <p class="site-subtitle fst-italic mb-0">Develop Note</p>
    <p class="visitor-count mt-4" style="margin-top: 10px;">
      <a href="https://hits.seeyoufarm.com"
        ><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Freason-rock%2Freason-rock.github.io&count_bg=%23262626&title_bg=%23262626&icon=github.svg&icon_color=%23E7E7E7&title=Visitor&edge_flat=false"
      ></a>
    </p>
  </header>
  <!-- .profile-wrapper -->

흥미로운 점은 jekyll serve로 127.0.0.1에서 새로고침을 해도 조회수가 올라가는 것 같다는거…?