GitHub 핀 꾸미기/ Github-stats-box

 

 

[GitHub 핀 꾸미기]

Productive-box/ ✅Github-stats-box

 

Github-stats-box

 

 

GitHub 프로필 배경과 아이콘 배지로 꾸미는 방법에 대한 게시글은 많이 찾아볼 수 있다.

그러나 위의 Github-stats-box 로 핀을 꾸미는 방법 을 찾아보면 너무 복잡한 것 같다.

 

 

 

🌟 하나부터 열까지 모두 알려줄테니 모두 주목!! 🌟

 

 

 

 

---

[1] Gist 만들기

---

 

 

 

1. Gist로 들어가는 방법

 ① GitHub 프로필 오른쪽 상단에 있는 버튼을 누름

 ② Your gists 누르기

 

 

 

2. 오른쪽 상단에 있는 (+) 버튼 누르기

 

 

 

3. Gist 생성

① 제목 생성 (필자는 Dohyeon Kim's GitHub Stats 라고 적음)

② 내용 생성 (내용 상관없으니 아무거나 적기)

③ 화살표 누르기

④ Create public gist

❗반드시 Create public gist 눌러야 한다❗

 

 

 

4.Gist 생성되면 해당 페이지 url 복사하기

→ url에서 아래 빨간색 글씨 부분 복사해두기 (밑에서 A라고 부름)

https://gist.github.com/dohyeonkim2526/3188ed40ad01f9d5306166a179ef0461

 

 

 

 

 

---

[2] Token 만들기

---

 

 

 

 

 

 

1. 다시 GitHub 프로필로 돌아오기

① 오른쪽 상단 위에 있는 프로필 클릭

② Setting 누르기

 

 

 

2. 메뉴에 있는 Developer settings 누르기

 

 

 

3. Token 생성

① 왼쪽 메뉴 제일 밑에 있는 Personal access tokens 누름

② Generate new token 누름

 

 

 

4. Token명 생성

① 토큰명 적기 (아무거나 적어도 상관 없음)

② ✅ repo와 ✅ gist 모두 체크

③ 녹색 버튼 Generate token 누르기

 

 

 

5. 토큰명 확인

→ 아래 빨간색 부분에 영문자 조합의 글씨가 나올 것인데, 따로 복사해두면 된다. (밑에서 B라고 부름)

 

 

 

 

---

[3] ID, Token 연결하기

---

 

 

 

1. 아래 링크 들어가기

https://github.com/bokub/github-stats-box

bokub/github-stats-box

 

 

 

2. 오른쪽 상단 위에 있는 Fork 버튼 누르기

 

 

3. 자신의 GitHub 아이디 클릭하기

(필자는 이미 생성했기 때문에 'You've already...' 라고 뜬 것이다.)

 

 

 

4. 연결하기

① 상단 메뉴의 Settings 누르기

② 왼쪽 메뉴의 Secrets 누르기

③ New repository secret 누르기

 

 

 

5. 입력

Name: GIST_ID (모두 다 이렇게 써야 함)

Value: [1]-4번에서 복사한 url의 빨간색(A) 입력하기

→ 모두 다 끝나면 Add secret 버튼 누름

 

 

 

6. 한번 더 New repository secret 누르기

Name: GH_TOKEN (모두 다 이렇게 써야 함)

Value: [2]-5번에서 복사한 (B) 입력하기

→ 모두 다 끝나면 Add secret 버튼 누름

 

 

 

 

---

[4] 마지막 연결

---

 

 

1. 상단 메뉴에 있는 Actions 클릭 > 녹색 버튼 'I understand my workflows,...' 누름

 

 

 

2. Gist 연결

① 파란색 Update gist 누름

② Enable workflow 누름

 

 

 

3. 화살표가 가리키는 run.yml 누르기

 

 

 

4. 화살표가 가리키는 수정 버튼 누르기

 

 

 

5. 파일 수정 → 녹색 버튼 Start commit 누르기 → Commit changes 누르기

 

* 파일 수정하는 방법 (빨간색 밑줄 친 부분 수정하기)

① [1]-4번에서 복사한 url의 빨간색(A) 입력하기

②  ALL_COMMITS: true (true, false 선택은 자유)

      → true: 전체 커밋 개수

      → false: 작년 커밋 개수

③ K_FORMAT: false  (true, false 선택은 자유)

      → true: 숫자를 k 포맷으로 표현 (1.5k)

      → false: 일반 숫자로 표현

 

 

 

6. (아래와 같이) ✅ Update run.yml 로 바뀌면 성공!

 

 

 

 

---

[5] 내 프로필에서 핀 고정하기

---

 

1. 자신의 GitHub 프로필 → Pinned → Customize your pins 누르기

 

 

2. [1]-3번에서 생성한 제목 선택 ✅ → 녹색 버튼 Save pins 누르기

 

 

 

3. 자신의 프로필에서 아래와 같은 Pin이 생기게 된다!

Github-stats-box

 

 

 

 

만약 위의 과정을 모두 성공했는데, Pin이 업데이트 안된다면

정각이나 자정에 확인해 보시면 됩니다!

 

 

자신이 커밋 수에 따라서 Total 개수가 바뀌게 됩니다!

(제목은 [1]-3번으로 다시 들어가서 변경 가능)

 

 

 

 

 

Productive-box에 이어서 핀 꾸미는 방법을 소개 해드렸는데

제 글을 보며 깃허브를 쉽게 꾸미셨으면 좋겠네요.

그럼 저는 이만~~~👏👏