github profile 꾸미기 (feat. badge, github-readme-stats)

안녕하세요 😉

유유자적한 개발자 유로띠 입니다 😀

 

오늘은 삭막한 github를 꾸며보도록 하겠습니다

👏👏👏

꾸며도 삭막한건..비밀..

 

 

이번 포스팅에서는

✅ 개인 repository 만들기

✅ 배지 만들기

✅ readme stats 적용하기

✅  hits 적용하기

에 대해서 알아보겠습니다

 

 

🎉 special github README

---

repository 만들기

 

github 계정과 동일한 이름으로 repo를 생성합니다.

생성할 때 꼭 README.md 선택해 주세요

 

 

끝  😏

 

첫 번째 repository 생성은 끝났습니다.

이제 본격적으로 꾸미기 위해 READMD.md 파일을 수정해 봅시다

 

 

---

배지 사용하기

 

배지를 만들기 위한 사이트입니다.

https://shields.io/

 

단순히 개발 스택을 텍스트로 보여주는 건 너무 아쉽죠? 😜

 

아래처럼 다양한 배지를 만들어서 꾸며 봅시다

 

 

🟢 기본

기본적으로 아래처럼 작성하면 배지가 완성됩니다.

사이트에 접속하셔서 label, message, color를 입력하면 샘플을 볼 수 있습니다.

color는 Color Hunt를 참고하였습니다.

아마 대부분 언어가 자신만의 color가 있어서 고민은 거의 안하겠네요 🤣

 

 

아래의 예시대로 생성하면 오른쪽의 배지처럼 생성됩니다. 👍

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

ex) https://img.shields.io/badge/label-springBoot-green

 

🟢 스타일

5가지의 스타일을 지정할 수 있습니다.

plastic, flat, flat-square, for-the-badge, social

 

 

🟢  로고

배지안에 로고와 로고 색상을 넣을 수 있습니다.

 

로고 이미지는 simpleicons를 참고하였습니다.

 

✅  sample - java

<img src="https://img.shields.io/badge/-Java-344CB7?style=flat-plastic&logo=Java&logoColor=white"/></a>

 

해당 img 정보를 readme에 넣어주면 끝입니다 🙌

 

 

 

---

github stats

 

공식 github 주소는 github-readme-stats 이고

한글 번역은 github-readme-stats-kr 입니다.

 

github-readme-stats는 말 그대로 readme에 넣기만 하면 동적으로 사용량 통계를 보여줍니다 🙆‍♂️

 

 

 

✅  Get started

 

아주 쉽기 때문에 공식 github을 보고 따라 하면 금방 만들 수 있어요.

일단, 아래 코드만 복사해서 readme에 넣으면  바로 만들 수 있어요 👍

[![minseon yu's GitHub stats](https://github-readme-stats.vercel.app/api?username=사용자명)](https://github.com/사용자명/github-readme-stats)

 

 

등급은 다음과 같이 측정한다고 해요 😏

랭크는 S+ (상위 1%), S (상위 25%), A++ (상위 45%), A+ (상위 60%), 그리고 B+ (전체) 로 구성되어 있습니다.
커밋의 수(commits), 기여도(contribution), 이슈의 수(issues), 즐겨찾기(star), 작업내용 반영 요청(Pull Request), 팔로워 수, 그리고 보유 중인 저장소 등의 항목들에 대해 누적 분포 함수를 이용해 계산됩니다

 

기본적인 기능에서 대표적으로 제공하는 기능은 총 4가지입니다. 

 

✅ 개별 통계 숨기기

사용 가능한 통계는 커밋의 수(commits), 기여도(contribs), 이슈의 수(issues), 즐겨찾기(star), 작업내용 반영 요청(prs)이 있고 이 중에서 숨기고 싶은 항목을 입력하면 보이지 않게 됩니다.

https://github-readme-stats.vercel.app/api?username=사용자명)&hide=stars,contribs

 

 

✅ 비공개 기여도수 추가하기

회사에서 열심히 일한 pr이 안 보이면 섭섭하겠죠?

비공개 기여도에 대해서도 기능을 통해 추가할 수 있습니다

https://github-readme-stats.vercel.app/api?username=사용자명)&hide=stars,contribs&count_private=true

 

✅ 아이콘 표시하기

예쁘게 보이면 좋기에 통계 정보를 아이콘으로 표시해봅니다.

https://github-readme-stats.vercel.app/api?username=사용자명)&hide=stars,contribs&count_private=true&show_icons=true

 

✅ 테마 설정하기

마지막으로 지원하는 10개의 테마를 이용해서 꾸밀 수 있습니다.

dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula

https://github-readme-stats.vercel.app/api?username=사용자명)&hide=stars,contribs&count_private=true&show_icons=true&&theme=radical

 

 

이것 이외에도 다양한 테마가 있습니다.

사용 가능한 모든 테마는 여기서 확인 가능합니다

 

 

 

📍 참고

통계 창을 보면 이름이 표시되어 있는데, 이건 GitHub의 name을 자동으로 반영하고 있습니다.

근데, name profile를 수정한다고 바로 적용되진 않고 시간이 쫌 걸리더라구요. 😅

 

해당 부분의 이름을 변경하고 싶으면 github edit profile에서 name을 변경하면 시간이 지나면 자동 반영됩니다. 😊

---

hits

 

마지막으로 github 방문자 수를 표시해주는 hits 입니다

앞서 소개한 것 중에 아마 제일 간단하지 않나 생각됩니다.

hits 사이트로 들어가서 만들어주면 됩니다. 😜

 

 

 

원하는 내용을 입력하고 마크다운을 복사해서 READMD.md에 넣어주면 끝입니다. 👍

 

 

 

😏 적용된 유로띠 github

https://github.com/alstjs1207