Windows에서 깃헙 블로그 만들기(Chirpy Theme) - (4) Chirpy 커스터마이징

게시 2024/01/14 업데이트 2024/01/16

By KangJJ 22 분읽는 시간

깃헙 블로그의 커스터마이징 요소는 정말 방대하다. 폰트·이미지 등등 많은 부분들을 자기 입맛에 맞게 설정할 수 있는데, 해당 글에서는 내가 설정했던 부분만을 다루고자 한다. 현재 내용 이외의 다른부분들은 추후 자유롭게 바꾸면 될 것 같다.

블로그 기본 설정

config.yml 수정

config.yml은 블로그의 기본적인 설정들을 담은 파일이다. 해당 파일을 수정해보자.

로컬 서버 실행 후(bundle exec jekyll s --livereload), config.yml을 수정했다면, 서버를 닫고 재실행해야 반영된다.

하단의 설정을 본인에 맞게 설정한다.

옵션	설명	내용
lang	언어 설정	영어로 하고 싶으면 en, 한국어로 설정하려면 Ko-KR로 설정한다.
timezone	시간 설정	Asia/Seoul로 설정한다.
title	탭 및 페이지 제목	블로그 제목으로, 적고 싶은걸 적으면 된다.
tagline	사이드 바 하단 소제목	역시 적고싶은걸 적으면 된다.
description	SEO 키워드 내용	SEO(검색 엔진 최적화)를 설정할 키워드라고 한다. 내 블로그를 어떤 키워드를 통해 검색에 노출될지 정하는 것 같다.
github	깃헙 아이디	자신의 Github 아이디를 적으면 된다.
twitter	트위터 아이디	자신의 트위터 아이디를 적으면 된다.
social	개인 정보	내용에 맞게 자신의 닉네임,이메일 등을 적으면 된다.
theme_mode	테마 색상	기본적으로 다크모드 On/Off로 설정된다. 한가지만 설정할 수 있다.
img_cdn	이미지 탐색 root경로	해당 경로를 root로 삼아 하위 경로 내 이미지 파일들을 탐색한다. 일단은 수정없이 진행하자.
avatar	프로필 사진 경로	프로필 사진을 지정한다. 일단은 수정없이 진행하자.
toc	문단 설정	마크다운으로 h1,h2,h3의 내용을 오른쪽 하단에 순서에 맞게 보여준다. 그냥 True로 하면 된다.
paginate	게시글 표시 갯수	홈 화면의 보여줄 게시글의 갯수를 설정한다.

수정을 완료했다면, 파일을 저장하고 로컬 서버를 실행하여 페이지를 확인한다. 블로그 설정 변경 확인

블로그 이미지 추가/변경

프로필 이미지 변경

프로필을 수정해보자. 개발자 가이드에 보면 로컬 혹은 네트워크를 통해 경로를 지정할 수 있다. 지금은 이미지를 프로젝트에 저장하여 보여주는 로컬 방식으로 하겠다.

먼저 프로젝트 폴더 내 /assets/img/에 profile 폴더와 background폴더를 만든다. profile 폴더에는 프로필 이미지를, background 폴더에는 이후 설정할 사이드 배경화면을 넣기 위해 미리 만드는 것이다.

폴더명은 임의로 정한 것이므로, 원하는 폴더명으로 만들면 된다.

폴더 생성

profile 폴더에 원하는 이미지를 다운로드 받아 저장한다. 예전에 ‘핀과 제이크의 어드벤처 타임’ 애니메이션을 재밌게 봤었기에 제이크로 정했다 😃

config.yml파일을 열어 img_cdn을 ”“로 바꾸고, avatar에 profile 이미지가 위치한 경로를 넣는다. 이때, 경로는 현재 프로젝트 경로를 기준으로 작성하면 된다.

아까 생성한 프로필 폴더의 경로는 /assets/img/profile/사진파일 이다

프로필 설정 변경

로컬 서버를 실행해서 확인하면 다음과 같이 프로필이 변경된 것을 확인 할 수 있다. 프로필 변경

