[Git] GitHub으로 나를 나타내보자!

잠이 안오는 김에 그동안 해보고 싶었던 GitHub 프로필 꾸미기를 도전해보고자 한다 😊

 

1️⃣ 내 ID Repository  생성

먼저, GitHub 프로필 설정을 위해서는 내 ID와 일치하는 이름으로 레포지토리를 생성해야 한다.

본인 ID Repository 생성

이렇게 내 ID와 동일한 Repository명을 입력하면 하단의 고양이가 다음과 같이 친절하게 안내를 해준다.

Soyeong4250/Soyeong4250은 GitHub 프로필에 README.md을 추가하는 데 사용할 수 있는 ✨특별한✨ 레포지토리입니다. 
공개되었는지 확인하고 시작하려면 README로 초기화하십시오.

더불어 이전에 생성한 적이 없다면 Repository명을 사용할 수 있다는 말풍선도 함께 나온다.

 

 

2️⃣ Add a README file ✔

간단한 설명을 입력하고 (생략가능) README 파일을 추가할 수 있도록 Add a README file을 체크한 후 Repository를 생성한다.

 

 

3️⃣ README file 꾸미기

이제 본격적으로 내 GitHub 프로필이 되어줄 README 파일을 꾸며줄 차례이다.

나는 평소에 README file을 작성할 때 Typora를 자주 이용한다. Typora는 Markdown을 작성하기에 편하지만 딱 한가지 불편한 점이 있다면 GitHub에 push했을 때의 결과물을 미리 볼 수 없다는 점..😢 

그래서 찾아본 결과 많은 분들이 GitHub 프로필 작성 시 많이 활용하는 사이트가 있다기에 나도 활용해보고자 한다.

https://dillinger.io/

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

 

위의 사이트에서는 Markdown으로 작성한 결과물을 GitHub에 여러번 커밋하지 않아도 미리 확인할 수 있어 아주 편했다👍

 

3️⃣-1️⃣ README HEADER - capsule-render

https://github.com/kyechan99/capsule-render

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

capsule-render는 오픈 API로, 자신이 원하는 스타일대로 꾸며 해당 링크를 복사해서 README 파일에 복사하여 붙여넣으면 된다.

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

해당 코드는 기본 Markdown 샘플로 원하는 부분을 수정하면 된다. 자세한 내용은 위의 Github으로 들어가서 살펴보길 권장한다.

 

3️⃣-2️⃣ Shields.io & Simple Icons

https://shields.io/

Shields.io: Quality metadata badges for open source projects

위의 사이트는 SSAFY에서 프로젝트를 마치고 마지막 과정에서 README를 작성하면서 알게 된 사이트이다. 해당 사이트에서 원하는 언어, 프레임워크, 프로그램 등의 아이콘을 이용해서 뱃지를 만들어 Markdown에 활용할 수 있다.

 

활용 방법은 capsule-render와 마찬가지로 기본 코드를 복사 붙여넣기 해서 원하는 형태로 수정하면 된다.

수정단계에서 원하는 뱃지로의 생성을 위해 활용할 수 있는 사이트가 하나 더 있는데 아래의 사이트에서 참고하면 좋다.

https://simpleicons.org/

Simple Icons

Simple Icons에 아이콘이 있다면 Shields.io에서도 대부분 뱃지를 생성할 수 있다고 한다.

 

3️⃣-3️⃣ GitHub Stats

https://github.com/anuraghazra/github-readme-stats

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

오픈 API로, 내 깃허브의 stat을 보여줄 수 있는 카드이다.

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

위의 기본 Markdown코드에서 username과 링크 부분을 수정한 뒤 사용하면 된다.

이 외에도 개인 stats를 숨긴다거나 icons 표시 유무, 테마, 자주 사용하는 언어 등을 더 설정할 수 있으므로 상단의 링크로 이동하여 참고하며 꾸미면 더 좋을 것 같다.

 

3️⃣-4️⃣ Solved.ac

https://github.com/mazassumnida/mazassumnida

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트

이 또한, 오픈 API로 Solved.ac의 티어 즉, 백준 티어를 나타낼 수 있는 카드이다. 

개발직으로 취업준비를 하고 있는 사람이라면 백준 사이트의 알고리즘을 한문제도 풀지 않은 사람은 없을것이라 생각한다. 그러므로 이 오픈 API도 GitHub을 꾸밀때 많은 사람들이 사용할 것이라 생각된다.

[![Solved.ac
프로필](http://mazassumnida.wtf/api/v2/generate_badge?boj={handle})](https://solved.ac/{handle})

위의 기본코드에서 {}로 감싸져 있는 부분을 수정하면 된다.

 

3️⃣-5️⃣ GitHub 또는 기술 블로그 조회수

https://hits.seeyoufarm.com/

HITS

GitHub이나 운영하고 있는 기술 블로그의 조회수를 아이콘으로 넣을 수 있는 좋은 사이트이다. 내가 기술 블로그 활발하게 운영하고 있는 것은 아니지만 조회수가 프로필에 보인다면 자극도 되고 다른 사람들도 나의 성과를 파악하기 편할 것이라 생각하여 추가하게 되었다😊

 

 

4️⃣ README.md COMMIT

프로필로 사용할 README 파일을 모두 수정 완료 했다면 GitHub에 commit해준다.

나는 GitHub에서 바로 commit을 했다.

GitHub에서 Commit

 

 

✨ 결과물

나만의 GitHub 프로필 완성!!!

https://github.com/Soyeong4250

Soyeong4250 - Overview

아직 결과물이 엉성하긴 하지만 점차 프로젝트도 채워나가고 Skills부분도 점차 채워나가며 성장하는 나를 보여주기위한 프로필로 열심히 채워나가야겠다. 위의 GitHub에서 해당 결과물을 볼 수 있다😊