Jekyll 테마를 사용한 Github 블로그 만들기 (window)

 
Ruby와 Jekyll을 이용하여 GitHub Pages에서 블로그를 설정하는 방법을 단계별로 살펴본다.
 

Ruby 설치

먼저, Ruby를 설치해야 한다. Ruby의 공식 설치 프로그램인 RubyInstaller를 방문하여 권장하는 최신 버전의 Ruby와 Devkit을 다운로드하고 설치한다.
https://rubyinstaller.org/downloads/

 
 
설치가 완료되면 커맨드 창을 열고 다음 명령어를 입력하여 Ruby가 제대로 설치되었는지 확인한다.
버전 정보가 출력된다면 설치가 성공적으로 완료된 것이다.

ruby -v
ruby 3.3.4 (2024-07-09 revision be1089c8ec) [x64-mingw-ucrt]

 
 

Jekyll 설치

Ruby 설치가 완료되면, Jekyll과 Bundler를 설치할 차례이다.
커맨드 창에서 아래 명령어를 입력한다.

 gem install jekyll bundler

 
 
설치가 완료되면 각 패키지의 버전 정보를 확인하여 정상적으로 설치되었는지 확인한다.

jekyll -v
jekyll 4.3.3

bundler -v
Bundler version 2.5.17

 
 

Git Pages 생성

다음으로, 블로그용 GitHub Repository를 생성한다.
GitHub에 로그인한 후, 새로운 Repository를 생성하며 이름을 <username>.github.io 형식으로 설정한다.
 
레포지토리가 생성되면 해당 주소를 브라우저에 입력하여 GitHub Pages에 접근할 수 있다.
 
이후 로컬 디렉토리에 해당 레포지토리를 clone하여 작업할 준비를 한다.
다음 명령어를 사용하여 레포지토리를 클론한다.

git clone https://github.com/<username>/<username>.github.io.git

 
 

Jekyll 초기화

Jekyll로 사이트를 생성하기 위해 아래의 명령어를 입력하여 프로젝트를 초기화한다.

jekyll new ./
bundle install

 
 
이제 생성된 사이트를 로컬 환경에서 실행해 볼 수 있다. 아래 명령어를 입력한다.

bundle exec jekyll serve

 
 
주소창에 http://127.0.0.1:4000/를 입력하면 기본 테마로 생성된 블로그를 확인할 수 있다.

 
 

오류처리

만약 jekyll new ./ 커맨드 입력 시 아래와 같은 에러가 발생한다면

An error occurred while installing wdm (0.1.1), and Bundler cannot continue.

 

 
 
Jekyll 디렉토리의 Gemfile 파일에서 아래 부분을 주석 처리한다. 이 부분은 필수적인 요소가 아니기 때문에 작동에 문제가 생기지 않는다.

# gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]

 
 

Jekyll 테마 적용

Jekyll의 다양한 테마를 적용하기 위해 Jekyll Themes 웹사이트를 방문한다.
원하는 테마를 선택한 후 Download 버튼을 클릭하여 리소스를 다운로드한다.
http://jekyllthemes.org/
 
다운로드한 압축 파일을 풀고, 로컬 디렉토리에 있는 기본 Jekyll 프로젝트의 파일과 덮어쓴다.
테마를 적용하기 위해 필요한 파일이 포함되어 있어야 한다.
 
마지막으로, 로컬에서 작업한 내용을 GitHub Repository에 업로드한다.
커맨드 창에서 다음 명령어를 입력하여 변경 사항을 커밋하고 푸시한다.

git add .
git commit -m "Apply Jekyll theme"
git push origin main

 
 

오류처리

테마 적용 후 bundle install 을 했는데도 아래와 같은 에러메시지가 나타나는 경우

 
 
이 경우, 커맨드 창에서 다음 명령어를 입력하여 webrick을 추가해준다.
Ruby 3.0.0 버전 이상부터는 gem에서 webrick이 빠져 있어 수동으로 추가해야 한다.

bundle add webrick

 
 

오류처리

_config.yml 파일에서 시간대 설정 변경 후 로컬 실행이 안 되는 경우

 Dependency Error: Yikes! It looks like you don't have tzinfo or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. If you've run Jekyll with `bundle exec`, ensure that you have included the tzinfo gem in your Gemfile as well. The full error message from Ruby is: 'cannot load such file -- tzinfo' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!      
jekyll 4.3.3 | Error:  tzinfo

 
 
커맨드 창에서 다음 명령어를 입력하여 tzinfo-data를 설치한다.

gem install tzinfo-data

 
 
또한, Gemfile 파일에 tzinfo를 추가한다.

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo'
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]

 
 
다시 로컬 실행을 해보면 잘 작동하는 것을 확인할 수 있다.

bundle exec jekyll serve

 
 

오류처리

로컬 실행 시 .min.js 파일이 없다는 에러 메시지가 뜨는 경우

 
아래 커맨드로 build 해준다.

npm i && npm run build

 
 
원래는 sh tools/init.sh 명령어로 초기화를 시켜주면 간단한 일인데, Windows에서는 sh 명령어를 사용할 수 없기 때문에 init.sh 스크립트에 있는 내용을 수동으로 작업해 주어야 한다. 빌드 명령어를 입력하여 dist 디렉토리가 생성되면 스크립트도 잘 작동하고 오류도 사라진다.
 
 

마무리

이제 웹 브라우저에서 <username>.github.io를 입력하면 테마를 적용한 블로그를 확인할 수 있다.

 

참조

https://talk.jekyllrb.com/t/newbie-problems-with-wdm-errors/9233/4
 
https://thegeekcat.github.io/blogging/tzinfoError/