[GitHub] 나의 깃허브 대문 꾸미기

이지환·2022년 3월 17일
89

github

목록 보기
1/1
post-thumbnail

💡 github readme 꾸미는 이유
개발자 모두의 저장소 깃허브, 알고싶은 개발자의 깃허브 방문은 당연하다.
그런 깃허브의 간판같은 리드미를 꾸밈으로써 방문자에게 나를 어필할 수 있다.
무엇보다 자기만족이 매우 크다.

  • 다른 게시물에 꾸미는 다양한 방법이 있으므로 해당 게시물은 내가 적용한 요소들만 정리하였습니다.
  • 진행하면서 어려웠던 부분과 시간이 걸린 부분 중점으로 정리함.

0. Repo생성 및 README 생성

  • 계정명과 같은 저장소를 생성한다.

  • 리드미를 추가해서!!
  • 자 이제 준비물은 준비가 다 되었다.

![header](https://capsule-render.vercel.app/api?type=${배경타입}&color=auto&height=${높이}&section=header&text=${텍스트}&fontSize=${글자크기}&animation=${텍스트 효과})

// 내 옵션
배경타입 : waving
높이 : 200
텍스트 : HelloWorld!%20!🥳
글자크기 : 50
텍스트효과 : twinkling

2. 뱃지 추가하기

  • 나의 매력을 어필할 수 있는 이쁜 뱃지를 하나씩 가져와 사용한다.
    📎 Shields / 리드미 뱃지
    📎 Simple Icon / 뱃지에 사용할 아이콘
  • 리드미 뱃지에서 원하는 뱃지의 스타일을 고른 후 원하는 색상을 넣어 작성하면 된다.
  • 나는 뱃지를 가운데 위치하기 위해 html방식으로 가져왔으며<p align="center"></p> 태그 사이에 위치했다.
<img src="https://img.shields.io/badge/${아이콘}-${색상}?style=${뱃지스타일}&logo=${텍스트}&logoColor=${텍스트 색상}"/></a>&nbsp

// 사용한 옵션
뱃지스타일 : flat

3. 힙한 나의 깃 스텟 표시하기

  • 간편하게 내가 자주 깃허브에 올리는 언어를 표시해 준다.
  • 부끄럽지만 나의 깃허브 커밋수까지 표시해준다 뭔가 다 까발리는 느낌이 크다
  • 아쉬운점은 나의 깃헙계정으로 집계하다보니 초대받아서 진행한 부분은 반영이 안된다. 열심히 안한거 같이 보인다.
<h3 align="center">💡 My Most Used Languages 💡</h3>
<p align="center">
  <a href="https://github.com/${깃닉네임}">
    <img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=${깃닉네임}&layout=compact&show_icons=${아이콘 보여줄지}&show_owner=${소유자 표기}&hide_title=${타이틀 가리기}&theme=${테마}&hide=${가리고 싶은 언어}" />
  </a>
</p>
<h3 align="center">💡 My Git Stats 💡</h3>
<p align="center">
  <a href="https://github.com/${깃닉네임}">
    <img align="center" src="https://github-readme-stats.vercel.app/api?username=${깃닉네임}&hide=${가릴항목}&hide_title=${타이틀숨김}&show_icons=${깃아이콘표시}&include_all_commits=${올해말고 전체년도 커밋표기}&theme=${테마}" />
  </a>
</p>

// 사용한 옵션
테마 : nord
올해말고 전체년도 커밋표기 : ture << 적용 ❌ 
타이틀 숨김 : ture
소유자 표기 : ture << 적용 ❌

4. velog 표시하기

<div align="center" style="text-align:center">
  //  위 아래 한칸씩 꼭 비워야 함.
  [![Velog's GitHub stats](https://velog-readme-stats.vercel.app/api?name=${velog닉네임}&tag=${태그}&color=${테마})](${링크 url})
  //  위 아래 한칸씩 꼭 비워야 함.
</div>

// 사용 옵션
&tag : 해당 옵션을 넣으면 해당태그의 최신글을 가져온다.
&color : dark

5. 페이지 조회수 뱃지

  • 페이지 조회수를 카운트해주는 귀여운 뱃지다.
    📎 HITS 생성페이지
  • 해당 페이지로 접속해 원하는 페이지의 URL을 넣고, 원하는 스타일로 꾸미면 아래에 원하는 형식으로 복사해 가져올 수 있다. 정확하진 않지만 그냥 이쁘다

6. 나의 커밋시간대 표시

  1. 우선 나의 깃 설정에서 Gists를 생성한다.
  2. 아무 내용을 입력하고 형식을 public으로 지정하여 생성한다.
  3. 생성하게 되면 주소창에 나의 gists_id가 생성되는데 이걸 잘 복사해 두자!
    gist.github.com/gitname/gist_id
  4. 이제 위에 링크로 들어가 해당 저장소를 Fork해오면 된다.
    제 깃 저장소에 있는걸로 Fork하시면 똑같이 진행하실 수 있어요.
    시간대도 한국으로 설정되어 있답니다.
  5. Fork한 저장소에서 설정 => Secrets => Actions로 이동하여 아래 이미지와 같이 GitToken과 GistId를 똑같은 이름으로 넣어주면 된다.
    깃 토큰은 설정 => 개발자설정 => 토큰생성 => 레포와 gist만 허용하여 생성한 후 복사해서 사용하면 된다!! 토큰 유효기간은 나는 무제한으로 하였음.
  6. 이제 레포의 Actions탭으로 이동하여 액션을 활성화 해준다.
  7. 마지막으로 나의 깃헙 메인에서 아래 Customize your pins 버튼 을 클릭
  8. 바뀐 나의 gist를 고정해 주면 끄읕
  9. 바뀌길 기다리기 힘들다면 Fork한 레포의 리드미에 스페이스 하나 넣고 커밋하면 강제로 Action이 돌아간다

완성🥳[링크]

궁금하신 점이나 오타지적 부탁드리고, 깃허브 놀러오셨다면 Follow 부탁드려요!
읽어주셔서 감사합니다.
😊

📎 참고 링크

profile
누구나 원하는 사람 되기🤧 주니어 백엔드 개발자의 log

0개의 댓글