<div id="readability-page-1" class="page"><div>
    <div>

        <p>
            

            
            <nav>
                
                
                
                
                
                
                <a href="/blog/tech/">
                    Tech
                </a> / 
                
                
                
                
                
                <a href="/blog/tech/etc/">
                    Etc
                </a>
                
            </nav>
            
        </p>
        
        
        
        <h2>
            README.md를 활용한 나만의 깃헙 프로필 만들기
        </h2>
        <h2>
            2021-02-24 15:44
        </h2>
    </div>

    
    
    
    
    <p>작년 여름 Github 신기능으로 프로필 영역을 꾸밀 수 있는 <a href="https://dev.to/web/design-github-profile-using-readme-md-8al">Design Github profile using README.md</a> 포스팅이 공개되었다. 나도 한번 해봐야지하다가 바쁘다는 핑계로 미뤄왔는데, 최근 CV 정리하면서보니 더 이상 미루면 안 될 것 같아서 이제서야 해보았다. 😉</p>

<p><img src="https://blog.cowkite.com/assets/2102241544/01.png"></p>

<figcaption>🌈💖✨휘황찬란하고 화려해진 제 프로필 좀 보세요❣️💕💛</figcaption>

<h2 id="프로필-생성하기">프로필 생성하기</h2>

<p>GitHub에는 여러 이스터에그가 있는데, <em>username.github.io</em> 이름의 repository를 생성하면 이 블로그처럼 <a href="https://pages.github.com/">GitHub Pages</a>를 활용한 블로그를 생성할 수 있다. 프로필 또한 이 이스터에그 중 하나로 github user name과 동일한 이름의 repository를 만들면 <em>You found a secret!</em>이라는 메시지와 함께 <code>README.md</code> 파일로 깃헙 프로필을 작성할 수 있음으로 알려준다.</p>

<p>Github 접속 &gt; <code>Repository</code> &gt; <code>New</code> 클릭하여 신규 repository를 생성해준 뒤 이름을 본인의 username과 동일하게 입력한다.</p>

<p><img src="https://blog.cowkite.com/assets/2102241544/02.png"></p>

<figcaption>생성할 때 Add a README file 항목을 활성화해주면 직접 README.md 파일을 만들지 않아도 된다.</figcaption>

<p>확인 버튼을 누르면 respotiroy가 만들어지고, <code>Add a README file</code> 옵션을 활성화했을 경우에는 <code>README.md</code> 파일이 함께 생성된다. (혹은 직접 만들어도 된다.)</p>

<p><img src="https://blog.cowkite.com/assets/2102241544/03.png"></p>

<figcaption>기본으로 'Hi there 👋' 내용이 입력되어있다. </figcaption>

<p>이 때 프로필로 가보면 위의 <code>README.md</code> 파일과 같은 내용으로 프로필 영역이 생긴것을 확인할 수 있다.</p>

<p><img src="https://blog.cowkite.com/assets/2102241544/04.png"></p>

<figcaption>힘차게 흔드는 손 발견!</figcaption>

<p>이제 이 <code>README.md</code> 파일을 마음껏 수정해서 프로필 영역을 작성하고 꾸미면 된다.</p>

<h2 id="프로필-꾸미기1---본문-작성">프로필 꾸미기(1) - 본문 작성</h2>

<h2 id="shieldsio--본문에-뱃지-넣기"><a href="https://shields.io/">Shields.io</a> : 본문에 뱃지 넣기</h2>

<p>나의 경우에는 연락처 정보와 스킬셋 기술을 위해 <a href="https://shields.io/">Shields.io</a>를 사용해서 뱃지를 넣었다.</p>

<p><img src="https://blog.cowkite.com/assets/2102241544/05.png"></p>

<p><code>https://img.shields.io/badge/&lt;LABEL&gt;-&lt;MESSAGE&gt;-&lt;COLOR&gt;</code> 형태로 파라미터를 잘 넣어주면 적당한 모양의 뱃지 이미지가 생성된다. 또한 <code>logo</code>, <code>logoColor</code>, <code>labelColor</code> 등의 여러 쿼리를 함께 사용할 수 있다.</p>

<p><img src="https://img.shields.io/badge/Android-3DDC84?style=flat-square&amp;logo=Android&amp;logoColor=white"></p>

