/ JEKYLL

Jekyll 기반의 GitHub Page 생성(1)

Jekyll 기반의 GitHub Page 생성은 여러 절로 구성되어 있습니다.


환경설정

Jekyll을 이용해 GitHub Page에 기본적인 블로그를 생성하는 방법은 여러 다른 블로그나 사이트에 자세하게 나와 있으니 저는 제가 사용하는 Jasper2 theme를 이용하여 GitHub Page에 블로그를 개설하고 사용하는 방법에 대해서 알아보겠습니다. (Windows 10환경으로 진행합니다.)

Windows 환경은 조금 까다롭습니다. Ruby 때문에 그렇습니다. 먼저 컴퓨터의 계정 ID가 한글로 되어 있으면 여러 문제가 발생합니다. 한글계정이라면 먼저 계정부터 영문으로 바꾸고 시작해야 합니다. 아래의 그림처럼 컴퓨터의 계정이 영문으로 되어있는지 확인합니다.

영문이름의 계정

제일 먼저 해야하는 작업은 Ruby를 설치하는 것입니다.

RubyRubyInstaller for Windows 에서 받으시면 됩니다. 사용할 버전은 2.2.6입니다. 다른 버전 사용할 경우 문제가 발생할 여지가 있습니다. 파란색 박스로 되어 있는 링크를 눌러 파일을 받으시면 됩니다.

루비 버전

다운로드 받은 Ruby를 설치합니다. 아래 그림과 같이 기본 경로(C:/Ruby22-x64)에 PATH 환경변수 설정만 추가해서 설치합니다.

루비 설치

Ruby 설치가 끝나면 DevKit을 설치해야 합니다. DevKit을 설치하지 않으면 Jekyll 설치할 때 Error가 발생합니다.

RubyDevKit은 마찬가지로 RubyInstaller for Windows 에서 받으시면 됩니다. 파란색 박스로 되어 있는 링크를 눌러 파일을 다운로드 합니다. ( 64bit기준 )

루비 DevKit

다운로드받은 파일을 실행하고 압축이 풀릴 폴더를 지정합니다. C:/RubyDevKit으로 지정합니다. (다른 경로를 사용해도 무방합니다.)

따로 설치파일이 존재하는게 아니기 때문에 command 창을 열어서 초기화 및 설치작업을 진행합니다.

ruby dk.rb init

ruby dk.rb install

루비 DevKitInit

이제 bundler를 설치합니다. bundler는 Ruby application 개발을 위한 일관된 환경을 제공합니다. 단편적 기능 중 하나는 Ruby application이 사용하는 gem의 dependency를 관리하는 것입니다. 우리는 나중에 이 bundler를 이용하여 Jekyll을 사용할 것이기 때문에 설치해야 합니다.

gem install bundler


기본적인 준비과정은 끝났습니다.
그 다음 과정은 우리가 사용할 Theme인 Jasper2를 다운받아서 원하는 폴더에 압축을 풀어줍니다. D:/blogmaker에 다음과 같은 형태로 압축을 풀어 저장했습니다.

여기서 주의해야 할 점은 폴더 이름에 공백이 포함되어 있으면 나중에 css빌드할 때 문제가 발생합니다. 즉, D:/blogmaker처럼 폴더는 소문자로 공백없이 생성합니다.

폴더 구조

command 창을 열어서 해당 폴더(D:/blogmaker)에서 다음과 같이 실행합니다.

bundle exec jekyll serve

먼가 수행될거라는 기대와는 달리 다음과 같은 에러가 발생합니다.

Could not find gem ‘jekyll (~> 3.6.2) x64-mingw32’ in any of the gem sources listed in your Gemfile. Run bundle install to install missing gems.

command 창에서 다음의 명령을 차례로 실행해 필요한 gem을 설치합니다.

gem cleanup

bundle install

이제 다시 아래와 같은 명령을 이용하여 실행시킵니다.

bundle exec jekyll serve

Jekyll은 template처리를 위해 Liquid template 언어를 사용합니다. template 처리를 거쳐 결과 파일이 특정 폴더에 저장되고 로컬 웹 서버가 실행되어서 서비스해 주기 때문에 로컬에서 블로그를 확인해 볼 수 있습니다. build 과정을 거쳐 로컬 웹서버를 이용하여 웹 서비스까지 실행시켜주는 명령이라고 생각하시면 됩니다.

아래와 같은 메시지가 출력되면서 로컬 웹 서버가 4000번 포트로 기동되고 http://localhost:4000/jasper2로 접속하면 테마페이지를 보실 수 있습니다.

지킬 실행

browser 실행

일단 로컬에서 화면을 띄웠습니다. 이제 각 메뉴를 원하는 내용으로 바꾸고 이미지를 내 입맛에 맞게 수정하고 기타 등등의 기능들을 추가하면 될 듯 보입니다.

End.