HITS로 방문자수 표시하기

2020-06-10 hit count image

HITS를 이용하여 정적 웹 사이트의 방문자 수를 표시해 봅시다.

개요

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

HITS란

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

HITS로 방문자수 표시하기 - HITS for github

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

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

HITS로 방문자수 표시하기 - HITS 서비스

위와 같은 화면에서 HITS를 사용하고 싶은 GitHub의 usernamerepo/project을 입력하면,

HITS로 방문자수 표시하기 - username, repo/project

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


![HitCount](http://hits.dwyl.com/dev-yakuza/react-native-image-modal.svg)

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

  • 방문자 표시: HitCount

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

Jekyll 블로그

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

HITS로 방문자수 표시하기 - hits on jekyll

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


<img style="width: inherit;" src="http://hits.dwyl.com/dev-yakuza.github.io{{ page.url }}.svg" alt="hit count image"/>

완료

여러분도 Jekyll을 사용하거나, 정적 사이트 생성기로 블로그를 사용하고 계신다면, HITS를 사용해서 사이트의 방문자를 표시해 보시면 어떨까요?

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native React Native로 실전 스마트폰 앱 만들기
Posts