깃허브 프로필 커스터마이징 - productive-box

디아·2022년 8월 31일
0

삽질록

목록 보기
1/1
post-thumbnail

어느날 친구들의 깃허브를 돌아다니던 중 재밌는게 하나 보였습니다.

사진속의 내용만 보면 시간대별로 내가 언제 얼마나 커밋을 했는지 나타나게 해주는 그래프가 쫙 나와있더군요.. 사실 제 깃허브도 나름? 비워졌다고는 생각하진 않지만 그래도 하나 추가해주면 보기 예쁠거 같다는 생각이 들었습니다. 그래서 한번 찾아봤더니,

다음과 같은 사이트를 확인할 수 있었습니다. 아래에 친절하게 README 파일이 있길래, 고대로 한번 진행해봤었습니다.

해당 글은 2022년 8월 기준으로 작성되었습니다.

techinpark/productive-box 적용..하려 했어요

원래는 maxam2017님께서 만드신 프로젝트인데, techinpark님께서 한국 버전으로 조금 재구성해서 올리셨던 버전입니다. 그래서 원래는 적용이 되어서 동작을 하는데

이런 오류가 또 나더라고요.. 정확한 원인은 모르겠지만 구버전 코드에서 Typescript 정책 변경 등으로 인해 적용이 되었던게 동작이 되지 않았을 수도 있습니다. 그래서 이분 말고 원본 repo를 받아오시면 됩니다..

이거땜에 삽질을 좀 했습니다.. 제 수준에서 고칠 수 있는줄 알았는데 그냥 새로 받을걸 괜히 시도하고 있었네요 ㅎㅎ;;

maxam2017/productive-box 적용

techinpark님에 있는 README 파일이지만, 그대로 적용해도 문제없이 동작합니다!

  1. 새로운 Github public Gist를 만드세요

    해당 링크로 이동한 뒤 사진처럼 public gist로 옵션을 변경하고 추가해주시면 됩니다. 제목과 내용은 아무렇게나 해도 상관없습니다! 어차피 자동으로 바뀔거거든요. (처음엔 뭔갈 입력해야 할줄 알았는데 아니더라고요 ㅎㅎ;;)

  1. gist와 repo 권한이 있는 토큰을 생성해 복사하세요.

    토큰 생성 화면으로 이동하시면 많은 필드들이 뜨는데 거기서 고대로 repogist 필드를 활성화 시켜줍니다.

    그리고 아래쪽에 Generate Token이라는 버튼을 누르게 되면 이상한 문자열들이 출력됩니다. 이게 토큰값인데, 이 값은 절대 유출해서는 안되며 한번만 노출되니 잘 저장해두시길 바랍니다

  2. 그다음 이 저장소를 Fork 합니다.


그러면 다음과 같이 잘 fork가 된 것을 확인해줄 수 있습니다.

  1. Actions 탭에서 enable 설정을 해주세요


요로콤 Enable 해주시면 됩니다.

  1. .github/workflows/schedule.yml 이 파일을 열어 설정을 변경시켜 주세요.

    1. GIST_ID: 당신의 Gist URL의 ID를 입력해주세요
    2. 자신의 위치에 맞는 TimeZone을 입력해주세요

    아래의 사진과 같이 이동하면 다음과 같은 내용들이 나옵니다.


여기서 우리는 TimeZone을 Asia/Seoul로 설정하고, GIST_ID를 변경시켜줍시다. 아까 생성시킨 GIST로 이동하셔서 URL을 복사하는데, 이때 주소값 끝에 ID만 입력해주시면 됩니다.

  1. repository의 setting 창으로 가서 GH_TOKEN이라는 Action 환경변수를 만들어줍니다.


요로콤 이동해줘서 오른쪽 상단에 New Repositroy Secret를 눌러서 Name에는 GH_TOKEN을 넣어주고, Values에는 2번에 생성한 토큰을 넣어줍시다.

세팅 끝!

이제 테스트해봅시다! 아무 저장소에 커밋 & 푸시 시킨 후에 productive-box 저장소의 Action을 확인해줍시다!


이렇게 새로 Action이 생성되더니 요로콤 작업하고 있네요. 다 끝나면 초록색 체크 아이콘이 뜰겁니다


요렇게 build-event까지 발생합니다. 이제 프로필에 적용시켜보겠습니다. 본인 깃허브 프로필 사이트로 이동합니다.

이렇게 pinned 구역으로 이동한 뒤 Customize your pins를 눌러 아까 생성시킨 Gist 화면을 표시해줍시다. 이름은 "I'm night" 이런식으로 되어있을 겁니다.


그리고 얘를 잘 표시해주면...? 짜잔!


이렇게 잘 만들어진 것을 확인할 수 있습니다!

후기

다른 분의 소스코드를 만지고 이를 입맛대로 바꿔서 사용하는 일은 정말 어렵다는 점을 다시금 느끼게 해주었습니다... 이번 삽질 및 설정으로 Github Action과 어느정도 친해진듯 하고, 또한 개발자 정신? ㅋㅋ 으로 삽질을 해가며 못풀었던 문제를 풀어내었다는 점에 좀 뿌듯했던 것 같습니다. 글고 아직 경험이 부족하다는 점을 뼈저리게 느끼네요 ㅎㅎ;;

긴 글 읽어주셔서 감사합니다!

profile
생각이 깊은 주니어 개발자

0개의 댓글