[뚝딱뚝딱] GitHub 프로필 꾸미기

따라 하기 이전, 마크다운이 익숙하지 않거나 처음 프로필을 꾸며 보는 사람은 https://github-profile-readme-creator.web.app/ 먼저 사용해보길 바란다. 치는 대로 뱃지와 GitHub stats를 만들어준다. 

 

결과물

 

+) 2022.Jan.15 업데이트 버전

 

목차 

1. 뱃지 만들기

2. 방문자 표시

3. GitHub stats

4. WakaTime stats

5. 백준 티어

6. 결론

---

1. 뱃지 만들기

https://shields.io/

Shields.io: Quality metadata badges for open source projects

이런 귀여운 뱃지들은 위의 사이트에서 만들 수 있다. 스크롤을 쭉쭉 내리다 보면 "Your Badge"라는 텍스트가 나오는데 거기 밑에다가 원하는 대로 쓰면 된다. label은 옵션이다. 

원하는 대로 만들어 써도 되고, 사이트 들어가자마자 보이는 링크들에 들어가서 원하는 뱃지 사용해도 된다.

 

2. 방문자 표시

https://hits.seeyoufarm.com/

HITS

이건 깃허브 방문자를 표시해주는 뱃지다. 만약 "/" 뒤에 숫자 붙는 게 싫으면 아래의 코드를 사용하라.

 

![](https://visitor-badge.glitch.me/badge?page_id=깃허브아이디)

 

3. GitHub Stats

https://github.com/anuraghazra/github-readme-stats

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

위의 링크에 가 readme에 설명된대로 하면 된다.

 

https://github.com/anuraghazra/github-readme-stats#all-demos

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

나는 all-demos에 gradient를 따라 했다. 그런데 나처럼 저렇게 두 개를 한 줄로 만들고 싶을 경우, 아래와 같이 하면 된다. 유저 이름 뒤에 부분은 다 레이아웃에 관련된 부분이니 원하는 대로 고치면 된다.

 

<p>
  <img height="180em" src="https://github-readme-stats.vercel.app/api?username=유저이름&show_icons=true&include_all_commits=true&bg_color=30,e96443,904e95&title_color=fff&text_color=fff">
  <img height="180em" src="https://github-readme-stats.vercel.app/api/top-langs/?username=유저이름&layout=compact&bg_color=30,e96443,904e95&title_color=fff&text_color=fff">
</p>

 

+) 2022.Jan.16

이런 에러가 뜬 사람은 밑에 접은 글을 참고하라. 실은 저 고생을 하고 이제 마지막 단계만 남았을 때 다시 보니 에러가 해결되어 있었다. 이런. (에잇 그래도 에러를 고쳐서 내 리드미 예쁘게 꾸민 거 자랑하려고 했는데 딱 에러가 떠있는 상황이 일어날 일 없으니 쓸데없는 짓을 한 건 아니라고 생각한다.)

 

여하튼 내버려두면 에러가 해결되니 번거롭게 에러 해결을 안 해도 되지만 (다만 내버려두었을 때 단점은 저 에러가 언제 또 나타날지 모르며, 언제 해결될지도 모른다는 것이다. 아마도 정각마다 에러가 해결되는 것 같다), 저 에러 다시 발생하는 게 싫은 사람은 밑에 적힌 대로 해결하면 된다.

와 에러 떻다! 와! 에러다! 아이 신나! 왜 에러가 발생했는지 구글링 해보니 https://github.com/anuraghazra/github-readme-stats/issues/325 이런 이슈가 있었다.

NOTICE: DEPLOYMENT IS CURRENTLY DISABLED · Issue #325 · anuraghazra/github-readme-stats

 

그래서 답변대로 오피셜 리드미 뒤적거려보니 https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance 이런 칸이 있었다. 대충 번역하면 깃허브 API는 시간당 5K request만 허용하는데, 우리는 이거 만든 사람 vercel server를 빌려 써서 이 허용 범위를 넘어설 때마다 이런 에러가 발생하는 것이다. 전에 봤을 땐 이게 뭐지 하고 넘겼는데 이래서 있는 거구나 싶었다. 여하튼 해결책도 알았으니 고치러 갑시다.

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

 

우선, https://github.com/anuraghazra/github-readme-stats 이 레포를 fork 해야 한다.

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

 

그리고 밑에 하이라이트된 부분을 10으로 바꾸라는데 왜 그런지는 모르겠으나 그냥 하자. 나는 저 destination url의 username 부분을 내 걸로 바꿨는데 아무 문제없었다. 히히 내 맘대로 할 거야.

 

