[3분만에 만드는 깃허브 블로그] 방문자 수 세기

자료 출처: https://github.com/gjbae1212/hit-counter

GitHub - gjbae1212/hit-counter: :rocket: Easy way to know how many visitors are viewing your Github, Website, Notion. :tada:

 

---

 
 

1. counter 추가

 
먼저, 위에 자료로 올려 둔 깃허브에 들어가 나의 깃허브 블로그 주소의 링크를 입력하고 스타일링을 마음대로 꾸며줍니다. (저는 핑크로,,)
 

 
아래는 디폴트 스타일링이다.
 

 
 
해당 카운터를 내 블로그에 추가를 해야하기 때문에 HITS 아래에 자동 생성된 html 링크를 copy하여  index.html 파일을 수정해줍니다..!
 

    <!-- category 검색 영역 -->
    <section
      class="category-aside hidden md:flex flex-col border border-graylv2 bg-white rounded-[10px] fixed top-24 right-8 overflow-y-auto w-fit h-fit"
    >
      <header class="flex items-center">
        <h2 class="aside-tit sr-only text-sm font-semibold ml-5">content</h2>
        <button id="aside-button">
          <span class="sr-only">카테고리 열기</span>
        </button>
      </header>
      <aside>
        <div class="px=-5 py=[y=-9]">
          <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fhyunhe2e.github.io%2Fweniv_blog%2F&count_bg=%23E5BBDA&title_bg=%23ABABAB&icon=iconify.svg&icon_color=%23FFFFFF&title=counter&edge_flat=false"/></a>
        </div>
      </aside>
    </section>
    <!-- // category 검색 영역 -->

 
 
위치를 저는 카테고리 옆에 추가하였는데, 원한다면 다른 메뉴에 추가할 수도 있습니다.
 

 
 
완성된 결과물을 보니 제법 귀엽네요!