[Github] 리드미(README) 꾸미기

기본 작성

Markdown 언어를 이용해 작성한다.

---

뱃지

• 기술 스택이나 사용 툴 등을 간결하게 표현하고 싶을 때
• 인스타, 블로그 등 다양한 바로가기 링크들을 깔끔하게 나타내고 싶을때
• 로고와 공식컬러를 포함한 예쁜 아이콘 뱃지

Simple Icons

• 방법1
  https://shields.io/ 사이트에 가서 직접 커스텀하기
• 방법2
  아래 코드 복사해서 적절히 변형하기 (링크도 추가할 수 있다)
  
• 이름 : 뱃지에 쓸 이름(내용)
• 색상코드 : # 제외하고 입력 (ex. #FFCA28 -> FFCA28)
• 로고명 : 아이콘 이름 정확하게 입력
• 로고색 : 로고의 색

---

방문자 수

HITS

• Target URL : 방문자를 조회할 페이지의 링크
• Add Icon : 로고를 선택하여 넣을 수 있다
• 그 외는 미리보기를 참고해서 쉽게 제작 가능하다.

---

백준 티어 보여주기

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

---

Solved.ac 잔디 보여주기

GitHub - mazassumnida/mazandi: ✅ solved.ac 잔디를 예쁘게 보여주는 프로필 카드 API

---

Streak-stats

GitHub Readme Streak Stats Demo

---

다양한 리드미 위젯

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

• 깃허브 평가 (github stats card)
• 레포지토리 핀 추가
• 자주 사용하는 언어
• 기술별 사용시간
• 기타 다양한 위젯

Top Languages card

: 깃허브 리드미에 자주 사용한 언어를 보여준다 (Most Used Langauages)

• 특정 언어 제외/특정 레포지토리 제외/보이는 언어의 개수 조정 등 구체적인 설정도 가능하다.
• 작은 버전으로 크기를 바꿀수도 있고 테마도 변경 가능하다.

Github stats

: 깃허브 리드미에 깃허브에 대한 평가를 보여준다

---

헤더와 푸터 꾸미기

GitHub - kyechan99/capsule-render: Dynamic Coloful Image Render

---

잔디먹는 뱀 만들기

work directory 만들기

우선 본인 계정명 repository에 .github dir를 생성한다.

이어서, workflows dir까지 생성한다.

token 발급받기

프로필 - Settings - Developer settings 에 들어간다.

Personal access tokens에 들어가 Generate new token을 클릭한다.

아래와 같이 체크하고 토큰을 발급 받는다.

발급받은 토큰은 절대 유출하면 안된다!

yml 파일 생성하기

아까 만들었던 directory에 snake.yml을 생성한다.

아래 코드를 사용하면 된다.

# 커밋 먹는 뱀 그래프 생성을 위한 GitHub Action🐍

name: Generate Snake

# Action이 언제 구동될지 결정

on:
  schedule:
    # 6시간마다 한 번(수정 가능)
    - cron: "0 */6 * * *"

  # 자동으로 Action이 실행되도록 함
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      # 뱀 생성
      - uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: [깃허브 아이디 작성]
          # output branch에 gif, svg를 각각 생성
          gif_out_path: dist/github-contribution-grid-snake.gif
          svg_out_path: dist/github-contribution-grid-snake.svg

      - run: git status

      # 변경사항 push
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: master
          force: true

      - uses: crazy-max/ghaction-github-pages@v2.1.3
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

위 코드에서 아이디만 넣어주고 push한다.

본격 뱀 만들기

생성한 repository에서 actions를 들어가면 Generate Snake가 있다. Run workflow를 눌러 실행시킨다.

리드미 파일 수정하기

깃허브 리드미 파일 맨 윗줄에 아래 코드를 추가한다.

![snake gif](https://github.com/아이디/아이디/blob/output/github-contribution-grid-snake.svg)

아이디는 두번 적는 것이 맞다. (오타 아님)

짜잔. 그러면 완성이다. 허한 잔디 밭을 채울 수 있도록 노력하자.

---

3D 잔디밭 만들기

GitHub - yoshi389111/github-profile-3d-contrib: This GitHub Action creates a GitHub contribution calendar on a 3D profile image.

깃허브 잔디를 3D로 보여줄 수 있다. 

깃허브 이름으로 된 Repository 생성

자신의 이름으로 된 Repository를 생성하고 그곳의 README.md에 마크다운 형식이나 HTML로 내용을 입력하면 해당 내용이 내 깃허브 프로필에 나타나게 된다.

Actions에 Workflow 파일 작성

• Actions를 눌러 들어가면 다음과 같은 화면이 보인다.
• 'set up a workflow yourself'를 클릭한다.
• main.yml이라 되어있는 이름을 profile-3d.yml라 수정하고 다음과 같이 내용을 작성한다.

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v2
      - uses: yoshi389111/github-profile-3d-contrib@0.6.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add -A .
          git commit -m "generated"
          git push

GITHUB_TOKEN 생성하기

Settings > Developer settings > Personal access tokens 에 들어가서 Generate new token을 클릭한다. 

• 토큰의 이름을 설정하고 권한을 부여할 것들을 체크해준 뒤 토큰을 생성한다.
• 토큰을 생성하면 토큰 값을 알려주는데 로컬에 따로 저장하기를 권장한다.

Repository로 돌아와서 Settings > Secrets > Actions 에서 New repository secret을 클릭한다.

Name에 GITHUB_TOKEN을 입력하고 Value에 아까 받은 토큰 값을 입력하고 secret을 추가한다.

Action 실행하기

Repository의 Actions에서 GitHub-Profile-3D-Contrib를 클릭하고 Run workflow를 해주면 3D 잔디를 사용할 수 있게 된다.

README.md 수정하기

![](./profile-3d-contrib/profile-green-animate.svg)

위 코드를 README.md에 추가하면 프로필에 적용된 모습을 볼 수 있다.

다양한 테마를 적용하고 싶으시면 개발자 yoshi389111님의 블로그를 참고하기 바란다.

GitHub - yoshi389111/github-profile-3d-contrib: This GitHub Action creates a GitHub contribution calendar on a 3D profile image.