jekyll을 이용해서 github 블로그를 만들어보자

포트폴리오 페이지 겸으로 깃허브 페이지를 만들고자 검색하던 도중, github 자체적으로 jekyll을 이용하여 정적 페이지를 만드는 것이 가능하다는 것을 알고 이를 적용하기 위한 과정을 적어보는 게시글이다.

Jekyll 적용해보기

기본적인 설치법은 jekyll 공식 페이지를 통해 확인할 수 있다.

Jekyll 설치법

macOS의 경우 기본적으로 ruby가 설치되어 있지만, windows나 linux와 같은 OS에서는 ruby를 별도로 설치하여야 정상적으로 cli 기능을 이용할 수 있다. 해당 OS에 맞게 루비를 설치하고 gem 명령어를 통해 jekyll과 bundler를 설치할 수 있다. 잠시 후, 설치가 완료되면 cli를 통해 jekyll을 사용할 수 있다.

~$ gem install bundler jekyll

아래와 같은 명령어를 이용하면 기본적으로 설정된 방식으로 my-blog-pages 경로를 생성하여 jekyll이 가동할 수 있도록 한다. 리액트 등을 해보셨거나 관심이 있으신 분들이라면 create-react-app cli를 통해 기본적인 react 프로젝트를 생성하는 것과 비슷하다고 볼 수 있다.

~$ jekyll new my-blog-pages

정상적으로 실행이 됐는지 확인하기 위해 다음의 명령어를 입력하여서 동작을 확인할 수 있다. 문제가 없을 경우, **http://localhost:4000**를 통해 접속하면 Welcome to Jekyll!이라는 표시의 기본 사이트가 생성된 것을 알 수 있다.

~$ bundle exec jekyll serve

jekyll에 옷을 입혀보자!

휑한 상태의 jekyll을 보고 있자니 뭔가 아쉽다. 그럴 때에는 theme를 적용하여서 휑한 jekyll을 좀 더 꾸며보자.

jekyll theme 관련 사이트는 크게 2가지가 있다.

https://jekyllthemes.io
https://jekyllthemes.org

위 두 사이트에서 테마를 받아서 적용하면 된다. https://jekyllthemes.io 페이지의 경우, 유료 테마와 무료 테마가 있으므로 경제적으로 부담이 되시면 무료 테마에서 선택하여 적용할 수 있다. 이 포스트의 경우 https://jekyllthemes.io 페이지를 통한 theme 적용에 대해 적어보도록 하겠다.

맘에 드는 테마를 선택하고 주황색의 Get ... on Github 버튼을 클릭하면 해당 테마에 대한 깃허브 주소가 나온다.

해당 사이트로 이동하여 github 주소를 파악하고 해당 깃허브를 클론하여 테마를 가져온다.

git clone http://github.com/**{User}**/**{Repository}**.git

해당 프로젝트를 복사하고 기본적인 적용방법은 해당 프로젝트의 ReadMe.md를 이용하면 사용할 수 있다.

기본적으로 _config.yml을 통해 기본적인 설정을 변경하면 동작하는 것도 있고, 좀 더 복잡한 테마도 있을 것이다. 해당 메뉴얼을 따라 실행하고 명령어를 수행하면 로컬에서 동작을 확인할 수 있다.

원격 서버에 적용해보기

이제 실제 github에 Jekyll을 적용해보는 문제만이 남았다.

우선적으로 github에 로그인하여 Repository를 생성해야 한다. Repositories 탭에서 new 버튼을 눌러 새 repository를 만든다.

Repository name을 설정할 때는 다음과 같은 형식으로 해야 한다.

Github 아이디.github.io

위와 같이 레포지토리를 만들고, 기존에 생성해놓은 jekyll 파일을 github에 푸시하면 해당 블로그가 잠시 후 적용된 것을 확인할 수 있다.