Github | Readme Customizing

블로그 이사 완료·2022년 12월 5일
1
post-thumbnail

📍 기본 작성

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


📍 뱃지

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

공식 로고 색상과 정확한 로고 이름 모아보는 사이트
https://simpleicons.org/

  • 방법1
    https://shields.io/ 사이트에 가서 직접 커스텀하기

  • 방법2
    아래 코드 복사해서 적절히 변형하기 (링크도 추가할 수 있다)

 <a href="연결 링크"><img src="https://img.shields.io/badge/이름-색상코드?style=for-the-badge&logo=로고명&logoColor=로고색"/></a>
  • 이름 : 뱃지에 쓸 이름(내용)
  • 색상코드 : # 제외하고 입력 (ex. #FFCA28 -> FFCA28)
  • 로고명 : 아이콘 이름 정확하게 입력
  • 로고색 : 로고의 색

나는 이런식으로 커스텀했다.


📍 방문자 수

https://hits.seeyoufarm.com/ 에서 직접 제작

  • Target URL : 방문자를 조회할 페이지의 링크
  • Add Icon : 로고를 선택하여 넣을 수 있다
  • 그 외는 미리보기를 참고해서 쉽게 제작 가능하다.
[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FJunTaeHahm&count_bg=%230C1117&title_bg=%230C1117&icon=cloudsmith.svg&icon_color=%23FFFFFF&title=Hello%21&edge_flat=false)](https://hits.seeyoufarm.com)


📍 백준 티어 보여주기

mazzassumnida 프로젝트
https://github.com/mazassumnida/mazassumnida

기본 스타일

[![Solved.ac
프로필](http://mazassumnida.wtf/api/v2/generate_badge?boj=백준아이디)](https://solved.ac/백준아이디)

미니 스타일

[![Solved.ac
프로필](http://mazassumnida.wtf/api/mini/generate_badge?boj=백준아이디)](https://solved.ac/백준아이디)

📍 Solved.ac 잔디 보여주기

mazandi 프로젝트
https://github.com/mazassumnida/mazandi

<img src="http://mazandi.herokuapp.com/api?handle={백준닉네임}&theme=warm"/>

📍 Streak-stats

https://streak-stats.demolab.com/demo/


📍 다양한 리드미 위젯

github-readme-stats 프로젝트
https://github.com/anuraghazra/github-readme-stats

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

1. Top Languages card

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

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

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브아이디)](https://github.com/깃허브아이디/github-readme-stats)

2. Github stats

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

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브아이디)](https://github.com/깃허브아이디/github-readme-stats)

📍 헤더와 푸터 꾸미기

capshule render 프로젝트
https://github.com/kyechan99/capsule-render

위 링크의 리드미를 통해 디테일한 커스터마이징이 가능하다.


📍 벨로그 포스팅 리드미에 보여주기

velog-readme-stats
https://github.com/eungyeole/velog-readme-stats

위 링크의 리드미를 보면 다양한 스타일 중 선택해서 사용하면 된다.

[![Velog's GitHub stats](https://velog-readme-stats.vercel.app/api?name=벨로그아이디)](벨로그링크)

📍 잔디먹는 뱀 만들기

#1. work directory 만들기

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

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

#2. token 발급받기

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

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

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

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

#3. 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한다.

#4. 본격 뱀 만들기

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

#5. 리드미 파일 수정하기

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

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

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


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


profile
https://kyledev.tistory.com/

0개의 댓글