Github Page 의 로컬 환경 구축 (with Jekyll)

2019-12-02 15:31

맥에서 Github Page 의 로컬 환경 구축한 내용을 정리해 보았습니다.

Testing your GitHub Pages site locally with Jekyll

1. 사전준비

1-1. Jekyll를 인스톨

필수 항목인 Ruby, RubyGems, GCC, Make가 설치되어 있는 것을 확인합니다.

$ ruby -v
$ gem -v
$ gcc -v
$ g++ -v
$ make -v

맥이면 기본적으로 깔려 있습니다만, 깔려있지 않은 경우에는 직접 설치합니다.

1-2. bundler 인스톨

gem install 커맨드로 bundler 를 설치

$ gem install bundler

정상적으로 설치 된 것을 확인

정상적으로 설치 되었을 경우에는 아래와 같이 표시 됩니다.

$ gem install bundler
Fetching: bundler-2.0.2.gem (100%)
Successfully installed bundler-2.0.2
Parsing documentation for bundler-2.0.2
Installing ri documentation for bundler-2.0.2
Done installing documentation for bundler after 5 seconds
1 gem installed

bundle 의 버젼 확인

$ bundle -v
Bundler version 2.0.2

오류 발생시

bundler 인스톨시에 아래 메세지가 표시되면서 permission 에러가 발생하는 경우가 있습니다.

You don’t have write permissions

에러 원인은 ruby 가 시스템 관할하에 있어서 권한이 부족해서 gem install 이 동작하지 못했기 때문입니다.

$ which gem  # which ruby
/usr/bin/gem

(/usr/bin = 시스템 경로)

권한 부족으로 gem install 에서 에러가 발생할 경우의 해결 방법

rbenv로 ruby를 관리하도록 하기 위한 방법입니다.

1) rbenv 를 인스톨 합니다.

$ brew update
$ brew install rbenv ruby-build

2) rbenv 관리하에서 ruby를 인스톨 합니다.

rbenv install -l
rbenv install 2.5.3

대충 최신 언저리의 버젼을 인스톨 합니다.

그리고 rbenv 내의 ruby 버젼을 확인합니다.

$ rbenv versions
  system
* 2.5.3 (set by /Users/admin/.rbenv/version)

3) 패스 설정

rbenv 에서 경로를 인식할 수 있도록 쉘 환경 설정파일(.bashrc 이나 .zshrc)에 아래 내용을 추가합니다.

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

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

저는 .bashrc, .zshrc 에 내용을 반영 하였습니다.

4) 설정 확인

터미널을 재기동한 다음에 which 커맨드로 패스 설정이 반영 되었는지 확인합니다.

$ which ruby
/Users/admin/.rbenv/shims/ruby

$ which gem
/Users/admin/.rbenv/shims/gem

1-3. bundle 인스톨-2

아래 커맨드로 필요한 요소를 모두 내려 받습니다.

$ bundle install

2. 사이트를 로컬환경에서 빌드하기

아래 커맨드로 로컬에서 Jekyll 사이트를 실행합니다.

$ bundle exec jekyll serve

Source: /Users/admin/dev/pie001.github.io
Destination: /Users/admin/dev/pie001.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Jekyll Feed: Generating feed for posts

위와 같이 정상적으로 Jekyll 사이트가 실행되면 http://localhost:4000 으로 접속해서 사이트를 확인합니다.

Pie's Tech Note

생계형 개발자의 메모장