[github] 깃허브 프로필 꾸미기 + 라이브러리 사용

다이어리 꾸미기는 좋아하면서

깃헙 프로필은 너무 얌전히 둔것같아서 살포시 꾸며보기로 하였다.

github 프로필 꾸미기 과정을 기록해보겠다!

 

saeyoung gitbub

 

깃헙 프로필 꾸미기 단계

1.  신규 레포지토리 생성
2. 내용 작성
    2-1. 마크다운 작성법과 에디터 사용
    2-2. 라이브러리 적용
    2-3. 뱃지 생성
3. 리드미 저장 및 점검

 

1. 신규 레포지토리 생성

계정 이름과 동일한 레포지토리를 생성하면

ReadMe.md 파일을 통해 프로필을 꾸밀 수 있다. 

레포지토리 이름을 계정 이름과 동일하게 작성한다.

내것은 이미 생성을 하여서

"그 이름의 레포지토리는 이미 있어!" 라고

빨갛게 알려주고 있다.

Add a README File을 체크한다.

레포를 생성해준다.

 

 

2. 내용 작성

이제 생성한 레포의 리드미 파일에 내용을 작성한다. 

 

2-1. 마크다운 사용법과  에디터 사용

다이어리도 그렇고 아무것도 없는 곳에서 

글을 작성하는 것은 어려울 수 있다. 

그래서 깃헙의 마크다운 작성법과 

여러 사람들이 공통적으로 추천해준 미리보기 기능이 있는 

에디터를 사용하였다. 

 

마크다운(Markdown) 사용법

 

Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

 

사실 깃헙 리드미에서도  Preview를 제공하기 때문에 

옆에 바로 미리보기를 할 필요가 없다면 깃헙을 사용하면 될 것 같다. 

 

 

2-2. 라이브러리 적용

파도처럼 움직이는 효과를 어디선가보고

따라해보고 싶었는데 

깃헙 프로필을 꾸밀 수 있는 다양한 라이브러리가 있었다. 

아래 첫번째 링크에서는 Navigation 부분을 도와주고,

두번째 링크에서는 나의 깃허브 스택을 다양한 테마와 등급 등을 제공해준다. 

 

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

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

 

2-3. 뱃지 생성

깃헙 프로필이라면 뱃지를 달아야 정석인 느낌!

뱃지를 만들기 위해서 사람들이 많이 사용하는 것을 

나도 사용해 보았다. 

 

Shields.io: Quality metadata badges for open source projects

 

위 링크에 들어가서 "YOUR BADGE" 부분에 

내가 원하는 메세지, 색상을 생성한다. 

Yellow 색상의 Javascript 뱃지를 만들어주라.

 

자. 여기 뱃지 만든 링크 여깄다.

뱃지를 생성하면 이렇게 url이 생성되고 

생성된 것을 마크다운에 작성하면된다. 

 

여기서 뱃지의 색상을 정할 때 

아래 링크의 도움을 받을 수 있다. 

아래 링크에서 색상과 아이콘을 사용할 수 있다. 

 

 

Simple Icons

 

내가 만들고 싶은 스택등을 검색하면 아이콘이 찾아진다. 

javascript를 검색하였다.

아이콘의 색상이 있으므로 이것을 뱃지 생성할 때 사용하면

색상을 고민하는 시간을 줄일 수 있다. 

뱃지만 사용
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

뱃지+아이콘 사용
https://img.shields.io/badge/-JavaScript-FBDF07.svg?&style=for-the-badge&logo=JavaScript&logoColor=white

아이콘을 넣을 때와 넣지 않을 때는 코드의 차이가 있으므로

두 사이트를 잘 참고하여 작성하면 될 것이다. 

 

 

 

3. 리드미 저장 및 점검

미리보기를 통해 내가 작성한 마크다운이 

잘 나왔는지 확인 후 Commit changes를 하면 

나의 깃헙 프로필이 예쁘게 꾸며줘서

대문을 장식하고 있는 것을 확인할 수 있다.