[Git Page] Git 블로그 방문자 수, 조회수 기능 추가하기; Jekyll, Minimal Mistakes

세 줄 요약:

Jekyll & Minimal Mistakes 테마를 이용해 생성한 Git page 블로그는 기본적으로 방문자 수나 포스트의 조회수 기능을 제공하지 않는다.
Hits 사이트를 통해 간접적으로 해당 기능을 구현할 수 있다.
정확한 통계는 Google Analystics를 통해 파악 가능하다.

 

Introduction

---

Git Page는 프로그래밍을 어느 정도 알고 있다면, 정말 많은 것을 구현할 수 있는 일종의 블로그계의 샌드박스 게임과 같습니다. 그러나 이런 높은 자유도에 기인한 단점 역시 존재합니다. 이것은 우리가 마인크래프트를 처음 접했을 때와 비슷한 감정일 텐데요. 네이버 블로그나 티스토리에서는 기본적으로 제공하는 기능들조차 여기서는 DIY로 제작해야 합니다. 방문자 수나 포스트에 대한 조회수를 볼 수 있는 기능 역시 그 일부입니다. 이번 포스트에서는 Hits를 통해 간접적으로 해당 기능을 손쉽게 구현하고자 합니다. 추가로, Google Analystics를 통해 정확한 트래킹을 할 수 있음을 보여드리겠습니다.

모든 내용은 Jekyll & Minimal Mistakes 테마 사용을 전제로 합니다.

 

Git Page에 기능을 하나하나 Googling을 통해 추가하는 우리의 모습 [출처: Reference 참조]

 

Hits란?

---

Hits는 특정 URL이 얼마나 많이 새로고침 되었는지를 알려주는 API입니다. 따라서 Tistory, 네이버 블로그 등에서 제공하는 방문자 수, 조회수와는 다소 차이가 있지만 아무것도 없는 Git Page 환경에서는 가뭄의 단비 같은 존재입니다. 주소는 아래와 같으며, 많은 Github Profile에서 Hits를 사용해 방문자 수를 카운팅 하고 있습니다. 아래와 같은 Markdown 문법을 통해 hits badge를 생성할 수 있습니다.

 