<p>예를들어 위처럼 안드로이드 로고와 ‘Android’ 문구가 들어간 연두색의 뱃지를 생성하려면 아래 형식으로 가능하다.</p>

<div><pre><code><span>&lt;img</span> <span>src=</span><span>"https://img.shields.io/badge/Android-3DDC84?style=flat-square&amp;logo=Android&amp;logoColor=white"</span><span>/&gt;</span>
</code></pre></div>

<p>색상코드와 사용가능한 로고의 목록은 <a href="https://simpleicons.org/">simpleicons.org</a>에서 확인할 수 있다.</p>

<h2 id="프로필-꾸미기2---pined-repo-활용하기">프로필 꾸미기(2) - Pined repo 활용하기</h2>

<p><img src="https://blog.cowkite.com/assets/2102241544/06.png"></p>

<p>프로필 메인의 repository 고정 영역을 gist를 활용한 여러 라이브러리를 통해 꾸밀 수 있다. 나는 2개의 라이브러리를 사용해서 꾸며봤는데, 커밋시각을 분석해서 아침형 개발자인지 저녁형 개발자인지 알려주는 <code>productive-box</code>와 깃헙 stats를 나타내는 <code>github-stats-box</code>를 사용했다.</p>

<h2 id="productive-box--커밋시각-통계-노출하기"><a href="https://github.com/maxam2017/productive-box">productive-box</a> : 커밋시각 통계 노출하기</h2>

<p><img src="https://blog.cowkite.com/assets/2102241544/07.png"></p>

<figcaption>나는 아침형 인간..!</figcaption>

<h3 id="사전-작업">사전 작업</h3>

<ol>
  <li><a href="https://gist.github.com/">gist.github.com</a>에서 <strong>public</strong>으로 신규 gist를 생성한다. 제목과 내용은 향후 자동으로 업데이트 될 예정이므로 일단 아무렇게나 작성하면 된다.</li>
  <li><a href="https://github.com/settings/tokens/new">github 토큰생성</a> 페이지에서 <code>gist</code>와 <code>repo</code> scope를 활성화하여 token을 발급한다. 이 때 발급된 토큰은 페이지를 빠져나가면 다시 얻을 수 없으니 클립보드 등에 잘 저장해둔다.</li>
</ol>

<h3 id="라이브러리-사용">라이브러리 사용</h3>

