블로그 hits counter 변경

얼마 전부터 블로그 hits count 이미지가 계속 404 Not Found로 떴다.

알고 보니, 기존에 hit counter를 표시하기 위해 사용했던 hits 서비스가 종료되었다고 한다. 여기에서 발견했다. 그래서 hits count를 표현하기 위해 사용하는 서비스를 MyHits로 변경하려고 한다.

내가 현재 github.io 블로그에서 사용하는 jekyll 테마인 Minimal Mistakes는 페이지 레이아웃을 _layouts/single.html에 정의한다. 나는 해당 레이아웃에서 hit count를 표현할 수 있도록 아래와 같은 부분을 커스텀해 추가했다.

<div>
<!-- 생략 -->
    <img style="width: 1500;" src="http://hits.dwyl.com/sirzzang.github.io//.svg" alt="hit count image">

  <nav class="pagination">
    
      <a href="/dev/Dev-AWS-HTTPS-With-Elasticbeanstalk/" class="pagination--pager" title="[AWS] AWS elastic beanstalk 환경 https 설정
">이전</a>
    
    
      <a href="#" class="pagination--pager disabled">다음</a>
    
  </nav>

    
<!-- 생략 -->
</div>

• hits url 추가 부분

MyHits 서비스를 사용해 표현할 수 있도록, MyHits에서 사용하는 URL 형식에 맞게 바꿔 주면 된다.

<div>
<!-- 생략 -->
    
    <img src="https://myhits.vercel.app/api/hit/https%3A%2F%2Fsirzzang.github.io%2F%2F?color=green&label=hits&size=small" alt="hit count">

  <nav class="pagination">
    
      <a href="/dev/Dev-AWS-HTTPS-With-Elasticbeanstalk/" class="pagination--pager" title="[AWS] AWS elastic beanstalk 환경 https 설정
">이전</a>
    
    
      <a href="#" class="pagination--pager disabled">다음</a>
    
  </nav>

    
<!-- 생략 -->
</div>

• 변경 내용 커밋

이 포스트에 대한 hit count를 표현하는 HTML element가 아래와 같이 생성된다.

<img src="https://myhits.vercel.app/api/hit/https%3A%2F%2Fsirzzang.github.io%2Fdev%2FDev-AWS-HTTPS-With-Elasticbeanstalk?color=green&amp;label=hits&amp;size=small" alt="hit count">