깃허브 프로필 꾸미기!
반갑습니다! 오늘은 github 프로필을 꾸미는 방법을 알려드릴 건데요 생각보다 간단하니 잘 따라 해 보시길 바랍니다.
다양한 꾸미기 방식이 있지만 오늘 소개드리는 부분은 '저의 깃허브 프로필에 사용된 것들'인 점 참고부탁드립니다!
시작하겠습니다.
우선 본인의 깃허브 프로필이다. 심플하게 sns 리스트, 이메일, 기술 스택, 깃허브 스탯 정도만 보여주도록 설정해보았다.
지금부터 천천히 꾸미는 과정을 알아보자.
본인 ID 레퍼지토리 생성하기
우선 깃허브 프로필을 설정하려면 본인의 ID와 일치하는 이름으로 레퍼지토리를 생성해야 한다.
평소와 다르게 레퍼지토리 생성화면에서 고양이가 나타나며 말을 건다.
README.md 파일 생성하도록 체크하라는 내용이다. 바로 체크하고 레퍼지토리를 생성하자!
그럼 이 레퍼지토리의 README.md 파일이 내 깃허브 프로필에 출력되는 것을 확인할 수 있을 것이다.
README.md 꾸미기
Online Markdown Editor - Dillinger, the Last Markdown Editor ever.
Make something great today!
dillinger.io
위의 사이트는 md파일을 한눈에 볼 수 있도록 도와주는 사이트이다.
결과를 보기 위해 여러 번 커밋하지 말고 이 사이트를 통해 확인하고 한 번의 커밋으로 처리하자!
나는 아까 보여주었듯이 이렇게 꾸며놓았는데 하나하나 설명하겠다.
- 헤더 -
우선 헤더 부분은 'capsule-render'라는 오픈API를 사용하였다.
GitHub - kyechan99/capsule-render: Dynamic Coloful Image Render
:rainbow: Dynamic Coloful Image Render. Contribute to kyechan99/capsule-render development by creating an account on GitHub.
github.com
이곳에서 자신의 스타일대로 만들어 링크한 줄만 복사하면 사용할 수 있다.
- 뱃지 -
뱃지들은 아래 링크에서 사용할 수 있도록 마련되어있다. 여러 스타일의 뱃지가 있으니 이것도 자신의 취향대로 사용하면 된다.
Shields.io: Quality metadata badges for open source projects
Love Shields? Please consider donating to sustain our activitiesYour BadgeStaticUsing dash "-" separator/badge/ - - Dashes --→- DashUnderscores __→_ Underscore_ or Space → SpaceUsing query string parameters/static/v1?label= &message= &color= Colo
shields.io
본인의 뱃지와 똑같은 것을 사용하고 싶다면 아래와 같은 형식에 맞춰 사용하면 된다.
뱃지1
<a href="클릭시 이동할 링크" target="_blank"><img src="https://img.shields.io/badge/문자-색코드?style=flat-square&logo=이미지 이름&logoColor=white"/></a>
클릭 시 이동할 링크, 문자, 색 코드, 이미지 이름을 입력해주면 위의 뱃지1과 같은 형태로 표시된다.
뱃지2
<img src="https://img.shields.io/badge/문자-색코드?style=for-the-badge&logo=이미지 이름&logoColor=black">
문자, 색 코드, 이미지 이름을 입력해주면 위의 뱃지2과 같은 형태로 표시된다.
'이미지 이름'과 '색코드'는 이곳에서 확인하고 사용할 수 있으니 참고하자!
Simple Icons
2124 Free SVG icons for popular brands.
simpleicons.org
- Hits -
사진과 같이 방문자 수를 보여줄 수 있는 기능을 넣을 수 있다.
https://hits.seeyoufarm.com/ 로 접속하여 자신의 깃허브 url을 넣어주기만 하면 된다.
HITS
Easy way to know how many visitors are viewing your Github, Website, Notion.
hits.seeyoufarm.com
여기서 설정하고 COPY 를 눌러주면 마크다운에 붙여 넣을 수 있도록 복사된다.
- Git Stats 표시하기 -
Git Stats는 자신이 깃에서 어떤 활동을 하고 있는지 자세히 보여주는 지표이다.
아이디에 본인 GitHub 아이디만 입력하면 자신의 깃허브의 여러 stat을 보여주는 카드를 만들어준다.
아래의 출처에서 가져와 사용할 수 있다. 흰색 말고 다른 스타일도 있으니 맘에 드는 것으로 사용하자.
GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes
:zap: Dynamically generated stats for your github readmes - GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes
github.com
etc
내 README 파일에 있는 이모지들은 아래 사이트에서 복사해 사용할 수 있다. 참고하자!
EmojiCopy | Simple emoji copy and paste keyboard by JoyPixels®
Our new mobile-friendly web app provides a simple, beautiful emoji copy and paste keyboard interface WITH search and auto-copy technology.
www.emojicopy.com
빨간 동그라미 부분을 클릭하면 프로필에 이모티콘과 이모티콘에 마우스를 hover 했을 때 보여지는 Text를 설정할 수 있다.
이것 외에도 다양한 꾸미는 방법이 즐비하니 더 예쁘게 꾸미고 싶은 사람은 여러 자료들을 찾아보고 참고해서 자신만의 깃허브 프로필을 만들어보자!
'Git' 카테고리의 다른 글
| [Github] Organization 생성하기! (10) | 2022.01.18 |
|---|---|
| [Github] 깃허브 Upstream 레퍼지토리로 프로젝트 관리하기! (0) | 2022.01.18 |
| [Github] Git과 Github 차이? (2) | 2022.01.18 |
| [GitHub] 깃허브 토큰 생성하기! (7) | 2021.12.12 |
| [git] Git Flow 간단하게 이해하기 (3) | 2021.12.01 |