<ol>
  <li><a href="https://github.com/maxam2017/productive-box">productive-box</a> repository를 fork한다. 우측 상단의 <code>Fork</code> 버튼을 누르면 된다.</li>
  <li>fork 된 나의 repository의 <strong>Action</strong> 탭에서 <code>enabled</code> 버튼을 눌러 Action을 활성화한다.</li>
  <li><code>.github/workflow/Schedule.yml</code> 파일을 수정하여 <a href="https://github.com/maxam2017/productive-box/blob/master/.github/workflows/schedule.yml#L17-L18">환경변수</a>를 작성해준다
    <ul>
      <li><strong>GIST_ID</strong>: <em>사전 작업의 1번 step</em>에서 생성된 gist의 id (gist URL은 <code>gist.github.com//</code>로 생성되기 때문에 주소창을 보면 된다.)</li>
      <li><strong>TIMEZONE</strong>: 타임존을 적어준다. <code>Asia/Seoul</code> 형식으로 적어주면 된다.</li>
    </ul>
  </li>
  <li><strong>Settings 탭 &gt; Secrets</strong>에 접속한 뒤 <strong>New repository secret</strong> 버튼을 클릭하여 환경변수를 설정해준다.
    <ul>
      <li><strong>GH_TOKEN</strong>: <em>사전 작업의 2번 step</em>에서 발급받은 토큰</li>
    </ul>
  </li>
  <li><a href="https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/pinning-items-to-your-profile">gist를 내 프로필에 고정한다.</a></li>
  <li>Action 주기(1시간)에 따라 자동으로 갱신 적용되나, 즉시 적용하고 싶다면 <code>README.md</code> 파일을 수정하는 등 파일에 변화를 주면 즉시 적용된다.</li>
</ol>

<h2 id="github-stats-box--github-status-노출하기"><a href="https://github.com/bokub/github-stats-box">github-stats-box</a> : Github Status 노출하기</h2>

<p><img src="https://blog.cowkite.com/assets/2102241544/08.png"></p>

<h3 id="사전-작업-1">사전 작업</h3>

<ol>
  <li><a href="https://gist.github.com/">gist.github.com</a>에서 <strong>public</strong>으로 신규 gist를 생성한다. 제목과 내용은 향후 자동으로 업데이트 될 예정이므로 일단 아무렇게나 작성하면 된다.</li>
  <li><a href="https://github.com/settings/tokens/new">github 토큰생성</a> 페이지에서 <code>gist</code>와 <code>repo</code> scope를 활성화하여 token을 발급한다. 이 때 발급된 토큰은 페이지를 빠져나가면 다시 얻을 수 없으니 클립보드 등에 잘 저장해둔다.</li>
</ol>

<h3 id="라이브러리-사용-1">라이브러리 사용</h3>

<ol>
  <li><a href="https://github.com/bokub/github-stats-box">github-stats-box</a> repository를 fork한다. 우측 상단의 <code>Fork</code> 버튼을 누르면 된다.</li>
  <li>fork 된 나의 repository의 <strong>Action</strong> 탭에서 <code>enabled</code> 버튼을 눌러 Action을 활성화한다.</li>
  <li><code>.github/workflow/Schedule.yml</code> 파일을 수정하여 <a href="https://github.com/maxam2017/productive-box/blob/master/.github/workflows/schedule.yml#L17-L18">환경변수</a>를 작성해준다
    <ul>
      <li><strong>GIST_ID</strong>: <em>사전 작업의 1번 step</em>에서 생성된 gist의 id (gist URL은 <code>gist.github.com//</code>로 생성되기 때문에 주소창을 보면 된다.)</li>
      <li><strong>ALL_COMMITS</strong>: <code>true</code>일 경우 나의 전체 커밋을 카운트하고, <code>false</code>일 경우 작년 커밋만을 카운트한다.</li>
      <li><strong>K_FORMAT</strong>: <code>true</code>일 경우 <code>1.5k</code>와 같이 숫자를 “k”로 포맷팅하여 노출한다.</li>
    </ul>
  </li>
  <li><strong>Settings 탭 &gt; Secrets</strong>에 접속한 뒤 <strong>New repository secret</strong> 버튼을 클릭하여 환경변수를 설정해준다.
    <ul>
      <li><strong>GH_TOKEN</strong>: <em>사전 작업의 2번 step</em>에서 발급받은 토큰</li>
    </ul>
  </li>
  <li><a href="https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/pinning-items-to-your-profile">gist를 내 프로필에 고정한다.</a></li>
  <li>Action 주기에 따라 자동으로 갱신 적용되나, 즉시 적용하고 싶다면 <code>README.md</code> 파일을 수정하는 등 파일에 변화를 주면 즉시 적용된다.</li>
</ol>

<h2 id="그-외">그 외</h2>

<h2 id="더-많은-gists-라이브러리-찾아보기">더 많은 gists 라이브러리 찾아보기</h2>

<p><img src="https://blog.cowkite.com/assets/2102241544/09.png"></p>

<p><a href="https://github.com/matchai/awesome-pinned-gists">matchai/awesome-pinned-gists</a>에 여러 라이브러리들이 정리되어있다. Twitter를 연동하여 내 최근 트윗을 보여주거나 Spotify를 연동하여 최근 재생 음악을 보여줄 수 있고, 그 외 내가 많이 사용하는 언어 등의 정보들도 노출할 수 있다.</p>

<h2 id="백준-solvedac-랭킹-노출하기">백준 solved.ac 랭킹 노출하기</h2>

<p><img src="https://blog.cowkite.com/assets/2102241544/10.png"></p>

<p>나는.. 백준을 잘 애용하진 않아서(핑계임) 브론즈따리라 차마 갖다 쓰진 않았지만, 다른 개발자들은 <a href="https://github.com/mazassumnida/mazassumnida">mazassumnida/mazassumnida</a> 라이브러리를 활용해서 solved.ac 랭킹을 많이들 노출하는 것 같다. (라이브러리 이름이 ‘마자씀니다’ 인가봄..)</p>

<h2 id="stats-등급-노출하기">stats 등급 노출하기</h2>

<p><img src="https://blog.cowkite.com/assets/2102241544/11.png"></p>

<p>나는 pinned gist를 활용해서 github stats를 노출했지만, <a href="https://github.com/anuraghazra/github-readme-stats">anuraghazra/github-readme-stats</a> 라이브러리도 있다. 이걸 활용하면 여러가지 테마로 stats를 노출하고, 등급 정보까지 산정(?)할 수 있다. <del>최저 B 등급부터 시작하는 개발자의 센스가 돋보이는 라이브러리다.</del></p>

<h2 id="-제-깃헙도-놀러오세요"><a href="https://github.com/cowkite">🌱 제 깃헙도 놀러오세요..!</a></h2>



    
</div></div>

개발요정 김소연 블로그 🧚‍♀️

작년 여름 Github 신기능으로 프로필 영역을 꾸밀 수 있는 Design Github profile using README.md 포스팅이 공개되었다. 나도 한번 해봐야지하다가 바쁘다는 핑계로 미뤄왔는데, 최근 CV 정리하면서보니 더 이상 미루면 안 될 것 같아서 이제서야 해보았다. 😉
🌈💖✨휘황찬란하고 화려해진 제 프로필 좀 보세요❣️💕💛
프로필 생성하기
GitHub에는 여러 이스터에그가 있는데, username.github.io 이름의 repository를 생성하면 이 블로그처럼 GitHub Pages를 활용한 블로그를 생성할 수 있다. 프로필 또한 이 이스터에그 중 하나로 github user name과 동일한 이름의 repository를 만들면 You found a secret!이라는 메시지와 함께 README.md 파일로 깃헙 프로필을 작성할 수 있음으로 알려준다.
Github 접속 > Repository > New 클릭하여 신규 repository를 생성해준 뒤 이름을 본인의 username과 동일하게 입력한다.
생성할 때 Add a README file 항목을 활성화해주면 직접 README.md 파일을 만들지 않아도 된다.
확인 버튼을 누르면 respotiroy가 만들어지고, Add a README file 옵션을 활성화했을 경우에는 README.md 파일이 함께 생성된다. (혹은 직접 만들어도 된다.)
기본으로 'Hi there 👋' 내용이 입력되어있다. 
이 때 프로필로 가보면 위의 README.md 파일과 같은 내용으로 프로필 영역이 생긴것을 확인할 수 있다.
힘차게 흔드는 손 발견!
이제 이 README.md 파일을 마음껏 수정해서 프로필 영역을 작성하고 꾸미면 된다.
프로필 꾸미기(1) - 본문 작성
Shields.io : 본문에 뱃지 넣기
나의 경우에는 연락처 정보와 스킬셋 기술을 위해 Shields.io를 사용해서 뱃지를 넣었다.
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR> 형태로 파라미터를 잘 넣어주면 적당한 모양의 뱃지 이미지가 생성된다. 또한 logo, logoColor, labelColor 등의 여러 쿼리를 함께 사용할 수 있다.
예를들어 위처럼 안드로이드 로고와 ‘Android’ 문구가 들어간 연두색의 뱃지를 생성하려면 아래 형식으로 가능하다.
<img src="https://img.shields.io/badge/Android-3DDC84?style=flat-square&logo=Android&logoColor=white"/>
색상코드와 사용가능한 로고의 목록은 simpleicons.org에서 확인할 수 있다.
프로필 꾸미기(2) - Pined repo 활용하기
프로필 메인의 repository 고정 영역을 gist를 활용한 여러 라이브러리를 통해 꾸밀 수 있다. 나는 2개의 라이브러리를 사용해서 꾸며봤는데, 커밋시각을 분석해서 아침형 개발자인지 저녁형 개발자인지 알려주는 productive-box와 깃헙 stats를 나타내는 github-stats-box를 사용했다.
productive-box : 커밋시각 통계 노출하기
나는 아침형 인간..!
사전 작업
gist.github.com에서 public으로 신규 gist를 생성한다. 제목과 내용은 향후 자동으로 업데이트 될 예정이므로 일단 아무렇게나 작성하면 된다.
github 토큰생성 페이지에서 gist와 repo scope를 활성화하여 token을 발급한다. 이 때 발급된 토큰은 페이지를 빠져나가면 다시 얻을 수 없으니 클립보드 등에 잘 저장해둔다.
라이브러리 사용
productive-box repository를 fork한다. 우측 상단의 Fork 버튼을 누르면 된다.
fork 된 나의 repository의 Action 탭에서 enabled 버튼을 눌러 Action을 활성화한다.
.github/workflow/Schedule.yml 파일을 수정하여 환경변수를 작성해준다
    
GIST_ID: 사전 작업의 1번 step에서 생성된 gist의 id (gist URL은 gist.github.com//로 생성되기 때문에 주소창을 보면 된다.)
TIMEZONE: 타임존을 적어준다. Asia/Seoul 형식으로 적어주면 된다.
Settings 탭 > Secrets에 접속한 뒤 New repository secret 버튼을 클릭하여 환경변수를 설정해준다.
    
GH_TOKEN: 사전 작업의 2번 step에서 발급받은 토큰
gist를 내 프로필에 고정한다.
Action 주기(1시간)에 따라 자동으로 갱신 적용되나, 즉시 적용하고 싶다면 README.md 파일을 수정하는 등 파일에 변화를 주면 즉시 적용된다.
github-stats-box : Github Status 노출하기
사전 작업
gist.github.com에서 public으로 신규 gist를 생성한다. 제목과 내용은 향후 자동으로 업데이트 될 예정이므로 일단 아무렇게나 작성하면 된다.
github 토큰생성 페이지에서 gist와 repo scope를 활성화하여 token을 발급한다. 이 때 발급된 토큰은 페이지를 빠져나가면 다시 얻을 수 없으니 클립보드 등에 잘 저장해둔다.
라이브러리 사용
github-stats-box repository를 fork한다. 우측 상단의 Fork 버튼을 누르면 된다.
fork 된 나의 repository의 Action 탭에서 enabled 버튼을 눌러 Action을 활성화한다.
.github/workflow/Schedule.yml 파일을 수정하여 환경변수를 작성해준다
    
GIST_ID: 사전 작업의 1번 step에서 생성된 gist의 id (gist URL은 gist.github.com//로 생성되기 때문에 주소창을 보면 된다.)
ALL_COMMITS: true일 경우 나의 전체 커밋을 카운트하고, false일 경우 작년 커밋만을 카운트한다.
K_FORMAT: true일 경우 1.5k와 같이 숫자를 “k”로 포맷팅하여 노출한다.
Settings 탭 > Secrets에 접속한 뒤 New repository secret 버튼을 클릭하여 환경변수를 설정해준다.
    
GH_TOKEN: 사전 작업의 2번 step에서 발급받은 토큰
gist를 내 프로필에 고정한다.
Action 주기에 따라 자동으로 갱신 적용되나, 즉시 적용하고 싶다면 README.md 파일을 수정하는 등 파일에 변화를 주면 즉시 적용된다.
그 외
더 많은 gists 라이브러리 찾아보기
matchai/awesome-pinned-gists에 여러 라이브러리들이 정리되어있다. Twitter를 연동하여 내 최근 트윗을 보여주거나 Spotify를 연동하여 최근 재생 음악을 보여줄 수 있고, 그 외 내가 많이 사용하는 언어 등의 정보들도 노출할 수 있다.
백준 solved.ac 랭킹 노출하기
나는.. 백준을 잘 애용하진 않아서(핑계임) 브론즈따리라 차마 갖다 쓰진 않았지만, 다른 개발자들은 mazassumnida/mazassumnida 라이브러리를 활용해서 solved.ac 랭킹을 많이들 노출하는 것 같다. (라이브러리 이름이 ‘마자씀니다’ 인가봄..)
stats 등급 노출하기
나는 pinned gist를 활용해서 github stats를 노출했지만, anuraghazra/github-readme-stats 라이브러리도 있다. 이걸 활용하면 여러가지 테마로 stats를 노출하고, 등급 정보까지 산정(?)할 수 있다. 최저 B 등급부터 시작하는 개발자의 센스가 돋보이는 라이브러리다.
🌱 제 깃헙도 놀러오세요..!

Github Profile 꾸미기

댓글