GitHub 블로그 만들기 (10) - Hits(방문자 수) badge 달기

13 Jan 2025 in Blog / Git-github / GitHub 블로그 만들기 on Github pages, Github blog, Jekyll, Jekyll theme, Hits

📝 GitHub 블로그에 방문자 수를 표시하는 Hits badge를 추가합니다.

안녕하세요, 해을입니다🦖

이번 글에서는 GitHub 블로그에 방문자 수를 표시하는 Hits 배지를 추가하는 방법에 대해 알아보겠습니다!

💡방문자 수 표시 기능

GitHub Pages(=GitHub 블로그)에서는 방문자 수 표시 기능을 제공하고 있지 않기 때문에

해당 기능을 사용하기 위해서는 직접 구현이 필요한데요.

이때 Hits를 이용하면 아주 간편하게 구현이 가능합니다.

Hits는 본래 GitHub repository 방문자 수를 세기 위해 만들어진 것으로

특정 URL의 새로고침 수를 측정하는 API입니다.

원리상 정확한 방문자 수를 측정하기는 어렵지만 기본적으로 방문자 수 측정 기능이 없는

GitHub Pages(=GitHub 블로그)에서는 그 역할을 기대해 볼만한 것 같습니다.

Hits 사이트에 접속한 뒤 최상단 TARGET URL에 본인의 GitHub 블로그 주소를 입력합니다.

자신만의 스타일대로 badge를 커스터마이징한 후에 HTML LINK를 복사합니다.

가장 대표적인 영역인 sidebar와 footer에 추가하는 방법을 살펴보겠습니다.

레이아웃 파일을 관리하는 _includes > body 폴더에 추가하고자 하는 영역의 레이아웃 파일이 있는지 확인합니다.

레이아웃 파일이 이미 있다면 그 파일을 수정하면 됩니다.

파일이 없다면 아래 [레이아웃 파일 검색 방법]을 참고하여 파일을 복사해옵니다.

레이아웃 파일 검색 방법 펼치기

위치 따라가기
vendor/bundle/ruby/3.0.0
/gems
/jekyll-theme-hydejack-9.1.5
/includes
/body
.gitignore에서 vendor 주석 처리 및 저장 후, 키워드 검색하기
- .gitignore 수정 및 저장 후, vendor 폴더의 색이 뚜렷해져야 검색이 가능합니다.
- footer, 9.1.5 등 키워드 검색 후, vendor~~로 시작하는 폴더의 footer 파일을 찾아주세요.
- 파일을 찾은 후에는 .gitignore에서 vendor 주석을 풀고 저장해주세요.