Github - Readme.md를 이용하여 깃허브 프로필 꾸미기

깃허브를 이용하여 수많은 공동개발 및 자신의 프로그래밍을 보여줄 수 있습니다. 이번에는 깃허브의 readme.md를 이용하여 깃허브 프로필을 꾸미는 방법을 알아보겠습니다.

 

참고로 readme.md로 프로필 만드는 것은 깃허브사이트의 이스터에그라고 하네요 ㅎㅎ

 

1. Repositary 만들기

 repo의 이름에 자신의 아이디와 똑같이 적으면 귀여운 고양이가 깃허브 프로필에 쓸 수 있다고 이야기합니다.

어차피 사용하는 것이기 때문에 Add a README file은 체크하도록 하겠습니다. 이제 만들어 보도록 하겠습니다.

이렇게 자신의 프로필에 사용할 수 있는 readme.md는 완성이 됩니다.

오른쪽에 특별한 repo를 만들었다고 나와있다.

수정은 Edit README버튼을 누르면 수정할 수 있습니다.

 

2. 꾸미는데 도움이 되는 도구들

• 우선 약간의 마크다운 상식이 있으면 더욱더 다채롭게 꾸밀 수 있습니다.
• 주변 사람들이 만든 도구를 활용하여도 됩니다.

 

StackEdit

필자가 예전에 사용했던 마크다운 웹편집기 입니다. 마크다운 문법을 실시간으로 보여줘서 프로필 제작할 때 좀 더 편안하게 작업할 수 있습니다. 왼쪽으로 마크다운을 편집하는 것입니다. 마크다운 문법을 알면 좀 더 편안하게 작업할 수 있습니다.

stackedit.io/

StackEdit – In-browser Markdown editor

 

github-readme-stat

anuraghazra라는 개발자가 만든 오픈소스로 깃허브 스탯을 보여줍니다. 자신이 깃허브에서 어느 정도 활동하고 있는가, 그리고 자신이 주로 사용하는 언어는 무엇인지 다른 사람들에게 알려줄 수 있습니다. (스탯)  

사진에서는 제가 HTML만 그동안 올려서 100% 나온 것이고 실제로 다양한 언어를 쓰면 다양하게 나옵니다.

테마나 여러 가지 예제 또한 지원하고 있으니 밑에 링크 들어가셔서 다양하게 사용하면 될 것 같습니다.  

=> username을 바꾸시고 사용하시면 됩니다.

(Github Stat)
[![kmsbio's GitHub stats](https://github-readme-stats.vercel.app/api?username=username)]

(Most Used Language)
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=username)

github.com/anuraghazra/github-readme-stats

anuraghazra/github-readme-stats

 

HITS

방문자수를 보여주는 오픈소스입니다. 해당 사이트에서 카운트하는 방식 같습니다.

아래 링크로 들어가서 GENERATE BADGE에 여러가지 설정하고 MARKDOWN에 복사하면 됩니다.

• TARGET URL : 배지를 달려고 하는 사이트를 적으면 됩니다. (필수)
• OPTIONS : 배찌를 꾸미면 되는 요소들입니다.

아래는 제 깃허브 사이트의 방문자를 볼 수 있습니다

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fkmsbio%2F&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=vistor&edge_flat=false)](https://hits.seeyoufarm.com)

 

hits.seeyoufarm.com/

HITS

 

Shiedls.io

마크다운을 이용하여 다양한 Badge를 만들 수 있습니다. 우선 공식 사이트에 들어가면 꾸미는 방법뿐만이 아닌 추가 지원들 때문에 참조하면 좋을 것 같습니다.

아래 코드들은 제가 만든 배지들입니다. (위의 사진)

(Github)
![Github](http://img.shields.io/badge/my%20github-black?style=flat-square&logo=github)
(Google)
![Google](http://img.shields.io/badge/-Google-white?style=for-the-badge&logo=google)
(Python)
![python](https://img.shields.io/badge/logo-python-blue?logo=python&logoColor=white)

간단하게 Badge를 제작하는 방법은 기본적으로

!(http://img.shields.io/badge/Label(첫번째)-Messege(두번째)-Color(색상))

 

해당 순서로 이루어져 있고 뒤에 많이 쓸만한 것은 이 정도 있습니다.

logo : 앞에 두고 싶은 로고입니다. (ex : go, python, naver) (logo=python)

style : 배지의 외형 링크입니다. (ex : square, flat, flat-square, for-the-badge, social)(style=plastic)

해당 사이트는 많은 것들이 있다.

shields.io/

Shields.io: Quality metadata badges for open source projects

 

완성!

readme.md 이스터에그를 알게 된 것은 지인의 소개로 알았습니다. 이렇게 깃허브 계정을 만들 수 있더라고요. readme.md도 제가 웹호스팅 하는 사이트를 모티브로 제작하였습니다. 제가 사용하는 다른 링크들을 적는 방식으로 이렇게 표현하였습니다. 여기에 제 깃허브 통계를 추가한 모습입니다. (Simple is best)