Chirpy 테마 적용 및 오류 해결

Posted Oct 21, 2023 Updated Oct 22, 2023

By Ham Younjin 7 min read

Jekyll 테마 중 Chirpy 테마를 적용해볼거다.
Chirpy 테마를 선택한 이유는 깔끔한 UI가 마음에 들었고, 카테고리 분류도 단순해서 좋았다.
테마를 적용하면서 많은 오류들이 있었지만, 오류를 해결했을 때 희열감이,,👍
그럼 Chirpy 테마 적용 및 오류 해결 포스팅을 시작해보겠습니다.

1. Chirpy 테마 다운로드

jekyll 테마는 Jekyll Themes 사이트 에서 고를 수 있다.
나는 그 중에서 Chirpy 테마를 골랐다.

Demo 버튼을 눌러 테마가 적용된 사이트를 미리 볼 수 있다.
Download 버튼을 눌러 Chirpy 테마의 zip 파일을 다운받아 줍니다.

다운받은 zip 파일을 압출을 풀면 jekyll-theme-chirpy-master 이라는 폴더가 생긴다.
이 폴더 안의 파일 및 폴더들을 기존 자신의 로컬 repository 폴더에 모두 옮겨준다.
같은 파일이 존재한다면 모두 덮어쓰기 하여 모두 옮겨주면 된다.

2. 폴더 정리 및 업로드

불필요한 파일들을 삭제해주어 초기화를 진행합니다.

Gemfile.Lock 파일 삭제
_posts 폴더의 파일 삭제 (기존의 포스팅 삭제)
.github/workflows/pages-deploy.yml.hook 파일 제외 나머지 파일 삭제
- cd.yml
- ci.yml
- codeql.yml
- commitlint.yml
- stale.yml
- style-lint.yml
pages-deploy.yml.hook -> pages-deploy.yml 파일명 변경

3. Jekyll local server 실행

bundle install
bundle exec jekyll serve

http://127.0.0.1:4000/에서 적용된 테마를 확인할 수 있다.

4. Config.yml 수정 (설정 변경)

이제 블로그의 sidebar를 나의 프로필로 설정을 변경해주어야 한다.
그러기 위해서는 _config.yml 파일을 수정해주어야 한다.

처음에는 위 사진처럼 기본값으로 설정되어 있을 것이다. 다음 설정값을 변경해주자.

lang	ko
timezone	Asia/Seoul
title	블로그 타이틀
tagline	title 아래 서브 타이틀
description	블로그 소개
url	`'http://username.github.io'` 본인 깃허브 주소
github_username	깃허브 아이디
twitter_username	트위터 아이디
social_name	하단 네임 (= 기본작성자 변경)
social_email	본인 이메일 주소
social_links	본인 SNS 링크
google_analytics	구글 애널리틱스 연결
avatar	프로필 사진
disqus_shortname	닉네임
paginate	한 목록에 표시할 글 갯수

5. Git Push

git 명령어를 통해 Github Remote 저장공간에 테마를 적용한 로컬 레파지토리를 push를 해준다.

  
git add .
git commit -m "커밋 메시지"
git push -u origin main

하지만 오류 이슈 발생..

6. 오류 해결 과정

오류 1

첫 번째로 만난 오류는 "Setup Ruby" 에서 발생한 오류였다.

먼저 내가 해결한 방법은 "ruby-version: 3.1"로 변경해준 것이었다.

오류메시지를 읽어보니 ruby version에 문제가 있는 것 같았다.
그래서 ruby version을 설정할 수 있는 파일을 찾아서 version을 수정해주었다.

📁 파일 위치 : .github/workflows/pages-deploy.yml

pages-deploy.yml 파일에서 내 기준 45번 줄에서 ruby version 을 변경할 수 있었다.
원래 버전은 3이었지만 여러 버전을 적용해 본 결과 3.1로 변경해주었을 때 오류가 발생하지 않았다.
아직도 이유는 잘 모르겠다,,

오류 2

두 번째로 만난 오류는 "Test site" 에서 발생한 오류였다.

나는 아래 "npm build"를 통해 오류를 해결했다.

처음에는 엄청난 길이의 오류로 당황했지만, 메시지 보니 /assets/js/dist/ 경로에 해당 min.js 파일이 존재하지 않아서 발생한 오류였다.
그래서 나는 먼저 /assets/js/dist/ 경로에 js 파일을 넣어주었지만 오류는 해결되지 않았다.
그 다음에는 js 파일들을 참조하는 파일에 경로를 js 파일들이 있는 _javascript 폴더로 변경해주었다.
이 방법 역시 오류를 해결하지 못했다,,,

(해결방법)

이유는 node.js 모듈을 설치하고 npm initial과 build를 하지 않으면 발생하는 오류로 assets/js/dist/*.min.js Not Found 에러 발생과 함께 블로그가 정상적으로 동작하지 않는다는 것이다.
이 문제를 해결하기 위해서는 먼저 "node.js" 를 설치하고, 같이 설치된 "npm build" 를 해주면 된다. 나는 nodejs 가 깔려있었기 때문에 바로 아래 명령을 실행해주었다.

npm install && npm run build

하지만 바로 위 명령을 실행하면, ‘NODE_ENV’은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 문구와 함께 build가 되지 않습니다.

npm install -g win-node-env
npm run build

따라서 위처럼 npm install -g win-node-env 명령어를 먼저 실행하고 build 해줍니다.

그러면 위 같이 /assets/js/dist/ 경로에 *.min.js 파일이 생성되는 것을 볼 수 있다.

드디어 빌드에 성공했다!!
자신의 깃 블로그 주소에서 Chirpy 테마가 적용된 나의 블로그를 확인할 수 있을 것이다.

7. 마치며

오류를 해결하는 과정이 길었지만, 오류메시지와 구글링을 통해 충분히 해결할 수 있었다.
이제 적용된 테마를 커스터마이징 해보고 포스팅해볼 예정이다.

Git 🌱, Blog

GitBlog

This post is licensed under CC BY 4.0 by the author.