이제 토큰을 만들러 가야 한다. 여기 가서 note는 맘대로 적어도 되고 repo만 클릭해주면 된다. 밑에 WakaTime stats 만들 때 설명해서 자세한 건 거기에 적어놯으니 이 설명만으로 이해 안 가면 보러 가시라.

 

얼마 안 남았다. 이쯤 오면 아 귀찮네 포기할까 싶지만 여기까지 온 이상 같이 갑시다. (실은 내가 저랬다.)

 

https://vercel.com/에 가서 회원가입을 해야 한다.

Develop. Preview. Ship. For the best frontend teams – Vercel

 

주의할 점은 회원 가입할 때 Continue with GitHub으로 해야 한다는 것이다.

 

깃허브로 회원 가입한 후 이런 화면이 뜰 것이다. 저기 Import Git Repository에 아무것도 안 떠있는 게 정상이니 당황하지 말자. 나는 이미 다 해결한 뒤에 글 쓰고 있어서 있는 것뿐이다. 여하튼 search 왼쪽 칸을 클릭해서 Add GitHub Account를 클릭한다. 그럼 새 창이 뜨는데 vercel의 github access 허용할 거냐고 물어보니 허용 허락하자.

 

그럼 뭐 이런 레포 접근 허용 물어보는 게 나오는데 리드미에선 다 허락하라는 걸 추천하는데 나는 그게 싫어서 선택적 접근 허용을 했다. 히히 말 안 듣기 재밌다.

 

그럼 아까 이미지처럼 import 칸이 생긴다. 누르면 이런 화면이 뜬다.

 

이름이야 맘대로 해도 되고, 저기 Environment Variables를 클릭해서 아까 만든 토근을 복붙 해준다. 참고로 value에 적혀 있는 건 예시다. Name은 꼭 PAT_1이라고 해야 한다. 그리고 Add를 클릭한 뒤 Deploy를 클릭하면 완성이다.

 

짠 진짜 거의 다 끝났다. 이제 저 Domains를 복사해서 Readme url만 수정하면 된다. 저 기본 제공 도메인이 마음에 안 든다면 저 옆에 +2 아이콘에 마우스를 올리면 github-stats 어쩌고 하는 다른 도메인 두 개가 더 있다. 거기에서 자기 깃허브 아이디가 들어 있는 도메인도 있으니 그걸 사용해도 무관하다.

 

아래와 같이 수정해주면 끝이다. 