Favicon 변경

Favicon이란 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지이다. 아래 사진과 같이, 탭 화면에 보이는 이미지들이 모두 Favicon이다. Favicon

Favicon Generator 바로가기

Favicon을 만들 이미지를 정한 후, 상단 페이지에 접속한다. 이후 Select your Favicon image 을 클릭하여 이미지를 선택한다. 나는 프로필 이미지를 그대로 Favicon으로 만들었다. Favicon 이미지 선택

약간의 변환 과정이 진행된 후, [Continue with this picture] 을 클릭한다. 이후 페이지 최하단에 있는 [Generate your Favicons and HTML code] 버튼을 클릭한다.

Favicon 이미지 적용

[Favicon package] 를 클릭하면 압축파일이 다운로드된다. Favicon 다운로드

다운로드 받은 파일을 압축푼 후, 프로젝트 폴더/assets/img/favicons 경로에 기존 파일들을 모두 삭제하고 넣어주면 된다. (처음 Favicon을 넣을 시, 아래 사진처럼 아이콘 이미지가 반영되지 않아도 신경 쓸 필요 없다) Favicon 저장

페이지를 확인해보면 다음과 같이 Favicon이 변경되었다. Favicon 확인

사이드바 커스터마이징

사이드바 이미지 삽입

사이드바에 적용할 이미지파일을, 이전에 만든 프로젝트 폴더/assets/img/background 폴더에 위치시킨다. 이후 _sass/addon/commons.css 파일을 열어, #sidebar 를 검색하여 sidebar의 스타일을 정의한 코드로 이동한다. sidebar css

sidebar 속성인 background : var(--sidebar-bg); 기존 코드를 지운후, 아래의 코드를 복사하여 붙여넣는다. 하단 코드 url() 경로는 이전에 저장한 배경이미지 경로를 넣으면 된다.

  
background:url('/assets/img/background/background.jpg');
background-size:100% 100%;
background-position: center;

사이드바에 이미지가 성공적으로 적용되었다. sidebar 이미지 적용

사이드바 폰트 색깔 변경

내가 선택한 이미지를 적용했더니, 글씨색깔이 눈에 띄지 않았다. 그래서 사이드바 글씨색을 변경하고자 한다. _sass/addon/commons.css 파일을 열어, 이미지를 넣기 위해 보았던 #sidebar 코드로 이동한다. 이후 조금 내려보면 site-title 과 site-subtitle 속성이 있을 것이다. 해당 코드 내 color를 변경해주면 된다. 나는 하얀색으로 설정하였다.

다른 색상을 원한다면, 색상 코드표에 접속하여 색상 코드를 대신 넣어주면 된다.

sidebar 폰트 색상 변경

조금 더 내려보면 ul 속성이 나온다. 이 속성은 사이드바 메뉴들의 스타일 속성으로, a.nav-link 속성안에 color 속성을 추가하였다.

sidebar 메뉴 폰트 색상 변경

이미지로 인해 잘 안보였던 글씨들이 잘보이게 되었다! sidebar 폰트 색상 확인

사이드바 메뉴 삭제

사이드바 메뉴를 삭제하려면, _tabs 폴더에 위치한 마크다운 파일을 삭제하면 된다. 나는 사이드바 메뉴 중 정보라는 탭은 개인적으로 필요없기에, about.md 파일을 삭제하였다.

반대로 사이드바 메뉴를 추가하고자 한다면, 마크다운 파일을 생성하면 된다.

sidebar 정보 탭 삭제

사이드바 하단 버튼 수정

사이드바 하단을 보면, 다크모드, Github, X(트위터), 이메일, RSS 버튼이 있다. 필요없는 버튼을 삭제해보자.

_data/contact.yml를 열어 필요없는 옵션을 주석처리한다. 나는 트위터를 안하고 rss버튼은 필요없었기에, twitter와 rss 옵션을 주석처리 하였다.

contact.yml 수정

