[Github Profile] 깃허브 프로필 만들기

Github 새로운 업데이트

깃허브에서 새로운 기능이 나왔습니다!

https://dev.to/web/design-github-profile-using-readme-md-8al

Design Github profile using README.md

Github를 들어갈때 REDME.md로 자신의 간단한 소개를 넣을 수 있는 기능이 추가되었습니다. 

프로 Github유저로써 이러한 기능은 빼먹을 수 없죠!

 

만드는 방법과 심플하면서도 이쁘게 꾸밀 수 있는지 알아보도록 합시다.

 

1. Github Repository를 자신의 이름과 동일하게 만들기

꾸미지 않은 Github링크

여기서 Repositories 탭을 눌러줍시다.

 

New 버튼을 눌러서 새로운 Respository를 만들어주세요.

레파지토리 만드는 방법

[Repository name]을 맞게 입력하면 동그라미 친 부분뜹니다!

여기서 Repository name에 Owner의 이름과 동일하게 넣어주세요!

제 Owner는 AlpoxDev이므로 AlpoxDev를 넣어 Create respository를 진행하였습니다.

 

만든 직후의 모습

Repository를 만들고 난 직후는 이런 모습이 뜹니다.

빨간 네모박스 친 부분을 실행하고 나면 README.md파일이 생기며, 우리는 README.md파일을 수정할 예정입니다!

리드미를 작성한 후 모습

README.md를 생성하면 이와 같은 모습이 나옵니다! 이제 마크다운을 수정할 차례입니다!

 

2. README.md를 수정해서 프로필 꾸미기

- Github Followers : https://shields.io/category/social

- HITS - seeyourfarm : https://hits.seeyoufarm.com/

- HITS - dwyl.io: http://hits.dwyl.io/

- 그 외 인스타, 깃허브 뱃지 : http://img.shields.io/badge/-뱃지이름-색상코드(#제외)?style=flat(스타일)&logo=로고아이콘이름&link=링크

 

뱃지를 지원하는 사이트는 많네요! 이러한 사이트를 이용해 만들어봅시다!

저는 먼저 저의 팔로워수를 보여주기 위해서 (얼마 없지만 ㅠㅠ)

shields.io 사이트에서 만들어보고 합니다.

 

2-1. 깃허브 팔로워 뱃지

1. https://shields.io/category/social 에 접속해주세요.

2. 빨간 네모상자를 눌러주세요.

3. 유저네임 ex)AlpoxDev 을 입력해주신 후, Copy Badge URL 클릭!

 

<img src="https://img.shields.io/github/followers/AlpoxDev?style=social">

![](https://img.shields.io/github/followers/AlpoxDev?style=social)

4. README.md에 위에 html형식 또는 마크다운 형식으로 입력해주시면 끝이 납니다.

 

2-2. HITS로 방문자 수 뱃지 표시하기

- HITS - seeyourfarm : [hits.seeyourfarm](https://hits.seeyoufarm.com/)

- HITS - dwyl.io: [hits.dwyl.io](http://hits.dwyl.io/)

 

둘 중 아무거나 들어가서 생성하시면 됩니다. 저는 seeyoufarm 사이트가 더 이쁘기에 여기서 만들어보도록 하겠습니다.

 

1. https://hits.seeyoufarm.com/ 에 접속해주세요.

HITS

 

2. 스크롤을 내려주세요.

 

3. 자신의 프로필 URL을 입력한 후, 마크다운 형식 또는 HTML형식을 복사해주세요.

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FAlpoxDev)](https://hits.seeyoufarm.com)

<a href="https://hits.seeyoufarm.com"/><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FAlpoxDev"/></a>

 

4. 리드미에 입력해주세요!

 

2-3. 인스타그램, 개인 블로그 뱃지 만들기

shields.io에서는 뱃지 또한 커스터마이징 해서 만들 수 있는 기능이 있습니다.

http://img.shields.io/badge/-뱃지이름-색상코드(#제외)?style=flat(스타일)&logo=로고아이콘이름&link=링크

- 뱃지 이름 : 뱃지가 어떻게 표시되는지

- 색상 코드 또는 색깔 : #을 제외한 헥스코드를, 귀찮다 하시는 분들은 네모박스에 되어있는 색깔을 텍스트로 입력해주시면 됩니다.

- 스타일 : 위 이미지 참고!

- 로고 아이콘 이름 : https://simpleicons.org/ 에서 찾아서 텍스트로 작성하시면 뜹니다!

- 링크 : 뱃지를 클릭했을 때 어디로 이동하는지 링크를 첨부할 수 있습니다.

 

예시 입력

<a href="https://instagram.com/alpox.dev">
    <img 
        src="http://img.shields.io/badge/-Instagram-black?style=flat&logo=Instagram&link=https://instagram.com/alpox.dev/"
        style="height : auto; margin-left : 10px; margin-right : 10px;"/>
</a>
<a href="https://alpox.kr">
    <img 
        src="http://img.shields.io/badge/-Tech%20Blog-655ced?style=flat&logo=github&link=https://alpox.kr"
        style="height : auto; margin-left : 10px; margin-right : 10px;"/>
</a>

예시 출력

 

3. 마무리

<div>
    <img 
        src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FAlpoxDev"
        style="height : auto; margin-left : 10px; margin-right : 10px;"/>
    <img 
        src="https://img.shields.io/github/followers/AlpoxDev?label=AlpoxDev%20Followers&style=social"
        style="height : auto; margin-left : 10px; margin-right : 10px;"/>
</div>

## AlpoxDev : Service Programmer

어플리케이션부터 프론트엔드, 백엔드 모두 관심이 많으며 실 서비스를 만드는데 관심이 많은 프로그래머입니다. 

## Stack

- React.js
- Node.js
- React-Native
- Android-Studio

<a href="https://instagram.com/alpox.dev">
    <img 
        src="http://img.shields.io/badge/-Instagram-black?style=flat&logo=Instagram&link=https://instagram.com/alpox.dev/"
        style="height : auto; margin-left : 10px; margin-right : 10px;"/>
</a>
<a href="https://alpox.kr">
    <img 
        src="http://img.shields.io/badge/-Tech%20Blog-655ced?style=flat&logo=github&link=https://alpox.kr"
        style="height : auto; margin-left : 10px; margin-right : 10px;"/>
</a>

제 README.md는 이렇게 작성하였습니다.

 

예시

예시는 이와 같습니다.

제가 어떤 것을 하는지 간략하게 작성하였습니다. 너무 길게 쓰면 Pinned와 같은 밑에 부분이 보이지 않게 간략하게 작성하는 것이 중요한 것 같습니다!

 

깃허브는 개발자에게 있어 가장 중요한 포트폴리오가 될 수 있습니다. 그런 점에서 자신의 소개를 간략하게 하는 것이 중요하다고 여겨 포스팅하게 되었습니다. 수고 많으셨습니다!!