day_by_day

github 메인화면 꾸미기 / github profile / 깃허브 프로필 만들기 본문

QA Automation/그냥하는거지무슨주제가있어

github 메인화면 꾸미기 / github profile / 깃허브 프로필 만들기

kokorii_ 2023. 6. 30. 00:27

멋사에서 깃허브 특강강사님으로 오신분의 깃허브를 보게되었는데 메인화면이 너무 예뻐서 나도해야지하고 호로록 찾아봄

이렇게 꾸미는거나 자기PR (..) 잘 못하지만 인트로화면같아서 너무 갖.고.싶.었.다 ㅋㅋㅋㅋㅋ 

허허벌판같은 나의 깃허브에 생명 넣어주기

1. 깃허브 계정과 동일한 이름의 repo 만들기

깃허브에서 새 리포지토리를 만들고 이름을 계정과 동일하게 생성한다.
그러면 리포지토리 적는 칸 밑에 무슨 아바타가 나타나서 갑자기 특수 레포 어쩌구 저쩌구한다.
이게 잘 뜨면 아 잘 썻구나 하면된다 

이때 반드시 readme.md 파일 추가를 꼭 꼭 꼭 꼭!!! 넣어야 하고, 꼭 꼭 public 으로 만들어야 한다. 

2. 깃허브 메인 확인해보기

레포를 생성하고 깃허브에 다시 접속해보면 "hi, there"이라는 readme 파일이 메인에 걸려있는 것이 보일 것이다. 

그럼 이제 끝났다. 마크다운문법을 이용해서 수정 -> commit&push 를 반복해주면 된다. 

3. 수정 방법

마크다운 문법 미리보기 사이트에서 하거나 (https://dillinger.io/)
나의 경우 VS Code에서 미리보기로 보면서 수정했다. 

4. 뱃지 만드는 방법

4-1) static badge

대부분 스테틱 뱃지 사이트 (https://shields.io/) 에서 만드는 것 같다. (아니 거의 99.999) 
접속해서 get started를 누르면 위와같은 화면이뜨는데, 여기서 오른쪽 GET /badge/:badgeContent 부분에서 만들 수 있다.
Show optional parameters 를 눌러서 본문을 읽어보고 직접 커스텀 해도 되고, 잘 모른다면 아래 md 코드를 사용하면된다. 

![Static Badge](https://img.shields.io/badge/넣어줄텍스트-컬러값?style=for-the-badge&logo=아이콘이름&logoColor=아이콘색상)

한글로 써둔 곳에 의미 그대로 쓰면된다. 

예를들어 위에 xcode 같은 아이콘을 만들고 싶다면 다음과 같이 쓸 수 있다. 

![Static Badge](https://img.shields.io/badge/xcode-147EFB?style=for-the-badge&logo=xcode&logoColor=white)

 

4-2) 뱃지 아이콘 얻는 방법

logo 자리에 뭘 넣어야하는지 어떻게 알까? 심플 아이콘 사이트(https://simpleicons.org/)에서 검색해보면된다

 

 

Simple Icons

2501 Free SVG icons for popular brands

simpleicons.org

파이썬을 넣고싶다면 사이트에서 Python 을 검색한다. 이름을 클릭하면 바로 복사할 수 있고, 색상값도 바로 복사 가능하다.
이름은 복사해서 logo 값에 넣어주고, 색상값은 badge 뒤에 내가표시해둔 컬러값자리에 넣으면 된다.

5. 많이 쓰는 헤더

요새 인터넷에 걸려있는 많은 md 파일에 헤더 디자인이 예뻐서 구글에서 제공하는 건가 했는데 오픈소스였다 ..!

 

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

🌈 Dynamic Coloful Image Render. Contribute to kyechan99/capsule-render development by creating an account on GitHub.

github.com

사용법은 readme에 설명이 잘 되어있으니 참고하시길

6. 방문자수 

내 깃허브 누가 오겠어 하고 아무생각없이 넣었는데 생각보다 방문자수 많은 것 무슨일 .. 왜오는거지 누가오는거지 ㅋㅋ

 

HITS

Easy way to know how many visitors are viewing your Github, Website, Notion.

hits.seeyoufarm.com

요기가서 자기 깃헙 주소 넣으면 md 코드 나온다 


별건 아닌데 찾아보니 좀 정신없게 정리된 것 같아서 내 나름대로 다시 정리해봄

다들 예쁜 잔디밭 만드시길