Windows에서 깃헙 블로그 만들기(Chirpy Theme) - (2) Chirpy 테마 적용
이전 포스트에서는 Jekyll 환경을 구축하였다. 이제 페이지를 만들어 블로그를 만들면 되는데, 나는 웹 개발자가 아니다보니 이를 제작하는 것은 불가능에 가까웠다. 다행히 여러 능력자분들이 테마를 제작하고 배포하여, 나같은 사람도 쉽게 블로그를 꾸밀 수 있게 되었다. 이번에는 블로그에 테마를 적용해보자!
1. 테마 선택하기
- Jekyll 테마 사이트
나는 JekyllThemes.org 사이트에서 테마들을 찾아보았고, 다음 3가지를 만족하는 테마를 원했다.
1. 왼쪽 사이드바가 존재
2. 심플한 디자인
3. 가이드라인 포함
사람들에게 가장 추천을 많이 받은 minimal-mistatkes를 적용할까 고민하던 중, Chirpy테마를 발견하였다. 내가 원하는 것들이 모두 있었고 특히 깔끔한 UI가 마음에 들어, 해당 테마를 사용하기로 결정했다.
2. Chirpy 테마 다운로드
Chirpy를 적용하기 위한 방법으로 다음 3가지 방법이 있다.
- Chirpy Starter 사용
- Github Fork
- 로컬 Zip 다운로드
개발자 가이드에 따르면,Chirpy Starter를 사용하면 업그레이드에 쉽다고 한다. Fork는 커스텀은 쉬우나 jekyll에 대한 지식이 없으면 업그레이드가 어렵다고 한다. 나는 그냥 마음 편히 리포지토리를 직접 다운로드 받는 3번 방식으로 진행했다.
Chirpy 파일 다운로드
상단 Github 페이지에 접속하여 CODE 메뉴에서 Download Zip을 클릭하여 압축파일을 다운로드한다.
Chirpy Zip 다운로드
다운로드 받은 파일을 압축풀면, jekyll-theme-chirpy-master 폴더가 생성된다. 해당 폴더를 들어가면, 많은 폴더 및 파일들이 있을 것이다. 폴더와 파일을 모두 선택하여, 이전에 만든 블로그 리포지토리(나의 경우 C:\GitBlog\mateo0604.github.io)에 붙여넣는다. 같은 파일이 있다고 뜨면, 모두 덮어쓰기를 적용한다. 
Chirpy 파일 붙여넣기
3. Chirpy 적용하기
chirpy 초기화
기존 파일 중 일부는 Chirpy 개발자의 환경에서 구성된 것이기에, 붙여넣기 한 Chirpy 폴더들을 초기화해야한다. 그러나 Linux나 Mac에서는 bash tools/init.sh 명령어를 통해 초기화를 수행할 수 있다. 하지만 Windows 환경에서는 Bash를 사용할 수 없어 수동으로 초기화를 해야한다. 물론 WSL 개발 환경을 설치하면 bash shell을 사용할 수 있지만, 지금은 수동으로 초기화를 하겠다.
로컬 리포지토리에서 해야할 것은 다음과 같다.
- .travis.tml 파일 삭제
- Gemfile.lock 파일 삭제
- docs 디렉토리 삭제
- _posts 디렉토리 내 파일들 삭제
.github디렉토리 내workflows폴더를 제외한 나머지 삭제.github\workflows디렉토리 내 pages-deploy.yml.hook 을 제외한 나머지 삭제- pages-deploy.yml.hook 을 pages-deploy.yml로 확장자 변경
해당 파일이 없다면 과정을 생략해도 된다. 나의 경우, .travis.tml 파일이 존재하지 않아 삭제 과정을 생략했다.
Chirpy 테마가 적용된 페이지 확인
초기화를 진행하였다면, 터미널 창을 열어 블로그 리포지토리의 root로 이동한다.(C:\GitBlog\mateo0604.github.io) 그리고 하단의 커맨드를 실행하여 Gemfile에 명시된 종속성들을 설치한다.
1
bundle
bundle 설치
이제 로컬에서 테마가 정상적으로 적용이 되었는지 확인하자. 아래 커맨드를 실행한다. 앞으로 로컬에서는 해당 명령어를 통해 서버를 실행하므로 외워두면 좋다.
- s 는 serve의 축약어이다.
- –livereload는 신규 혹은 수정된 파일이 있는 경우 자동으로 새로고침을 한다.
1
bundle exec jekyll s --livereload
아래 화면과 같이 로컬에서 Chirpy 테마를 입힌 페이지가 나타난다. 
Chirpy 페이지
Chirpy 테마 적용이 끝났다. 한번 사이드바 하단에 있는 제일 왼쪽 버튼을 눌러보자. 이것은 웹 페이지의 Dark Mode 온오프 기능인데, 클릭해도 반응이 없을것이다.
한번 cmd창을 보자. 아마 하단 이미지처럼 에러가 출력된 것을 볼 수 있다. (에러 구문이 안뜨거나 늦게 뜰 수 있다.) 
cmd 에러
이 에러는 해당 js를 못찾아서 생기는 에러로, node.js의 npm(Node Package Manager) 명령어를 통해 Chirpy에 필요한 js 패키지를 install 및 build를 하지 않아 생기는 것이다. 해당 에러를 해결해 보자!
4. JS 패키지 설치
패키지 설치
다시 cmd창을 보자. 만약 jekyll이 실행되어 있다면, [Ctrl + C]를 입력하면 종료 구문이 뜬다. jekyll을 종료한 후, 해당 명령어들을 순서대로 입력한다.
1
2
npm install
npm run build
npm run build 수행 시 아래 화면과 같이 에러가 뜰 것이다. 
NODE_ENV 에러
win-node-env 설치 및 빌드
이는 NODE_ENV 환경변수와 관련된 에러이다. 이를 해결하기 위해 win-node-env 패키지를 설치한다. 해당 패키지는 Windows환경에서 Linux와 유사한 환경을 구현하기 위한 패키지이다.
이후 다시 npm run build를 수행하면 정상적으로 build가 수행될 것이다.
1
2
npm install -g win-node-env
npm run build
.gitignore 파일 수정
블로그 디렉토리 안에 있는 .gitignore 파일을 메모장이나 에디터로 연 다음, 마지막 줄에 있는 assets/js/dist 부분을 주석으로 처리한다.
gitignore 파일 수정
다시 bundle exec jekyll s --livereload 명령어를 입력하여 서버를 실행하면, js 에러가 해결이 된 것을 볼 수 있다.
5. 포스트 등록하기
글이 제대로 올라가는지 확인해보자.
_posts 디렉토리에 2024-01-10-Test.md 파일을 생성한다. 그리고 해당 스크립트를 복사하여 붙여넣기 후 저장한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title : First Post
date : 2024-01-10 00:00:00 +09:00
categories : [Post]
tags : [테스트]
pin : True
---
# Test용 포스트 올리기
## 1
### 1-1
### 1-2
## 2
서버를 실행할 때 --livereload로 설정하였기에, 바로 화면이 수정되어 보여질 것이다. 
Post 등록 화면
작성한 글을 클릭하여 들어가면 작성자가 your_full_name으로 나타날것이다. 작성자를 클릭해보자. 그럼 트위터로 접속된다.
지금까지 로컬에서 jekyll 테마를 적용하고, 발생한 에러들을 해결하였다. 다음 포스트에서는 Giuhub에 배포하는 과정과 작성자를 클릭하였을때 깃헙으로 이동되는 등 내가 수정했던 블로그 커스터마이징 내용을 다룰 예정이다.