[![Github stats](https://복사한도메인.vercel.app/api?username=깃허브아이디)]

4. WakaTime Stats

https://wakatime.com/

WakaTime - Dashboards for developers

우선 여기 사이트를 가서 회원가입을 해야 한다. 

 

그다음 Setting > Edit profile에 가서 이름이랑 유저 네임 이런 것들을 치고 밑에 선택 칸들을 선택한다.

 

Total code time badge(위의 사진)는 옆에 복붙 아이콘을 눌러 마크다운 형식을 복사한 뒤, 그대로 readme에 복붙 하면 된다.

 

그리고 Account로 가 API Key를 복사한 뒤, Supported IDEs > 사용하는 IDE 아이콘을 클릭한다. 그리고 문서에서 설명하는 그대로 따라 하면 된다. 친절하게 GIF로도 설명해놨으니 잘 따라 하기만 하면 된다. 

 

https://github.com/anuraghazra/github-readme-stats#wakatime-week-stats

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

그다음 위에 링크에 설명한 대로 따라 하면 된다. 

[![유저이름's wakatime stats](https://github-readme-stats.vercel.app/api/wakatime?username=유저이름)]

 

+) 2022.Jan.15 

나는 매주마다 코딩 시간이 갱신되는 것을 기대했으나, 왜인지 되지 않았다. README를 뒤져보니 username=유저이름&stats=last_7_days 이렇게 하면 7일 동안의 기록을 보여준다는데 이것도 되지 않았다. 그래서 바꾸기로 했다. 

이렇게 말이다.

 

https://github.com/anmol098/waka-readme-stats

GitHub - anmol098/waka-readme-stats: This GitHub action helps to add cool dev metrics to your github profile Readme

 

우선 깃허브 프로필 README에서 stats를 추가할 공간을 만들어주기 위해 아래와 같이 작성한다. 이 표는 매일 IST(Indian Standard Time) 기준 오전 12시, 한국 시간 오전 3:30분에 갱신된다. 이 표 사이에 다른 것들을 써두면 갱신될 때마다 그건 다 지워지고 오직 stats만 남는다. 그러니 주의하도록 하자. 

 

<!--START_SECTION:waka-->
<!--END_SECTION:waka-->

 

그리고 GitHub API Token, WakaTime API Key 생성 및 등록해야 한다.

 

우선 GitHub API Token부터 생성하자. GitHub -> Setting -> Developer Setting -> Personal access tokens로 간다(GitHub repo setting 말고 계정 setting). 링크는 여기. 그리고 Generate new token 버튼을 클릭한다.

 

그럼 아래와 같은 화면이 뜨는데 Note에 GH_TOKEN이라 작성하고, Expiration은 No expiration으로 설정한다. 그리고 밑에 Select scopes에 reop와 user 선택지를 클릭한다. 그리고 밑으로 쭉 내려서 Generate new token 버튼을 클릭한다. 생성된 뒤에 꼭 토큰 key를 복사해둬야 한다. 화면을 새로고침 하면 key를 다시 복사할 수 없기 때문에 복사하길 까먹었다면 다시 생성해야 한다. 

 

이제 WakaTime API Key가 필요한데, 이 링크에 가서 가져오면 된다. 물론 WakaTime 계정이 있어야 하니 계정이 없다면 위에 계정 생성 방법이 적혀 있으니 그래도 따라 하길 바란다. 

 

이제 프로필 레포로 가자. Profile repo -> Setting -> Secrets로 가서 New repository secret 버튼을 클릭한다. 그리고 Name을 GH_TOKEN, Value는 아까 복사한 깃허브 토큰을 붙여놓기 하고 Add secret 버튼을 클릭한다. 그리고 WakaTime API Key도 동일하다. Name을 WAKATIME_API_KEY로, Value는 복사해둔 api key를 붙여놓기 하면 된다.

 

이렇게 생성이 완료되면 profile repo -> actions -> set up a workflow yourself를 클릭한다.  

 

그럼 이런 화면이 뜨는데 저기 적혀있는 것들을 다 지우고 그리고 아래의 코드를 복붙 하고 저장한다. 

 

name: Waka Readme

on:
  schedule:
    # Runs at 12am IST
    - cron: '30 18 * * *'
    # cron: '00 15 * * *'로 하면 한국 시간 기준으로 오전 12:00에 업데이트 된다
  workflow_dispatch:
jobs:
  update-readme:
    name: Update Readme with Metrics
    runs-on: ubuntu-latest
    steps:
      - uses: anmol098/waka-readme-stats@master
        with:
          WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

 

다시 Actions 탭으로 가면 이런 것이 생성되어 있다. 그럼 저 밑에 Run workflow를 클릭해 실행한 뒤, 몇 분 기다려주면 프로필 리드미가 변경되어 있는 것을 볼 수 있다. 

 

Stats 외에도 여러 Flag를 지원해주는데 원하지 않는 Flag는 지울 수 있다. 리드미를 참조하여 원하는 대로 변경하도록 하자.

 

https://github.com/anmol098/waka-readme-stats#flags-available

GitHub - anmol098/waka-readme-stats: This GitHub action helps to add cool dev metrics to your github profile Readme

https://github.com/anmol098/waka-readme-stats/blob/master/action.yml (리드미에 안 적혀 있는 Flag도 여기에 적혀있다.)

GitHub - anmol098/waka-readme-stats: This GitHub action helps to add cool dev metrics to your github profile Readme

 

5. 백준 티어

https://github.com/mazassumnida/mazassumnida

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

[![Solved.ac
프로필](http://mazassumnida.wtf/api/v2/generate_badge?boj=유저이름)](https://solved.ac/유저이름)

유저 이름 부분만 수정하고 그대로 readme에 복붙 하면 된다. 

 

결론

리드미 예쁘게 만드는 것 어렵지 않다. GitHub 돌아다니다가 예쁜 프로필을 발견하면 소스코드를 보고 내 리드미에 적용시키면 되는 것이다. 프로필 만들어만 놓고 못 꾸미고 있었는데, 이렇게 꾸며놓고 보니 뿌듯하고 기분이 좋다. 혹여 내 소스코드가 궁금하다면 아래 링크를 참조하라.

 

https://github.com/veggie-garden/veggie-garden/blob/main/README.md

GitHub - veggie-garden/veggie-garden: Hello World!