[Winter Blog Challenge] 깃허브 꾸미기(Member 성준희)

GDSC SungShin 23-24 Member 성준희

 

깃허브에 들어갈 때마다 내 프로필이 허전하다고 느껴졌다
기술적인 컨텐츠는 다른 분들이 많이 공유해주실 것 같아서
내 깃허브 프로필도 꾸미고 다른 분들께도 도움이 되었으면 하는 마음에 준비하게 되었다
 

1. 본인 깃허브 계정 닉네임과 이름이 같은 레포지토리를 생성한다


2. 자동으로 README.md 파일이 등록되어 있는데 열어보면 주석으로 간단한 설명이 들어있다
이 README.md 파일을 수정하는 방식으로 깃허브 프로필을 꾸밀 수 있다

깃허브의 README.md 파일은 마크다운 문법을 사용하여 작성해야한다
마크다운 문법은 기본적인 것만 알면 작성하기 쉽지만 익숙하지 않은 분들은 https://gist.github.com/ihoneymon/652be052a0727ad59601 해당 링크를 참고하면 좋을 것이다

깃허브는 커밋을 해야만 수정 결과를 확인할 수 있는 단점이 있으니
https://dillinger.io/ 링크를 활용해 여러 번 커밋하지 않고 바로 결과물을 확인하며 작성하는 것이 편하다


3. 헤더 추가
깃허브 프로필 상단에 위치할 헤더는 캡슐 렌더라는 오픈 api를 사용하면 쉽게 꾸밀 수 있다
https://github.com/kyechan99/capsule-render 에서 원하는 스타일로 만들고 링크를 복사해서 사용하면 된다
README.md에는  로 입력하면 된다


4. 기술 스택 뱃지 추가
깃허브 프로필에 나열된 기술 스택 뱃지들을 많이 봤을 것이다

<a href="뱃지를 클릭했을 때 연결되는 링크" target="_blank"><img src="https://img.shields.io/badge/뱃지 라벨-배경 컬러?style=뱃지 모양&logo=로고&logoColor=로고 컬러"/></a>

이 코드를 입력하면 추가할 수 있는데 우리가 원하는 뱃지에 맞게 수정해하는 부분은 다음과 같다
-  뱃지를 클릭했을 때 연결되는 링크 (ex. 티스토리 뱃지라면 티스토리 링크를 넣는 것)
-  뱃지 라벨 : https://simpleicons.org/ 에서 확인 가능하다
-  배경컬러와 로고컬러 : 헥사코드를 입력하되 #는 제외하고 000000 ~ FFFFFF 값을 입력하면 된다
-  뱃지 모양 : plastic, flat, flat-square, for-the-badge, social  총 다섯 가지 중에 선택할 수 있다

그 외에 직접 생성하고 싶은 뱃지가 있다면 https://shields.io/ 에서 직접 생성해도 좋다


5. 깃허브 스탯 추가

- 깃허브 사용자 이름 부분에 깃허브 아이디를 입력하면 된다
- 테마도 변경할 수 있는데 https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md 여기 링크에서 확인할 수 있다
- &include_all_commits=true 가 있어야 private repository 에서 커밋된 숫자도 표시된다


6. 커밋시간 통계 추가
-  https://github.com/techinpark/productive-box 해당 링크의 레포지토리를 fork한다
-  https://gist.github.com/ 해당 링크에서 public gist를 생성하고 https://gist.github.com/사용자 아이디/ 로 적힌 부분을 복사해둔다
-  https://github.com/settings/tokens/new 해당 링크에서 repo와 gist 두 가지를 선택한 후 깃허브 토큰을 생성하고 반드시 복사해둔다 (복사하지 않으면 다시 확인할 수 없다)
-  fork한 레포지토리에 있는 .github/workflow/Schedule.yml 파일을 수정하는데
GH_TOKEN 에는 생성 후 복사해둔 토큰을, GIST_ID 에는 복사해둔 gist id를 삽입한다
secrets의 이름을 정확히 지정해야한다
- 내 프로필에서 gist를 고정한다 (1시간 주기로 업데이트 되기 때문에 바로 적용되지 않을 수도 있으니 바로 적용하고 싶다면 README.md 파일을 한 번 수정해준다)


7. 방문자 수 추가
-  https://hits.seeyoufarm.com/ 해당 링크에서 깃허브 사용자 아이디를 입력하고 옵션을 수정해서 생성할 수 있다
방문자 수 뱃지의 구성은 아이콘 +  오늘 방문자 수 / 총 방문자 수 형태로 되어있다
-  https://mybrandnewlogo.com/ko/color-palette-generator 옵션에 사용할 색은 해당 링크를 참고해서 선택할 수 있다


8. 그 외 추가적 뱃지 생성 링크
- 벨로그 포스트 소개  https://github.com/eungyeole/velog-readme-stats
- 티스토리 최근 게시물 또는 특정 게시물 추가   https://github.com/loosie/github-readme-tistory-card
출처: https://easyhomputer.tistory.com/22 [6_oHji:티스토리]
- 백준 티어   https://github.com/mazassumnida/mazassumnida
- 깃허브 이모티콘   https://security-nanglam.tistory.com/491
- 깃허브 스탯과 유사한 언어 관련 위젯    https://github.com/rahul-jha98/github-stats-transparent
- 홈화면 잔디과 유사한 기능으로 커밋 숫자와 날짜를 그래프로 표현하는 위젯   https://github.com/Ashutosh00710/github-readme-activity-graph
- 깃허브 총 기여수, 연속 커밋 날짜 계산   https://github.com/DenverCoder1/github-readme-streak-stats