chirpy 테마 블로그 꾸미기

GitHub Blog 시리즈

github blog도 만들고 chirpy 테마도 적용하였으면 이제 본격적으로 나만의 블로그 만들기!

GitHub Blog_1 chirpy 테마 블로그 꾸미기
GitHub Blog_2 github blog 포스트 작성하기
GitHub Blog_3 markdown 파일 작성하기
GitHub Blog_4 github blog와 google 연동하기

기본 설정

테마 적용할 때 바꿔준 기본 설정 다시 보기

lang	언어 (_data/locales/에서 확인 가능)
timezone	나라별 시간대
title	블로그 제목
tagline	서브 타이틀로, 제목 아래 위치
github username	자신의 github username
twitter username	자신의 twitter username
social name	자신의 이름
social email	사용할 이메일 주소
social links	가지고 있는 링크 (트위터, 깃허브, 페이스북,..)
paginate	한페이지에 보일 게시글 갯수

아바타(avatar) 바꾸기

1. assets/img/에 원하는 이미지 저장하기
2. _config.yml의 avatar 부분에 이미지 경로 입력하기

#img_cdn: "https://chirpy-img.netlify.app"

# the avatar on sidebar, support local or CORS resources
avatar: /assets/img/mungzip.jpg

img_cdn에 주석처리가 되어있지 않으면 주석처리를 해주세요!
그냥 avatar에 경로만 입력할 경우, 이미지가 url로 저장되어 이미지가 제대로 보이지 않을 수 있어요.
개발자 모드로 이미지를 확인해보면 이미지가 어떻게 저장되어 있는지 확인 할 수 있어요.

아바타 이미지 오류일 경우:
아바타 이미지 정상일 경우:

언어 설정

언어를 설정하면 왼쪽 사이드바의 언어가 바뀌는데,
저는 한국어와 영어 중 더 마음에 드는 영어로 선택했어요.

_config.yml에서 lang 부분 바꿔주기

lang: en, ko-KR

사이드바 페이지 연동 바꾸기

기본적으로 github, twitter, email이 있는데, 저는 twitter가 없기 때문에 없애줬어요.

1. _config.yml에서 twitter 주석 처리하기
2. _data/contact.yml에서 twitter 주석 처리하기

#twitter:
#  username: twitter_username # change to your twitter username

- type: github
  icon: "fab fa-github"

#- type: twitter
#  icon: "fa-brands fa-x-twitter"

- type: email
  icon: "fas fa-envelope"
  noblank: true # open link in current tab

twitter 있음 twitter 없음

사이드바 배경 색 바꾸기

모드 상관없이 배경 색을 지정해주면 light 모드와 dark 모드 때 사이드바 색이 같고,
모드마다 다르게 지정하면 모드를 바꿀 때마다 사이드바 분위기를 변경할 수 있어요.
저는 모드마다 다르게 해줬고, light 모드 먼저 바꾼 후 dark 모드 하는 게 편했어요!

모드 상관없이 배경 색 바꾸기

_sass/addon/commons.scss에서 #sidebar 부분 수정하기

• background 주석 처리하고, background: 원하는 색 형식으로 추가하기

/*background: var(--sidebar-bg);*/
 background: rgb(232, 212, 221);

모드마다 배경 색, 버튼 색 바꾸기

_sass/colors/typography-dark.scss, _sass/colors/typography-light.scss에서 /* Sidebar */ 부분 수정하기

사이드바 코드 설명

_sass/colors/typography-dark.scss, _sass/colors/typography-light.scss 두 파일 동일하게 적용하고
색만 원하는 컬러로 지정해주면 돼요.

외부 링크 새 탭으로 열기

게시글 안에 있는 링크를 눌렀을 때, 페이지가 넘어가면 불편한 경우가 있어요.
그래서 외부 링크를 누르면 새 탭으로 열리게 설정해줬어요.
(추가하는 위치는 상관 없어요.)

1. Gemfile에 gem ‘jekyll-target-blank’ 추가하기
2. _config.yml에 plugins: - jekyll-target-blank 추가하기

gem 'jekyll-target-blank

plugins:
   - jekyll-target-blank

favicon 커스텀하기

1. favicon 생성하기로 접속해서 favicon으로 만들 이미지를 선택, Create Favicon을 누르면 zip파일 다운 완료
2. 다운 받아진 zip 파일을 압축 해제한 후 favicon이라고 되어있는 파일만 복사
   • favicon.ico
   • favicon-16x16.png
   • favicon-32x32.png
   • favicon-96x96.png
3. assets/img/favicons에 붙여넣기 (기존 파일 덮어씌우기)

기본 favicon mung_log favicon

기존 favicons 파일에 있던 browserconfig.xml과 site.webmanifest 파일은 원본 그대로 둬야해요!
삭제나 덮어씌우기 하지마세요.

google 검색에 블로그 노출시키기

Google Search Console을 이용해서 블로그가 google에 검색하면 나올 수 있게 설정 해볼게요.
GitHub Blog_4 github blog와 google 연동하기