github 프로필 꾸미기, Gist 사용기

github readme 밑에 이러한 컴포넌트를 함께 추가하고 싶었다.

 

원하는 그림

 

 

어떻게 만드는지 찾아보았다.

 

1. 포크 fork

왼쪽의 commit 시간대를 나타내는 box 레파지토리이다.

https://github.com/maxam2017/productive-box

GitHub - maxam2017/productive-box: Are you an early 🐤 or a night 🦉? Let's check out in gist

 

오른쪽의 commit, PR, star 등을 기록하는 stats box 레파지토리이다.

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

GitHub - bokub/github-stats-box: 📌 Update a gist to contain your GitHub stats

다음 깃허브를 fork 떠주고 시작한다.

 

이제 github action으로 github 내의 컴퓨터로 자동으로 해당 코드를 실행하면 되는데, 해당코드는 다음 경로에 있다.

 

 

왼쪽의 commit 시간대를 나타내는 box 레파지토리 github action yml 코드

.github/workflows/schedule.yml

name: Update gist?
on:
  repository_dispatch:
    types: [build-event]
  schedule:
    - cron: "0 0 * * *"
jobs:
  update-gist:
    runs-on: ubuntu-latest
    steps:
      - name: Update gist
        uses: maxam2017/productive-box@master
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
          GIST_ID: ${{ secrets.GIST_ID }}
          TIMEZONE: Asia/Seoul

 

다음과 같이 GIST_ID 부분만 환경변수로 변경했다.

 

오른쪽의 commit, PR, star 등을 기록하는 stats box 레파지토리, github action yml 코드

.github/workflows/run.yml

name: Update GitHub Stats Gist
on:
    workflow_dispatch:
    schedule:
        - cron: '0 */12 * * *'
    push:
        branches: master
jobs:
    run:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/setup-node@master
              with:
                  node-version: 16
            # If you edit the .js files and want to run them in your GitHub Action, you need to:
            # - uncomment the 2 following lines
            # - replace "npx github-stats-box@1" with "npm start"
            # N.B: Your action will not receive future updates if you do so

            # - uses: actions/checkout@master
            # - run: npm ci
            - run: npx github-stats-box@1
              env:
                  GH_TOKEN: ${{ secrets.GH_TOKEN }} # Do not edit, defined in secrets

                  # Edit the following environment variables
                  GIST_ID: ${{secrets.GIST_ID}}
                  ALL_COMMITS: true # If `true` it will count all commits, if `false` it will count your last year commits
                  K_FORMAT: false # If `true`, large numbers will be formatted with a "k", for example "1.5k"

 

 

 

그럼 두개의 환경변수 토큰 값만 넣어주면 제대로 동작한다.

 

2. gist, GIST_ID

 

https://gist.github.com/

Discover gists

제목과 본문을 아무런 값을 넣고 써준다.

 

참고로 여기서 제목옆에 Secret 또는 private 라는 태그가 있다면, 모두에게 공개할 수 있도록 변경해줘야한다.

 

secret

 

Edit 버튼을 누르고

 

Make Public을 클릭.

 

만들어진 url을 확인한다.

https://gist.github.com/username/GIST_ID

다음과 같은 형태이고, 이 GIST_ID를 복사한다

 

참고로 박스를 두개 다 만들 것이라면 GIST list를 두개 만들어서 GIST_ID를 2개 저장해두자.

 

 

3. GITHUB TOKEN, GH_TOKEN

 

그리고 계정 Settings에 들어간다.

 

 

다음과 같이 하여 생성하고 이 토큰 값을 복사하여 따로 가지고 있는다.

 

4. 토큰 등록

 

 

 

다음과 같이 두개의 토큰을 환경변수로 세팅해준다면

${{secrets.GH_TOKEN}}

${{secrets.GIST_ID}}

으로 yml 파일에서 사용할 수 있다.

 

이제, github action을 실행해주면 된다.

실행은 바로 되는 것이 아니라, enabled 해줘야한다.

 

5. GITHUB ACTION

 

ACTION 탭에 들어가서

워크플로우를 실행해주거나

 

 

 

이 탭이 뜨지 않는 다면, 인위적으로 readme에 공백을 추가하거나

기존에 실행된 기록이 있다면 그 job에 들어가서 re-run-job을 눌러주면 github action이 실행된다.

 

github action이 성공적으로 실행되면 gist에 

다음과 같이 나타난다.

 

 

 

 

다음과 같이 GIST를 체크