[![HitCount](https://hits.dwyl.com/{username}/{project}.svg?style=flat-square)](http://hits.dwyl.com/{username}/{project})

Hits sample image

 

Hits Badge 커스터마이징

---

이제 우리는 Hits API를 통해 사이트 방문자 수를 기록할 수 있음을 알게 되었습니다. 엄밀히 말하면, 새로 고침 횟수입니다. 그러나 위에서 볼 수 있듯이 기본으로 제공되는 Hits Badge는 너무나도 구립니다! 녹색으로 도배된 모습이 DC의 그 녀석을 떠올리게 합니다.. Github Profile 상에서 방문자 수를 확인할 때는 그렇게 거슬리지는 않겠지만, 블로그의 경우 독자와 글쓴이 스스로를 위해 예쁘게 꾸미는 경우가 많습니다. 이 경우 저런 녹색 괴물은 통일성을 깸과 동시에 집중력을 저하시킵니다. 다행히도 Hits Badge의 경우 사용자가 원하는 대로 커스터마이징이 가능한데요. 좀 복잡한 방법과 간단한 방법, 두 가지가 있는데 오늘은 간단한 방법만 다루도록 하겠습니다.

 

HITS

 

우선, 위 주소로 들어가 줍시다. 들어가면 기존 Hits 페이지와 다르게 좀 세련된 사이트가 반겨줍니다. 그리고 아래와 같이 Generate Badge 부분을 통해 커스터마이징이 가능합니다. 우리가 수정 가능한 Options들에 대해 하나씩 살펴보도록 하겠습니다.

 

Hits Badge Customizing 하는 곳

 

• TARGET URL: 새로 고침 수를 측정할 사이트의 URL
• Add Icon: Sample badge에서 hits 좌측에 Icon을 띄울 수 있습니다. 아래 예시를 통해 보도록 하겠습니다.
• BORDER: Hits Badge의 모서리를 둥글게, 혹은 각진 모양 중 선택할 수 있습니다.
• TITLE BG COLOR: Sample badge에서 좌측, hits가 쓰인 공간의 배경색을 지정합니다.
• ICON COLOR: Add Icon에서 추가한 Icon의 색상을 선택할 수 있습니다.
• TITLE: Sample badge에서 hits 대신 들어갈 문구입니다. 현재는 hits로 입력되어 있습니다.
• COUNT BG COLOR: Sample badge에서 우측 731 / 18060322 에 해당하는 구역의 배경색을 지정합니다.

 

아래는 제 Git Page에서 사용 중인 Hits Badge 예시입니다. SLAM에 관심이 많으며, 방문자들을 잘 나타내는 것 같은 지도를 살펴보는 돋보기를 Icon으로 골랐으며, 깔끔한 것을 좋아하고 블로그 테마에도 어울려 색은 Black으로 통일했습니다.

 

https://youngj-baek.github.io

 

Jekyll & Minimal Mistakes 테마에 적용하기

---

이제 개성 넘치는 Hits Badge를 만들었으니, Git Page에 적용해 봅시다. 저의 경우는 블로그 하단(Footer)과 포스트 상단에 각각 방문자 수와 조회수를 생성하고자 합니다. 우선 Hits Badge 설정을 끝내고 스크롤을 아래로 내리면 다음과 같은 화면을 볼 수 있습니다. Markdown, HTML link, Notion을 위한 Embed URL을 제공하고 있으며, 이번에는 HTML 링크를 통해 블로그에 Badge를 삽입해 보도록 하겠습니다.

 

Hits Badge 사용법

 

블로그 하단에 방문자 수 추가

---

Jekyll & Minimal Mistakes 테마에서는 _includes/footer 폴더의 custom.html 파일을 통해 footer 커스터마이징을 지원합니다. 위에서 복사한 HTML 링크를 custom.html 파일에 추가해봅시다. 아래는 추가한 코드와 그 결과물입니다.

 

<!-- start custom footer snippets -->
<div style="text-align: center;">
    <a href="https://hits.seeyoufarm.com">
      <img 
        src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fyoungj-baek.github.io&count_bg=%23000000&title_bg=%23000000&icon=openstreetmap.svg&icon_color=%23E7E7E7&title=Visitors&edge_flat=false"/>
    </a>
  </div>
<!-- end custom footer snippets -->

 

블로그 하단에 방문자 수 추가

 

포스트 상단에 조회수 추가

---

이번에는 포스트 상단에 조회수를 표시해 봅시다. 현재 제가 사용하는 테마는 single.html 파일을 베이스로 포스트를 생성하고 있습니다. 이 파일은 _layouts/ 폴더에 있습니다. 이 파일 내에서 <header> ~ </header> 사이에 Hits Badge HTML 링크를 삽입해 줍시다. 그러나 블로그 방문자 수와 다르게 이번에는 포스팅을 새로 고침 해야지 카운터가 올라가도록 해야 합니다. 그래서 HTML 링크를 아래와 같이 수정을 해주도록 합시다. 

 

<div style="text-align: center;">
	<a href="https://hits.seeyoufarm.com/{{ site.url | remove_first: 'https://' | remove_first: 'http://' }}{{ page.url }}"target="_blank">
    	<img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://{{ site.url | remove_first: 'https://' | remove_first: 'http://' }}{{ page.url }}&count_bg=%23000000&title_bg=%23000000&icon=openstreetmap.svg&icon_color=%23E7E7E7&title=Visitors&edge_flat=false"/>
    </a>
</div>

 

single.html 파일에 추가한 예시는 코드 자체가 너무 길어 링크로 대체하도록 하겠습니다. 아래는 조회수 기능을 추가한 제 블로그의 포스트 중 하나입니다.

 

포스트 상단에 조회수 추가

 

Reference

---

Kenny Eliason (@neonbrand) | Unsplash 사진 커뮤니티

 

Thread Through

 

GitHub - YoungJ-Baek/YoungJ-Baek.github.io: YoungJ-Baek.github.io

 

[GithubPages] 08.조회수