Github Profile 꾸미기

pexe99·2022년 12월 22일

⭐ README.md, Shields.io, Pined repo를 활용해 Github profile 꾸미기

3학년 2학기도 어찌저찌 마무리가 되었고, 계속 미루고 있었던 깃허브 프로필 꾸미기를 간단하게 시도해봤다.

📌 README.md 활용하기

🔗 프로필 생성하기

github에 접속해 새로운 repository를 생성한다. 자신의 username과 동일한 이름의 repository를 생성하면 된다. README.md 파일을 이용해야하니 반드시 Add a README file을 체크하도록 하자.

repository 생성 이후에 프로필로 돌아오면 가장 상단에 Hi there🖐️ 라고 적힌 README.md가 생성되었을 것이다. 해당 파일에 markdown을 활용하여 원하는 내용을 작성하면 된다.

🔗 원하는 뱃지 달기

단순 텍스트로는 꾸미기에 밋밋할 수 있으니 Shields.io를 사용해 내가 사용하는 언어나 블로그로 연결되는 뱃지를 달아보자. 아래 태그들을 README.md에 추가하여 사용하면 된다.

<a href="이동할 링크">
  <img src="https://img.shields.io/badge/텍스트-배경색상코드?style=flat-square&logo=로고&logoColor=white"/>
</a>

위 코드에서 한글로 작성된 부분에 원하는 내용을 적어 사용하면 된다. 클릭하여 이동하는 것이 아닌 단순히 뱃지만 사용할 경우에는 아래와 같이 <a>를 제외하면 된다. 아래는 JavaScript 뱃지 예시 코드다.

<img src="https://img.shields.io/badge/JavaScript-f7df1e?style=flat-square&logo=JavaScript&logoColor=white"/>

로고 위치에 들어갈 로고 이름과 로고에 해당하는 색상코드 예시는 여기에서 확인할 수 있다.

🔗 Github Status 표시하기

위 깃허브 스탯은 여기에서 자세한 정보를 확인할 수 있다. 사용법도 뱃지와 동일하게 아래 코드 일부를 수정하여 README.md에 추가하면 된다. 테마 역시 해당 링크에서 확인이 가능하다.

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브이름&show_icons=true&theme=테마)

📌 Pined repo 활용하기

깃허브에는 일부 repository를 프로필에 고정할 수 있는 기능이 있다. 이를 이용해 위처럼 프로필을 꾸밀 수 있다.

🔗 productive-box : 나는 아침형 개발자? ☀️

내가 커밋을 언제 했는지를 분석해 아침형 개발자인지 저녁형 개발자인지를 알려주는 라이브러리다. 우선 여기로 이동해 해당 repository를 fork하도록 하자.

fork한 다음에는 해당 repository에서 .github/workflows/로 이동해 schedule.yml을 수정하자. TIMEZONE과 GIST_ID 부분을 수정하면 된다.

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와 github token을 먼저 생성하자.

gist는 여기에서 바로 생성할 수 있다. 이름과 내용은 크게 상관없으니 아무렇게나 작성한 이후에 public으로 생성해준다. 해당 gist를 프로필에 고정해야하기 때문에 public이어야 한다.

gist를 생성하고 나면 주소창을 확인해보자.

https://gist.github.com/유저이름/gist id

gist id에 해당하는 부분을 따로 복사해놓자.

이제는 github token을 생성해보자. 토큰 생성은 여기서 할 수 있다. Note는 크게 상관없으니 원하는대로 작성하고 아래와 같이 두 곳에 체크하여 토큰을 생성하자.

토큰을 생성하면 아래와 같이 토큰을 발급받을 수 있다. 연두색 박스의 해당 정보는 이후에 다시 확인할 수 없으니 잘 복사해놓도록 하자.

이제 fork한 repository로 다시 돌아와 Settings > Secrets > Actions 에서 환경변수를 등록하자. New repository secret 버튼을 눌러 각각 GIST_ID, GH_TOKEN으로 이름을 지정해 이전에 복사한 내용을 붙여넣는다.

아래와 같이 등록하면 된다.

등록 이후에는 Actions 탭에서 workflows를 enable해준다.

해당 라이브러리는 매 정각마다 정보를 update한다. 바로 결과를 확인하기 위해 repository의 README.md 파일에 공백을 추가해 저장하자. 다시 Actions 탭으로 이동해 하단처럼 README.md를 update한 결과가 잘 반영되면 된다.

마지막으로 자신의 프로필로 이동해 하단의 Pinned 부분에서 Customize yout pins를 클릭해 I'm a night 🦉와 같이 이름이 바뀐 gist를 고정해주면 된다.

🔗 github-stats-box

해당 라이브러리 역시 적용 방법이 동일하다. 여기로 이동해 해당 repository를 fork한 이후, 위의 과정을 동일하게 진행하면 된다.

단, 해당 repository에서 수정할 파일은 .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 }} # The ID portion from your gist url
                  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"

다른 gists 라이브러리들은 여기서 찾아볼 수 있다.

📌 백준 티어 프로필에 표시하기

위와 같이 다양한 방식으로 백준 티어를 프로필에 표시할 수 있다. 해당 프로젝트는 여기에서 확인해볼 수 있으며, 가장 상단의 작은 티어 표시는 아래를 README.md에 추가하여 사용할 수 있다.

[![Solved.ac프로필]
(http://mazassumnida.wtf/api/mini/generate_badge?boj={handle})]
![](https://velog.velcdn.com/images/pexe99/post/11b39a55-7693-4a77-afa3-9b197fc070e9/image.png)
(https://solved.ac/{handle})