[Github] github profile 예쁘게 꾸미기

김우경·2020년 11월 20일
461

🍯팁

목록 보기
2/5
post-thumbnail

올해 초였나 생활코딩 페이지에서 github profile을 예쁘게 꾸밀 수 있는 easter egg가 있다 해서 나중에 해보려고 공유해놨는데 드디어,, 해보았다,,^ ^
뭐든 시작은 공식문서로 하는게 좋으니 공식문서를 참고해서 만들었다!

1. Repository 만들기

내 github 계정이름과 똑같은 이름의 repository를 만들면 된다.

난 이미 같은 이름의 레포를 만들어서 경고가 뜨지만 밑에 귀여운 고양이가 해당 repo의 README를 내 깃헙프로필로 쓸 수 있다고 알려준다 케케

✔️ Add README.md를 체크해줘야한다 !!!

2. README.md 수정하기

이제 만든 레포에서 readme를 입맛에 맞게 수정하면 되는데, 어떤 정보를 넣을까 고민하면서 다른 개발자분들의 프로필을 구경했다. 보통 짧은 소개, 사용해본 기술스택, contact 등의 정보를 넣는 것 같아서 나도 그렇게 하기로 결정~!

markdown 작성시

github에서 바로 작성시 미리볼 수 없어 여러번 커밋해야 한다. markdown 미리보기 제공 서비스에서 한번 작성 하고 복붙하기를 추천한다,,
-> https://dillinger.io/


이렇게 바로바로 볼 수 있어서 얼마나 좋게요 ~!
정렬에 대해서는 저렇게 태그가 텍스트로 그냥 나와서 한참 헤맸는데,, 깃헙에 커밋하면 적용되는거였다. ... 해당 마크다운 미리보기 사이트에서 나오지 않았던것이었다,,,

배지 활용하기

👉🏻 출처 : shields.io 사용방법 참고

이렇게 배지로 깔끔하고 한눈에 들어오게 정리하고 싶었다.

-> 배지https://shields.io/
-> 아이콘https://simpleicons.org/
를 참고하면 된다.!

자세한 코드는

<img src="https://img.shields.io/badge/Python-3766AB?style=flat-square&logo=Python&logoColor=white"/></a>&nbsp 

와 같이 입력해주면 바로 적용이 되는데,

일반화시키면

<img src="https://img.shields.io/badge/쓰고자하는_텍스트-컬러코드?style=flat-square&logo=simpleicons에서_아이콘이름&logoColor=white"/></a>&nbsp 

이렇게 작성하면 된다.

아오 근데 c++은 c++, cplusplus, c-plus-plus 등등 내 머릿속에서 나오는 모든 경우의 수 다 해봤는데 icon이 안먹는다 .,,, 구글링해도 못찾음,, 추후에 수정 예정 ^.ㅠ
-> capsule-render 개발자님이 알려주셨다,, 감사합니다😎
%2B가 +를 의미한다고 한다 알려주신대로 수정하니까 나옴 ㅎㅎ

테크블로그나 인스타그램 등 링크를 걸고싶으면, a태그를 이용한다.

<a href="링크걸_주소"><img src="https://img.shields.io/badge/쓰고자하는_텍스트-컬러코드?style=flat-square&logo=simpleicons에서_아이콘이름&logoColor=white&link=내링크"/></a>&nbsp

3. 추가하기 좋은 오픈소스들

  • capsule-render
    👉🏻 참고 출처 : @new_wisdom님의 포스팅
    : @new_wisdom님의 포스팅을 보고 내 profile의 header 부분에 추가하게 되었다.
    원하는 색상의 header, footer를 추가할 수 있다! 내 프로필에서 분홍색 슬라이스가 capsule-render임! 다양한 모양과 색으로 커스텀 가능하고, 새로고침하면 색깔도 랜덤으로 바뀜 ㅎㅎ,, 자세한건 오픈소스 개발자님 레포에서 설정방법 확인하기
  • 조회수 확인
    👉🏻 참고 출처 : alpox님 블로그
    : 내 github의 방문자 수를 기록해주는 오픈소스이다. 난 넣진 않았음 ,, ,
    -> 레포정리하던참 심심해서 추가해봤다.

    뱃지 색깔 변경가능, 아이콘도 추가 가능! 맨 밑에 넣으니까 좀 귀엽넹,,
  • 내 깃헙 stats
    👉🏻 참고 출처 : madplay님 블로그
    : 내 깃헙의 커밋수, 풀리퀘수 등을 보여주는 카드이다. 설명읽어보니 원하는데로 커스텀이 가능하다고 한다. 너무 길어질거같아서 넣진 않았는데 추후에 추가할 예정~!
  • 내 daily 코딩 시간 기록
    👉🏻 참고 출처 : fernando 블로그
    : 내가 아침, 오전, 오후, 밤 중 어떤 시간에 가장 커밋을 많이 하는지 기록할 수 있는 오픈소스이다. 얘는 프로필이 아니라 pinned repo로 추가할 수 있다. 나중에 해봐야지,,

