[Github] Github theme 수정 ( Chirpy 커스터마이징)

Github blog를 만들어 보았는데요, 이번에는 테마 수정 하는 글을 포스팅하겠습니다~

Github blog 생성 포스팅은 아래 링크를 참고해주세요~

2022.12.06 - [Github] - [Github] Github blog 생성하기

[Github] Github blog 생성하기

---

1. 파일 설명

2. config 파일 수정

3. footer 파일 수정

4. 바로가기 아이콘 설정

5. avatar 사진 설정

6. favicons 설정

---

저는 Chirpy theme를 사용하였습니다.

 

1. 파일 설명

테마에는 많은 파일들이 들어있습니다.

파일명	내용
_config.yml	블로그의 기본 설정 파일. 기본 환경 세팅
_data	왼쪽 사이드바와 포스트 하단의 공유하기 버튼등의 구성을 변경 언어 설정에 따라 기본적으로 화면에 나오는 단어들을 변경
_include	사이드바, toc, 구글애널리틱스, footer, 댓글 등의 대부분의 모듈형으로 삽입되는 UI를 변경
_layout	블로그 전역에 적용되는 기본 형식, 카테고리, 포스트 등에 적용되는 형식등을 변경
_posts	내가 작성한 블로그 글을 저장해 두는 곳
_sass	css 파일 커스터마이징
_site	로컬에서 실행할 때, 화면 UI를 구성하는 모든 내용 (이곳의 내용을 변경하면 로컬에는 잘 반영되지만, git에는 올라가지 않음, 다른 기본 디렉토리의 내용을 변경하고 빌드하게 되면 이곳의 내용이 바뀌게 됨)
_tabs	왼쪽 사이드바의 기본 탭메뉴들에 대한 랜딩페이지
assets	css, img 등, 포스팅에 들어갈 이미지는 /assets/img 디렉토리에 추가
tools	github에서 자동 배포를 위한 코드.  수정X

 

 

2. config 파일 수정

"_config.yml" 파일을 수정합니다. 

사용자 이름, email 주소, github 주소 등 user 정보를 변경합니다.

lang: en
timezone: Asia/Seoul
title: Codenee                          # the main title
tagline: Codenee's blog   # it will display as the sub-title

url: 'https://codenee.github.io'
github:
  username: codenee             # change to your github username
twitter:
  username: codenee            # change to your twitter username
social:
  name: codenee
  email: example@domain.com             # change to your email address

 

3. footer 파일 수정

_includes/footer.html

저는 footer의 오른쪽 아래에 출력되는 문구를 삭제하기 위해 아래와 같이 주석처리를 했습니다.

<!-- 
      <div class="footer-right">
        <p class="mb-0">

          {% capture _platform %}
          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
          {% endcapture %}

          {% capture _theme %}
          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
          {% endcapture %}

          {{ site.data.locales[site.lang].meta
            | default: 'Powered by :PLATFORM with :THEME theme.'
            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
          }}
        </p>
      </div>
           -->

 

4. 바로가기 아이콘 설정

아래 사진과 같이 바로가기 아이콘과 url을 변경할 수 있습니다.

아이콘과 url을 설정하는 파일은 _data/contact.html 입니다.

저는 twitter와 email을 주석처리하고 tistory 를 추가하였습니다.

 

icon은 아래 링크에 있는 아이콘과 연동되어 사용할 수 있습니다.

https://fontawesome.com/icons/house?s=solid&f=classic 

House Icon | Font Awesome

바로 아래 아이콘을 클릭하면 사용할 수 있는 class id가 나옵니다.

위 id를 복사해서 아래와 같이 icon 항목에 설정하면 house icon이 화면에 출력됩니다 :)

-
  type: github
  icon: 'fab fa-github'
#-
#  type: twitter
#  icon: 'fab fa-twitter'
#-
#  type: email
#  icon: 'fas fa-envelope'
#  noblank: true            # open link in current tab
-
  type: tistory
  icon: 'fa-solid fa-house'
  noblank: true
  url : 'https://code-space.tistory.com/'
-
  type: rss
  icon: 'fas fa-rss'
  noblank: true

사용하고 싶은 icon을 검색해서 설정하면 됩니다~

 

5. avatar 사진 설정

프로필로 사용하고 싶은 사진을 /assets/img 경로에 위치시킵니다.

_config.yml 파일 을 수정합니다. 

"avatoar" 경로를 설정합니다.

avatar: '/assets/img/profile.jpg'

변경 후 push 및 jekyll serve를 통해 정상적으로 적용되는지 확인합니다.

 

6. favicons 설정

favicon이란 'favorites + icon' 의 합성어로, 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다.

Chirpy 테마에서 favicons 설정은 "_includes/favicons.html "파일에 설정되어 있습니다.

이미지 경로는 "/assets/img/favicons"로 설정되어 있습니다. 이 부분을 원하는 경로로 바꾸어도 됩니다.

 

favicon 이미지를 사용하기 위해서는 ico 파일이 있어야합니다. (jpg → ico)

 

jpg 이미지가 있다면, 아래 페이지에서 favicon에 필요한 이미지들과 ico파일을 변환하여 다운로드 할 수 있습니다.

https://favicon.io/favicon-converter/

Favicon.io - The Ultimate Favicon Generator (Free)

 

직접 만들고 싶다면, 아래 링크에서 간단히 만들어서 ico파일로 다운로드 받을 수 있습니다.

https://www.favicon-generator.org/

Favicon & App Icon Generator

favicon만들기는 구글에 검색하면 관련 포스팅이 많이 나옵니다 :)

 

favicon 이미지들은 "/assets/img/favicons" 디렉토리에 위치시키면 됩니다.