깃허브가 너무 뒤죽박죽이고 안 예뻐서 깃허브 꾸미기, 깃꾸를 한번 해봤다!!!
레포지토리 생성
우선 깃허브를 꾸미기 위해서는 본인의 아이디와 동일한 이름의 레포지토리를 생성해야 한다.
나는 이미 만들어놔서 저렇게 표시되지만 없는 경우 새로 생성하면 된다. 아래 옵션에서 README file을 추가하도록 선택하고 레포지토리를 만들면 준비 끝이다!
이제 해당 레포지토리에 들어가 README 파일을 수정하면 된다. 여기서 본인이 원하는대로 커스터마이징해서 꾸미면 된다. 나는 미감이 뒤떨어져서... 다른 사람들의 레포지토리를 참고해 대략적인 틀을 잡았다.
- 타이틀
- 기술스택
- 블로그 주소
- 현재 깃허브의 상태(커밋 수, 언어별 분포 등)
이런 식으로 틀을 잡고 만들어 주었다.
타이틀
가장 위에 오는 타이틀은 capsule-render를 활용했다.
가이드에 있는 코드를 복붙하면 예쁜 표지를 만들 수 있고 커스텀도 가능하다.
나는 심플하면서도 동적인 느낌의 타이틀이 예뻐 보여 wave 타입을 선택했다. 참고로 텍스트에 띄어쓰기를 넣으려면 %20을 추가하면 된다.
아래는 내가 사용한 코드로 원하는 텍스트나 색상 등을 수정해 적용하면 된다.
결과물!
color=auto로 설정해서 새로고침할 때마다 색이 바뀌도록 설정했다. 색상을 고정하고 싶다면 원하는 색을 지정하면 된다. 나는 이 방식이 마음에 들었다ㅎㅎ
- 중앙 정렬이 하고 싶으면 저 코드를 div로 감싸고
<div align="center">를 해주면 된다.<h1>이나<h2>는 글씨 밑에 수평선이 생긴다. 이게 싫으면<h3>부터 쓰면 된다!!
기술 스택 뱃지
다른 사람들이 꾸민 깃허브 레포지토리를 보면 기술 스택 뱃지가 가장 눈에 띈다. 많을수록 엄청난(?) 개발자 같지만 나는 일단 프론트엔드 관련해서 직접 사용해본 것만 추가했다.
여기서 원하는 뱃지를 골라 추가하면 된다. 타이틀과 동일한 방식으로 적용하면 된다. 만약, JavaScript를 추가하고 싶다면 뱃지를 찾아 이미지 주소를 복사해 붙이면 된다.
대괄호 안에는 원하는 아무 이름을 적으면 된다. 저 사이트 리드미에 벨로그는 없길래 벨로그는 내가 따로 찾아왔다..ㅎㅎ
<a href="https://velog.io/@bungbuung">
<img src="https://img.shields.io/badge/Velog-1EBC8F?style=for-the-badge&logo=velog&logoColor=white" />
</a>href에 자신의 블로그 링크를 넣으면 클릭 시 이동한다.
결과물!
(마크다운은 그냥 가운데 길이를 좀 길게 하고 싶어서 대충 넣어놨다..ㅋㅋㅋㅋ)
깃허브 언어 분포
GitHub Readme Stats를 활용해 깃허브 활동 내역을 추가할 수 있다.
자신의 깃허브 활동 내역을 자동으로 등급 매겨서 넣을 수 있다. 근데 나는 씨쁠이 나와서 안 쓰기로 했다. (씨쁠은 대학에서 받은 걸로 충분하다^^)
이 링크에서 언어 스탯도 사용할 수 있다. 위의 사진처럼 언어별 분포도 넣을 수 있어서 이걸 추가해주기로 했다. 다양한 레이아웃이 있었는데 난 도넛모양을 택했다.
<a href="https://github.com/anuraghazra/convoychat">
<img height=220 src="https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브이름&layout=donut" />
</a>a태그는 굳이 필요없지만 그냥 넣어주었다.
username에 자신의 깃허브 이름을 넣어주면 된다. 특정 레포지토리를 제외하려면 &exclude_repo=레포이름을 사용한다. 그러면 해당 레포지토리는 빼고 언어 분포가 계산된다.
깃허브 활동 내역
GitHub Readme Streak Stats를 사용해서 활동 내역을 넣어주었다.
사이트에 들어가면 어떤식으로 나오는지 미리 볼 수 있고 페이지에서 파라미터를 조정하여 나온 주소를 복붙해주면 된다. (근데 사이트가 렉이 많이 걸린다🥹)
Username에 마찬가지로 깃허브 이름을 넣고 테마색이나 크기 등을 조절해주면 된다. 나는 아까 만든 언어 분포와 사이즈를 맞추기 위해 높이를 220으로 해주었고 Longest 섹션은 따로 필요 없는 것 같아서 제거해주었다.
+) 레포지토리 이슈를 들어가보니 사이트가 제대로 작동하지 않는 경우가 많은 것 같다.. 제대로 작동이 안될 땐 아래의 코드로 수정해주면 된다.
<a href="https://git.io/streak-stats">
<img height=220 src="https://github-readme-streak-stats-seven-azure.vercel.app?user=깃허브이름&card_width=400&short_numbers=true" alt="GitHub Streak"/>
</a>최종 코드
최종 결과물 완성! 깃허브가 훨씬 깔끔해지고 자주 들어가게 된다🥳
코드
<div align="center">
</div>
<div align="center">
<h3>⚒️ Tech Stack ⚒️</h3>
<img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" />
<img src="https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white" />
</div>
<br><br>
<div align="center">
<h3>📫 About Me 📫</h3>
<a href="https://velog.io/@bungbuung">
<img src="https://img.shields.io/badge/Velog-1EBC8F?style=for-the-badge&logo=velog&logoColor=white" />
</a>
</div>
<br><br>
<div align="center">
<a href="https://git.io/streak-stats">
<img height=220 src="https://github-readme-streak-stats-seven-azure.vercel.app?user=lje00220&card_width=400&short_numbers=true&hide_longest_streak=true" alt="GitHub Streak"/>
</a>
<a href="https://github.com/anuraghazra/convoychat">
<img height=220 src="https://github-readme-stats.vercel.app/api/top-langs/?username=lje00220&exclude_repo=bigdata-project&layout=donut" />
</a>
</div>