완성~!

이렇게 30분만에 뚝딱 내 깃헙의 첫 페이지를 예쁘게 완성해보았다~

👉🏻 참고한 포스팅들

profile
Hongik CE

52개의 댓글

comment-user-thumbnail
2020년 11월 20일

크 개멋있네요

1개의 답글
comment-user-thumbnail
2020년 11월 26일

맞팔해요^^❤️

1개의 답글
comment-user-thumbnail
2020년 11월 26일

오오! 너무 예뻐요❣ 저도 포스팅 참고해서 꾸며봐야겠어요🤭

1개의 답글
comment-user-thumbnail
2020년 12월 3일

멋집니다👍👍👍

1개의 답글
comment-user-thumbnail
2020년 12월 14일

많은 도움이 되었어요! 혹시 출처를 남기고 제 포스트에 참고해도 괜찮을까요?

1개의 답글
comment-user-thumbnail
2020년 12월 15일

Thank you for the good writeup. It in fact was a amusement account it.
SLOTXO

1개의 답글
comment-user-thumbnail
2020년 12월 15일

감사합니다 너무 이뻐요.
근데 혹시 🇰🇷 🇦🇺 🇸🇬
는 무슨 뜻인가요? 한국 호주... ?

1개의 답글
comment-user-thumbnail
2020년 12월 16일

정말 깔끔하게 정리하셨네요! 많은 참고할께요 :)

1개의 답글
comment-user-thumbnail
2020년 12월 20일

포그팅 감사합니다~ 참고 잘할게요!

1개의 답글
comment-user-thumbnail
2020년 12월 29일

덕분에 잘 꾸몄어요 감사합니다 !!

1개의 답글
comment-user-thumbnail
2021년 1월 8일

감사합니다!

1개의 답글
comment-user-thumbnail
2021년 1월 9일

포스팅 감사합니다! 덕분에 잘 꾸몄습니다 😄

1개의 답글
comment-user-thumbnail
2021년 1월 26일

감사합니다 덕분에 간단하게 깃허브 프로필을 만들었습니다 ^0^

1개의 답글
comment-user-thumbnail
2021년 2월 2일

꿀팁 얻고 갑니다

1개의 답글
comment-user-thumbnail
2021년 3월 4일

감사합니다 많은 도움이 됐어요 !

1개의 답글
comment-user-thumbnail
2021년 5월 2일

회원님의 정보에 두손두발 다 들었습니다 d=====( ̄▽ ̄*)b 감사합니다

1개의 답글
comment-user-thumbnail
2021년 6월 6일

배지 활용에서 vue.js나 node.js 같이 .이 들어간 스킬들은 어떻게 아이콘 주시나요?

답글 달기
comment-user-thumbnail
2021년 6월 13일

감사합니다~

답글 달기
comment-user-thumbnail
2021년 6월 23일

참고해서 깃허브 예쁘게 꾸몄어요 감사합니다 !!

답글 달기

큰 도움 되었습니다 감사합니다 !

답글 달기
comment-user-thumbnail
2021년 7월 5일

감삼다!! 참고해서 프로필 꾸며야겠어요ㅎㅎㅎㅎ

답글 달기
comment-user-thumbnail
2021년 7월 14일

좋은 포스팅입니다.

답글 달기
comment-user-thumbnail
2021년 7월 25일

친절하게 설명해주셔서 덕분에 쉽게 적용했습니다.

답글 달기

좋은 정보 감사합니다!
저두 참고해서 꾸며봐야겠네요. :)

답글 달기
comment-user-thumbnail
2021년 8월 4일

C++ 로고 아이콘 "C%2B%2B" 로 가져올 수 있습니다!
https://img.shields.io/badge/C++-00599C?style=flat-square&logo=C%2B%2B&logoColor=white

답글 달기
comment-user-thumbnail
2021년 8월 10일

감사합니다~

답글 달기
comment-user-thumbnail
2021년 8월 23일

고맙습니다.

답글 달기
comment-user-thumbnail
2021년 10월 10일

잘 보고 갑니당!같이 맞팔해서 앞으로도 배워가고 싶네요!

1개의 답글
comment-user-thumbnail
2021년 11월 1일

감사합니다!
도움 많이됐습니다(❁´◡`❁)

답글 달기
comment-user-thumbnail
2021년 11월 19일

와 최고에요 생코에서 보고 왔습니다! 바로 참고해서 꾸밀게요!

답글 달기
comment-user-thumbnail
2022년 8월 30일

좋은 자료 감사합니다^^ 저도 참고해서 적용해볼게요!

답글 달기