HITS로 방문자수 표시하기

Deprecated

이 블로그 포스트에서 소개하는 HITS는 서비스가 종료되었습니다. 만약, HITS와 비슷한 서비스를 사용하고 싶으시다면, 다음 서비스를 사용해 보시기 바랍니다.

https://myhits.vercel.app/

Markdown 문법으로는 다음과 같이 사용할 수 있습니다.

[![hits](https://myhits.vercel.app/api/hit/https%3A%2F%2Fdeku.posstree.com?color=blue&label=hits&size=small)](https://myhits.vercel.app)

HTML 문법으로는 다음과 같이 사용할 수 있습니다.

<img src="https://myhits.vercel.app/api/hit/https%3A%2F%2Fdeku.posstree.com?color=blue&label=hits&size=small" alt="hits" />

저처럼 Jekyll을 사용하신다면, page.url을 다음과 같이 변경하여 사용해 보시기 바랍니다.

<img style="width: inherit;" src="https://myhits.vercel.app/api/hit/https%3A%2F%2Fdeku.posstree.com{{ page.url | replace:'/', '%2F' }}?color=red&label=hits&size=medium" alt="hit count image"/>

개요

저는 Jekyll과 GitHub을 이용하여 이 블로그를 작성하고 있습니다. 이런 정적 사이트에 방문자 수를 표시하는 방법이 없나 찾아보다가, HITS라는 프로젝트를 발견했습니다.

HITS: GitHub

HITS란

HITS는 원래 GitHub 프로젝트의 방문자 수를 표시하기 위한 프로젝트입니다.

HITS를 사용하기 위해서 아래에 사이트를 방문하면

HITS: https://hits.seeyoufarm.com/

아래와 같은 화면을 볼 수 있습니다.

위와 같은 화면에서 HITS를 사용하고 싶은 사이트의 URL을 입력하면,

아래와 같은 URL을 얻을 수 있습니다.

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fdeku.posstree.com%2Fshare%2Fhit-counts%2F&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)

이 링크를 GitHub의 README에 붙이면 아래와 같이 동적으로 방문자 수를 표시할 수 있습니다.

방문자 표시:

새로고침을 하면 위에 숫자가 변경되는 걸 확인할 수 있습니다.

Jekyll 블로그

저는 HITS를 사용하여 Jekyll 블로그의 방문자 수를 표시하고 있습니다.

이렇게 표시하기 위해 아래와 같은 코드를 _layouts/post.html에서 사용하고 있습니다.

<img
  style="width: inherit;"
  src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fdev-yakuza.github.io%2F{{ page.url }}&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"
  alt="hit count image"
/>