주석처리 한 후, 페이지를 확인해보니 버튼은 사라졌지만 버튼이 한쪽으로 쏠렸다. 버튼 크기를 키우고 가운데로 위치시켜보자! 블로그 페이지

사이드바 버튼 스타일 변경

_sass/addon/commons.scss 파일에서 .sidebar-bottom를 검색하여 사이드바 하단 스타일 속성 코드로 이동한다. 그리고 원하는 스타일에 맞게 수정하면 된다. 나는 아래와 같이 수정하였다. commons.scss 수정

속성	내용
padding-left	버튼 그룹내 왼쪽 경계선 사이의 여백을 의미한다
padding-right	버튼 그룹내 오른쪽 경계선 사이의 여백을 의미한다
margin-bottom	버튼 그룹과 사이드바 하단 사이의 여백을 의미한다
justify-content	버튼 그룹내 버튼 요소들을 좌우(가로축)에 대한 정렬 방법을 설정하는 속성이다
$btn-size	버튼 크기를 설정하는 속성이다

수정전보다 버튼이 예쁘게 정렬된 것을 확인할 수 있다. 사이드바 버튼 수정

페이지 하단을 보면 다음과 같이 문구가 작성되어 있다. Powered by Jekyll with Chirpy theme 해당 문구를 삭제해보자. Footer

_includes/footer.html 파일을 열어, 해당 문구가 포함된 부분을 주석처리 해준다. footer.html 수정

이제 해당 문구가 사라진 것을 볼 수 있다. footer 수정

작성자 링크 변경

게시글 내 작성자와 페이지 하단에는 이름에 링크가 걸려있다. 이전 글에서 마크다운을 생성해보았고, 작성자를 클릭하였을 때 트위터 링크로 접속됐었다. 트위터가 아닌 깃헙으로 접속되도록 변경해보자. 작성자 링크

config.yml 파일을 열어 social 속성 내 link 를 확인해보면, 트위터가 첫번째로 되어있고, 깃헙이 두번째로 작성되있는 것을 확인할 수 있다. 이를 깃헙이 먼저 오도록 변경하거나 트위터 링크 라인을 삭제하면 된다. 작성자 링크 수정

블로그 폰트 변경

블로그 내 폰트를 수정해보자! 먼저 구글 폰트에 접속하여 원하는 폰트를 선택한다. 나는 Gowun Dodum을 선택하였다.
폰트를 선택하면 아래와 같이 선택할 수 있는 문구가 있는데, 이것을 클릭하면 우측에 창이 뜰 것이다.

만약 선택했는데 오른쪽에 창이 안뜬다면, 우측 상단의 장바구니 버튼을 클릭하면 된다

구글 폰트

우측 메뉴에서 @import 버튼을 클릭하면 <style> 코드와 CSS코드가 나타난다. 구글 폰트 코드

<style> 태그 안의 @import 코드를 복사한다. 이후 _sass/addon/variables.scss 파일을 열어 최상단에 해당 코드를 붙여넣기 한다. (<style> 태그는 넣지 않는다.)
그리고 CSS코드의 font-famly: 값을 최하단에 있는 $font-family-base와 $font-family-heading 에 각각 붙여넣는다.

폰트 속성 변경

이후 페이지를 확인하면 폰트가 변경된 것을 확인할 수 있다. 폰트 적용

이제 모든 변경사항을 Github에 올리면 된다.

  
git add .
git commit -m "블로그 설정 변경"
git push

자동 업데이트 설정

블로그 설정을 변경하거나, 포스트를 작성하게 되면 Github에 추가 및 변경사항이 적용된다. 그런데 이전에 한번이라도 접속했던 사용자라면 아래 사진과 같이 바로 변경되지가 않고, 업데이트를 눌러줘야하는 번거로움이 있다. 아마 최초 접속 시, 페이지의 캐시가 저장되어 마지막으로 방문한 페이지를 로드하기 때문인것 같다.
일일이 업데이트를 클릭하지 않고, 로컬 서버의 --livereload와 같은 기능을 추가하여 해결할 수 있다. 업데이트 문구

