GitHub 블로그 꾸미기 - Chirpy 테마에 Custom CSS 적용하기

Chirpy 테마로 블로그를 만들다 보면 기본 스타일을 수정하고 싶을 때가 있습니다. 저는 #sidebar의 배경색을 바꾸고 싶어서 custom.css를 적용하는 과정을 겪었고, 시행착오가 많았던 내용을 아래에 남깁니다.

1. 목표

• 사이드바 색상 변경
• Chirpy 테마에 custom CSS 적용

2. 문제 상황

브라우저 개발자 도구를 열어보니 사이드바는 #sidebar ID를 가지고 있었고, 해당 요소의 background-color만 수정하면 됐습니다.

그래서 assets/css/custom.css 파일을 만들고, 다음과 같은 스타일을 추가했습니다:

#sidebar {
  background: #eeedff;
}

하지만 문제는, 이 custom.css를 Chirpy 테마가 자동으로 불러오지 않는다는 점이었습니다.

3. 원인 분석

Chirpy 테마는 _config.yml 파일에서 원격 테마로 설정되어 있습니다:

theme: jekyll-theme-chirpy

이 말은, 로컬 프로젝트 폴더에는 _includes 폴더나 head.html 파일이 없다는 뜻입니다. 모든 레이아웃과 include 파일들은 Chirpy GitHub 저장소에서 불러옵니다.

즉, head.html을 수정하려면 직접 복사해서 로컬에 두고 수정해야 합니다.

4. 해결 방법

4.1. head.html 복사

• Chirpy의 head.html 원본 내용을 복사합니다.
• 로컬 프로젝트의 _includes/head.html 파일로 붙여넣습니다. (폴더가 없다면 _includes 폴더부터 생성)

4.2. custom.css 연결

복사한 head.html에서 아래처럼 CSS를 불러오는 부분을 수정합니다:

<!-- Theme style -->
<link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="/assets/css/custom.css">

4.3. Jekyll 서버 재실행

bundle exec jekyll serve

브라우저에서 확인할 때 Shift + 새로고침을 눌러 캐시를 무시해야 변경사항이 잘 반영됩니다.

5. 결과