GitHub 꾸미기 | waka-box : 프로필에 코딩시간 표시하기

내 메인에 위 사진처럼 언어별로 코딩시간을 표시하는법!

내가 사용하는 IDE와 연동해서 일주일동안 어떤 언어를 얼마나 사용해서 개발했는지 깃허브 프로필에 표시해보자~

WakaTime이라는 사이트와 깃허브 gist, waka-box레포지토리를 이용해서 설정하면 메인에 표시할 수 있다.

01. GitHub 설정(Gist, token 만들기)

✔️  GitHub Gist를 만든다 -> 링크

꼭 public으로 만들어야 한다!

이름은 아무렇게나 만들면 된다.

나중에 알아서 바뀜!

📌 그리고 description에는 아무것도 적지 않는다. description에 waka-box로 적었더니

Weekly development breakdown이라는 제목 대신 waka-box가 떴다...수정해서 지우면 되긴 하지만 적지 않기,,,,

✔️  깃허브 토큰을 만든다 -> 링크

gist에 체크를 하고 만든다

만든 후 토큰값은 한번만 보여주고 다신 안보여주기 때문에(까먹으면 재발급 해야함) 복사해서 잘 저장해두기

02. WakaTime 계정 설정

✔️  WakaTime 계정을 만든다 -> 링크

깃허브랑 연동시켜주면 된다.

가입후 날아오는 이메일 인증도 완료한다.

✔️  WakaTime 프로필 세팅 -> 링크

Location을 선택하고 체크박스 아래 두개를 선택하고 저장

✔️  WakaTime Api Key 복사 -> 링크

키를 복사해서 저장해둔다.

✔️  VSCode랑 연동

내가 사용하는 VSCode기준!

extensions에서 wakatime 검색해서 설치한다.

command + shift + p 를 눌러서 WkaTime: API Key 검색 후 wakatime api key 입력

03. waka-box Repo 설정

✔️  waka-box Repo Fork

waka-box 레포지토리 

GitHub - matchai/waka-box: 📊 Update a pinned gist to contain your weekly WakaTime stats

이 레포지토리를 fork해서 가져온다

✔️  Secret설정하기

fork해온 레포지토리에서 Settings->Secrets->Actions로 가서 

New repository secret을 설정한다.

Name : Secret

• GH_TOKEN : 아까 발급받은 깃허브 토큰
• GIST_ID : 아까 생성한 gist 주소에서 뒷부분 https://gist.github.com/깃헙아이디/a79bc4e058ed913b418cafeffccd2fd9
• WAKATIME_API_KEY : 아까 복사한 WakaTime Api Key

이렇게 세가지를 설정한다. 

✔️  schedule.yml 코드 변경

fork해온 repository에서

.github/workflows/schedule.yml 을 열어서 GIST_ID 부분을 아래처럼 수정한다.

✔️  enable workflow

레포지토리의 Action탭에서 workflow를 활성화한다.

마지막. 메인에 pin하기

만약 이렇게 제대로 뜨지 않으면

레포지토리 -> Actions -> Update gist with WakaTime stats로 들어가서 

오른쪽의 run workflow -> run workflow를 눌러준다

✨ 완료