GitHub | 메인 페이지 만들기 & 꾸미기 (Feat. README.md)

깃허브(GitHub) 메인 페이지를 구성할 때 사용한 방법들에 대한 글이다.

깃허브 메인 페이지 꾸미기

github mainpage setting

깃허브 메인페이지

깃허브 메인페이지란?

깃허브 메인페이지는 다른 사람의 깃허브 메인페이지에 보이는 화면을 말한다.

커버 페이지

깃헙은 개발자들이 공개적으로 코드를 저장, 공개하고 협업하는 공간이다. 이런 개방성 덕분에 누구나 세계 최고 개발자들의 코드를 자유롭게 볼 수 있고 또 그 코드에 기여도 할 수 있다. 깃헙이 코드를 공개하고 협업하는 역할에 중요한 역할하게 되면서, 개발자들의 깃헙 페이지는 공개된 포트폴리오 역할 또한 수행하고 있다. 이런 여러가지 역할과 더불어 개발자들은 자신의 깃헙 메인페이지를 통해서 자신의 깃허브를 한눈에 잘 표현하기 위해 메인 화면을 "커버 페이지"처럼 사용하고 있다.

들어가며

본 포스팅에서는 ydmins가 메인페이지를 구성하면서 사용한 요소들의 사용법을 살펴볼 것이다.

깃허브 메인페이지 만들기

이제 깃헙 페이지를 만드는 과정을 살펴보도록 한다. 이미 메인 페이지를 위한 레포지토리가 존재한다면 이번 단계는 넘어가도 된다.

깃헙 메인페이지를 위한 레포지토리 만들기

깃헙 메인피이지는 하나의 깃헙 계정당 딱 하나의 공간에 생성할 수 있다. 일단 자신의 깃헙에 로그인 한 후 왼쪽 상단에 위치한 + 버튼을 눌러준다.

 

깃허브 상단

여기서 "New repository"를 눌러준다.

New Repository

이번 단계가 중요하다. Repository name에 자신의 GitHub 계정 이름을 넣어줘야 한다. 꼭 계정과 동일해야한다. 그리고 public 으로 설정해 준다. 그 다음으로 정말 중요한 것이 README 파일을 추가하는 것이다. 리드미 파일 추가는 아래와 같이 설정 체크를 하면 된다.

Create New Repsitory

이렇게 설정을 완성한 뒤 create repository 버튼을 눌러주면 일단 메인 페이지가 생성된다.

메인 페이지 꾸미기 = 리드미 파일 수정하기

이제 프로필 화면으로 가면 메인 화면에 아래와 같은 프로필 화면이 생겼을 것이다. 여기서 오른쪽 연필 버튼을 눌러서 리드미 파일을 수정하면서 메인 화면을 꾸밀 수 있다.

readme

YdMinS 메인 화면 소개

이번에 구성해 본 YdMinS의 메인 화면 모습이다. 이전에 비해서 개인적으로 마음에 든다. 여기서 사용한 기술?들을 살펴보자.

YdMinS 메인 페이지

텍스트와 이모지의 영역

Ydmins Text Area

리드미 파일은 기본적으로 마크다운(md) 파일이다. 마크다운이 익숙하다면 마크다운 본연의 기능만으로도 충분히 멋진 메인 페이지를 구성할 수 있다. ydmins 메인 페이지의 첫 단락은 마크다운과 이모지 만으로 구성돼 있다.

참고
위와 같은 인적사항 성 정보는 깃허브 프로필에서 등록도 가능하다. YdMinS는 점차 하나씩 옮겨갈 계획이다.

이미지 영역

YdMinS Image Area

두번째 영역은 이미지로 구성한 영역이다. 마크다운에 적용할 수 있는 많은 써드파티 뱃지들이 있다. 하지만 크기부터, 모양까지 모든 걸 만족하는 곳을 찾지 못해서 기본 이미지들을 업로드해 불러오는 방식을 사용했다. 포토샵으로 50px x 50px 사이즈의 벡터 이미지들을 만들어 위에서 생성한 레포지토리에 올려두었다. 아래는 이미지들을 불러오는 실제 코드들이다.

