[GitHub] 깃허브 꾸미기

---

깃허브 프로필 꾸미기

 

깃허브 프로필에 보이는건 특별한 레포지토리의 README 파일이다.

이를 생성하기 위해서는 아래와 같은 과정을 거치면 된다.

 

1. 자기 깃허브 계정과 동일한 이름의 레포지토리를 생성

(이미지에서는 이미 생성한 상태라 오류가 뜨지만 처음 시도하는 사람이라면 무사히 생성될 것이다.)

 

2. 1의 레포지토리에 들어가 README 수정

 

마크다운 작성 결과를 미리 보고싶다면 미리보기 서비스 제공하는 사이트가 많으니 참고 바란다.

https://stackedit.io/app#

StackEdit

 

 

간단하게 줄글만 쓰면 왼쪽 이미지와 같이 보인다.

하지만 오른쪽 같이 화려하게 꾸미고 싶다면?

 

BEFORE / AFTER

 

포인트는 상단의 헤더, 버튼, 핀 크게 3가지로 잡았다.

이후에 공개용 이력서 노션 같은걸 작성한다면 바로가기 버튼으로 추가해도 좋을 것 같다.

 

2-1. 헤더 추가하기

요 부분은 다른 분의 코드를 가져왔다.

다양한 샘플들을 보유하고 계시는데 그 중 하나를 선택했다.

리드미에 친절하게도 How to Use 부분을 만들어주셨다.

https://github.com/kyechan99/capsule-render#wave

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

 

🔻 마크다운 파일 읽기

만약 글씨도 읽기 귀찮다면? 그냥 미리보기에 나온 이미지를 그대로 쓰고 싶다면?

깃허브에서 마크다운 문서를 보는 방법을 두 가지로 제공하고 있다.
이미지의 빨간 네모 박스를 참고해 < > 모양의 아이콘을 클릭해보자
내가 원하는 헤더의 코드를 찾을 수 있다.

 

2-2. 버튼 만들기

https://shields.io/ 이 사이트를 참고하자.

Shields.io: Quality metadata badges for open source projects

 

기본적으로 버튼 하나는 아래 코드를 사용한다.

<img src="https://img.shields.io/badge/버튼에표시될이름-색상코드?style=flat-square&logo=이름&logoColor=white"/>

 

위 사이트에서 원하는 icon을 검색하고 알맞게 수정하면 된다. (예제: Java)

<img src="https://img.shields.io/badge/Java-007396?style=flat-square&logo=Java&logoColor=white"/>

 

여기서 좀 더 응용하면 바로가기 버튼을 만들 수 있다.

<a href="https://yeonyeon.tistory.com">
  <img src="https://img.shields.io/badge/Tech%20Blog-11B48A?style=flat-square&logo=Vimeo&logoColor=white&link=https://yeonyeon.tistory.com"/>
</a>

<img> 태그는 위 버튼 생성과 만드는 방식이 동일하다.

이 <img> 태그를 <a> 태그로 감싸서 바로가는 링크를 걸 수 있다.

 

2-3. Pin 고정하기

요 부분은 다른 분의 오픈 소스와 gist를 이용한 합작이다.

Pin은 기본적으로 자신의 레포지토리나 gist를 등록해 프로필에 보이게 할 수 있다.

customize your pins 선택

원하는 item 선택 후 save pins 버튼 클릭

 

위 이미지에서 pinned 된 것들을 보면 우측의 TIL_challenge 같이 일반 Repository는 이름과 설명만 보인다.

GitHub Stats 같은 내용은 어떻게 보이게 했을까?에 대해서 설명하려고 한다.

 

일단 내가 사용한 라이브러리는 github-stats-box이니 이를 기준으로 설명하겠다.

다른 라이브러리도 사용 방법이 유사하며 productive-box 등이 있다.

 

1. gist를 public으로 생성

• 제목과 내용은 나중에 수정되니 대충 만들어도 ok

New gist

 

2. gist, repo를 활성화한 github 토큰 생성

• repo와 gist 권한 체크
• 토큰명은 자유롭게
• 토큰 발급 후 나타나는 문자열 반드시 복사해둘 것 (다시 조회 불가능)

오른쪽 상단 settings -&gt; 좌측 메뉴바 Developer settings -&gt; token 생성

 

3. 사용하려는 라이브러리 fork

 

4. Action 활성화

• Action 탭에서 enabled버튼을 눌러 Action 활성화

 

5. .github/workflow/run.yml에서 환경변수를 작성

• GIST_ID: 1에서 생성한 gist의 id

6. secret 환경변수 설정

• 깃허브 토큰은 레포지토리에 공개된 상태로 두기 곤란 -> Secrets 사용
• GH_Token: 깃허브 토큰

7. gist를 내 프로필에 고정

프로필 하단의 Customize your pins

 

 

일정 시간마다 업데이트 되도록 되어있기 때문에 gist 내용이 즉시 적용이 안될 수 있습니다.

주기를 변경하고 싶다면 5에서 변경했던 run.yml에서 schedule 부분을 변경하면 됩니다.

 

 

코드가 궁금하다면 깃허브로 직접 찾아와주신다면 보실 수 있습니다!

https://github.com/yeon-06

yeon-06 - Overview

 

---

참고

http://blog.cowkite.com/blog/2102241544/