Written by Poogle
on March 15, 2022

Jekyll 블로그 되살리기! 🧐

저는 약 1 - 2년 전 Windows를 쓰던 노트북으로 jekyll 블로그를 만들었습니다. 그리고…

새 맥북으로 블로그 포스트를 작성하게 되었습니다! 야호
신나게 포스트를 작성하려는데… 블로그를 어떻게 관리했는지 기억이 안 나네요 🙃?!?!
블로그 Repository를 clone 받아서 바로 작업하면 되는 줄 알았는데…
여기저기서 빨간줄이! 😱

그래서 정리하는 Jekyll 블로그 사용 방법!

(참고: 해당 포스트는 Jekyll 블로그 생성기가 아니고 블로그를 잘 사용하는 방법에 대해 설명합니다!)

사실 이런 설정이 없어도 이미 제대로 만들어진 Jekyll 블로그라면 post를 제대로 GitHub에 푸시하는 것만으로도 충분할 수 있습니다.
그러나 로컬에서 작업하는 상황을 GitHub에 푸시하기 전 바로바로 확인하고 싶다면 직접 Jekyll을 깔아서 작업하는게 좋겠죠?

기본 설정 체크하기

✅ Ruby 설치

Jekyll은 Ruby로 만들어졌기 때문에 Ruby를 우선 설치해줘야 합니다. 여기서는 Ruby를 rbenv로 설치를 하겠습니다.
rbenv는 Ruby의 버전을 독립적으로 사용할 수 있도록 도와주는 패키지입니다. 여러 개의 Ruby 버전 설치가 가능하면서 간단하게 버전들을 오갈 수 있습니다.
Mac은 기본적으로 Ruby가 설치되어 있는데 OS에 의존적이기 때문에 Ruby 버전을 다양하게 사용해야 할 때는 rbenv로 설치하고 관리해주면 편리합니다.
rbenv 설치는 아래와 같습니다. brew와 rbenv가 설치되어 있다면 넘어가주세요!

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

hombrew를 설치해줍니다.

brew install rbenv

rbenv를 설치해줍니다.

rbenv install -l

설치할 수 있는 Ruby 버전을 확인할 수 있습니다.
Mac의 경우 설치하려는 버전이 없을 때 brew upgrade ruby-build 명령어를 실행해 리스트를 업데이트 할 수 있습니다.

rbenv install 3.0.3

Ruby 3.0.3버전을 설치해보겠습니다.

rbenv versions

설치 되어있는 Ruby 버전들을 확인할 수 있습니다.
system: Mac에 기본적으로 설치되어있는 Ruby
처음에 3.1.1 버전을 설치했다가 버전을 낮춰야 할 일이 있어서 3.0.3을 추가로 설치한 상태입니다.

rbenv global 3.0.3

원하는 버전의 Ruby를 사용하도록 설정해줍니다.

vim ~/.zshrc

[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

쉘 설정 파일인 .zshrc에 (혹은 .bashrc) rbenv PATH를 추가해줍니다.

source ~/.zshrc

설정을 적용합니다.

✅ Bundler 설치

Bundler는 필요한 gem과 gem 버전을 설치하는 도구입니다.

참고: https://rubygems.org/ : gem들을 찾을 수 있는 사이트

gem install bundler

Bundler를 설치해줍니다.

bundle install
bundle update

bundler 커맨드들을 활용해 gem을 설치하고 Gemfile에 등록되어 있는 gem들에 맞게 의존성을 해결해줄 수 있습니다.
bundle install 명령어로 gem을 설치합니다.
bundle update로 번들러와 gem들을 업데이트 해줍니다.
종종 dependency 문제로 오류를 만날 수 있는데 gemfile을 잘 확인하고 필요한 버전들에 맞게 설정하거나 혹은 업데이트가 필요할 수 있습니다.

✅ Jekyll 설치

gem install jekyll bundler

Ruby를 활용해 jekyll gem을 설치합니다.

저의 경우 jekyll 4.2.2버전을 사용중입니다.

실행

bundle exec jekyll serve

Gemfile에 따라 jekyll을 실행합니다.

이제 localhost:4000에서 실행된 블로그를 볼 수 있습니다.😆

변경이 생기고 새로고침하면 바로 반영됩니다.

--livereload: config.yml 파일 이외의 파일에서 갱신이 생기면 새로고침
--incremental: 갱신이 발생할 때 부분 빌드 실행
--drafts: 초안 포함해서 사이트 미리보기

아래는 제가 블로그를 로컬에서 실행하면서 찍혔던 버그들을 수정한 것들입니다.

Bugs 🐞

webrick

webrick 로드 오류
```
bundle add webrick
```
webrick을 추가합니다. 추가된 gem은 Gemfile에서 확인할 수 있습니다.

Liquid Warning

Jekyll에서는 Liquid 언어를 사용하는데 Liquid는 중괄호를 escape 문자로 사용합니다.
따라서 마크다운 문서에 해당 문자가 있을 때는 에러 메시지를 출력합니다.

Before

After

> 참고 - ArrayList의 add
```java
var orderItems = new ArrayList<OrderItem>() {{
    add(new OrderItem(UUID.randomUUID(), 100L, 1));
}};

Conflict

Jekyll은 제목(인덱스)을 경로로 사용되어서 겹치게 작성될 때 해당 오류가 발생합니다.
두 파일 중 하나의 이름을 수정해줍니다.

← → Top