### Main Tools
<div width="100%">
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/java.png" alt="java" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/kotlin.png" alt="kotlin" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/spring.png" alt="spring" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/spring-security.png" alt="spring security" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/spring-data-jpa.png" alt="spring data jpa" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/mysql.png" alt="mysql" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/aws-ec2.png" alt="aws ec2" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/aws-rds.png" alt="aws rds" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/jwt.png" alt="jwt" height="50px"/>
</div>

### Currently Developing Tools
<div width="100%">
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/docker.png" alt="docker" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/github-actions.png" alt="github actions" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/linux.png" alt="linux" height="50px"/>
  <img align="left" src="https://raw.githubusercontent.com/ydmins/YdMinS/main/icons/nginx.png" alt="nginx" height="50px"/>
</div>

깃헙에 올려둔 이미지를 불러 올 때 아래와 같은 양식을 따르면 된다.

https://raw.githubusercontent.com/{계정이름}/{레포지토리이름}/{브렌치이름}/{이미지Path}

통계 영역

마지막은 통계영역이다. 굉장히 다양한 통계 도구들이 존재하기 때문에 본 포스팅에서 사용한 방식을 토대로 더 멋진 것들을 찾아서 적용하면 된다.

YdMinS Statistics Area

 

아래는 실제 사용한 코드이다.

### Statistics
<div>
  <img alt="stats" align="left" src="https://github-readme-stats.vercel.app/api?username=ydmins&show_icons=true&theme=holi" width = "49%" height="130%" />
  <img alt="algorithms" src="http://mazassumnida.wtf/api/generate_badge?boj=ydmins" width="42%" height="100%"/>
</div>
<div>
  <img height=200 align="left"src="https://github-readme-stats.vercel.app/api/top-langs/?username=ydmins&hide=c%23,powershell,Mathematica,Ruby,Objective-C,Objective-C%2b%2b,Cuda&title_color=61dafb&text_color=ffffff&icon_color=61dafb&bg_color=20232a&langs_count=8&layout=compact&border_color=61dafb&hide_border=true&size_weight=0.5&count_weight=0.5"/>
</div>

이와 같은 통계를 적용할 땐 url에 쿼리 값에 자신의 아이디를 적절하게 넣어줘야 한다는 것이다. 첫번째(YdMinS' GitHub Stats)와 마지막(Most Used Languages)의 username에는 깃허브 계정을 넣어줘야 한다. 두번째 백준 등급조회를 위해선 boj 쿼리에 자신의 백준 계정을 넣어줘야 한다. 

Github Readme Stats & Most Used Languages

첫 번째 통계치는 아래 깃허브 페이지에 가면 더욱 다양한 사용법을 확인할 수 있다.

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

Mazassumnida

두 번째 백준 등급은 아래 깃허브 페이지에서 자세한 사용법을 확인할 수 있다.

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

정리

• 이력서와 포트폴리오를 정리하듯이 주기적으로 깃허브 메인페이조 관리를 해줘야 할 필요성을 느끼게 되었다. 한 번 자신에 맞는 틀을 만들어 놓으면 변동 사항들만 추가하면 되기 때문에 한 번씩은 시간을 내서 만들어 보길 추천한다.
• 단, 한 번에 완벽하게 되지 않을 수 있으니 만들고 수정, 수정, 또 수정하는 과정을 가지겠다고 생각하고 접근하면 더 좋은 결과가 나올 것이라 믿는다.
• 그리고 좀 더 멋진 페이지를 만들기 위해서 직접 다양한 시도를 해보는 것도 좋지만 다른 분들의 멋진 깃헙 페이지를 많이 참고해 보면 좋다.