assets/js/pwa/sw.js 파일을 열어 기존 내용들을 모두 지우고, 해당 코드를 복사하여 붙여넣는다. 그리고 git에 반영하면 이후 블로그 변경사항 반영시 자동으로 업데이트 되어 보여질 것이다.

  
---
layout: compress
permalink: '/sw.js'
# PWA service worker
---

self.addEventListener("install", (event) => {
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  self.registration
    .unregister()
    .then(() => self.clients.matchAll())
    .then((clients) => {
      clients.forEach((client) => {
        if (client.url && "navigate" in client) {
          client.navigate(client.url);
        }
      });
    });
});

블로그 댓글 기능 삽입

포스팅된 게시글에 댓글 기능을 추가해보자! 여기서는 Utterances 앱을 사용하였다.

먼저 utterances.app으로 접속하여 install을 클릭한다. 이후 Only select repositories를 선택하여 자신의 블로그 리포지토리를 선택하고 install을 클릭하여 설치한다. Utterances.app

그럼 utterances 페이지로 이동되는데, 조금 내리면 Repository를 적는 칸이 나온다. 해당 칸에 [깃헙 아이디]/[블로그 리포지토리명]을 입력하면 된다.

mateo0604/mateo0604.github.io (예시)

레포지토리 설정

이제 config.yml 을 열어 comments 속성으로 이동한 후, 아래 사진과 같이 값을 변경한다. repo는 이전에 작성한 [깃헙 아이디]/[블로그 리포지토리명]을 입력하면 된다. config.yml 댓글 설정

블로그 페이지를 확인해보면 댓글 UI가 적용된 것을 확인할 수 있다. 댓글들은 Github 블로그 리포지토리 내 Issue 탭에서 확인 가능하다. 블로그 댓글 적용

Google Analytics 적용

구글 애널리틱스를 연동하여, 블로그에 접속한 사용자 수 등을 조회할 수 있다. 먼저 구글 애널리틱스 사이트에 접속한 후, 구글 로그인을 하고 계정 생성을 클릭한다.

기존에 애널리틱스를 이용했던 사용자라면, 사이트 왼쪽 하단에 톱니바퀴 아이콘을 선택 후, 상단에 만들기를 클릭하고 계정을 선택하면 된다.

계정 이름을 작성하고 다음을 클릭한다. Google Analytics 계정 생성

속성 이름에는 자신의 블로그 주소를 입력하고, 시간대와 통화는 대한민국에 맞게 설정한다. 이후 다음을 클릭하여 진행한다. Google Analytics 속성

비즈니스 세부정보 옵션은 자유롭게 설정하면 된다. Google Analytics 비즈니스 설정

비즈니스 목표도 목적에 맞게 자유롭게 설정하면 된다. Google Analytics 목표 설정

플랫폼은 웹을 선택한다. 그럼 URL과 스트림이름을 설정하는 페이지가 나오는데, URL은 자신의 블로그 주소를, 스트림은 마음대로 설정하면 된다. Google Analytics 플랫폼 선택

Google Analytics 데이터 스트림

여기까지 진행하였다면, 아래 화면처럼 웹 스트립 세부정보 페이지가 나타날 것이다. 여기서 측정ID를 복사한다. Google Analytics 측정ID

config.yml 파일을 열어 google_analytics 속성에 해당 측정ID값을 넣으면 된다. config.yml 측정ID 설정

Github에 반영한 후 구글 애널리틱스 사이트에서, 접속 사용자 등의 통계를 확인할 수 있다. Google Analytics 확인

이렇게 블로그 커스터마이징까지 마쳤다! 이후 수정하거나 추가하는 기능들이 있을때마다 업데이트를 할 예정이다.
그리고 글 작성에 필요한 마크다운 문법 및 Chirpy 기능과 포스팅 방법 등을 시간이 날때마다, Chirpy 개발 가이드를 참고하여 포스팅하려고 한다.

Blog, Github Pages

블로그 Chirpy