/ JEKYLL

Jekyll 기반의 GitHub Page 생성(2)

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


Github Page Publishing

이전 포스트에서 로컬 서버를 실행시켜 Jasper2 theme를 이용한 블로그가 실행되는 것 까지 확인을 했습니다.

Jasper2나 혹은 다른 theme를 사용하실 때도 이제부터가 문제입니다. 자신의 입맛에 맞도록 theme를 수정해야 하는데 이게 쉬운일이 아닙니다. 개발쪽에 있으신 분들은 쉽게 접근하실 수 있지만 그렇지 않은 경우 상당히 난해합니다. “그냥 Tistory 쓰고말지” 라는 말이 나올정도로요.

사실 GitHub Page에서 블로그를 운영하는 사람들 중 많은 사람이 Front-End 개발이 가능한 사람들 입니다.


Jekyll은 정적 사이트 생성기 입니다. Liquid template을 기반으로 markdown형식의 텍스트파일을 HTML로 변환해주는 변환 도구라고 보시면 됩니다.

이전 포스트에서 Jasper2 theme를 압축해제한 폴더를 기억하시나요? D:/blogmaker 였습니다. 이 폴더가 Jekyll Source Folder가 됩니다.

이 Jekyll Source Folder 안의 _post라는 폴더에 우리가 작성하려는 글을 markdown 형식으로 작성합니다. 그런 후 bundle exec jekyll serve 명령을 이용하면 build시키면 저장된 글에 대해 컴파일이 진행되고 결과물이 destination 폴더에 생성됩니다.

GitHub Page에 올려 사용하는 실제적인 블로그가 바로 이 destination 폴더 안에 있는 내용입니다. 따라서 Git을 이용하여 변환된 결과물(destination 폴더안의 내용)을 GitHub Page와 연동되는 GitHub Repository에 push해 주어야 합니다.

그럼 천천히 진행해 보겠습니다.


위에서 언급했듯이 D:/blogmaker가 우리의 Jekyll Source Folder입니다. 설정된 대로 컴파일 과정을 거치면 destination 폴더에 결과물을 저장하게 됩니다. Jekyll은 설정파일로 YAML 파일을 이용합니다. YAML에 대한 설명은 YAML이란 링크에 간단히 정리되어 있습니다.

이 설정에 대한 파일이 바로 _config.yml입니다. 블로그 생성에 대한 전체 환경 세팅을 담당하는 파일이라고 생각하시면 됩니다.

D:/blogmaker폴더안에서 _config.yml을 찾아 해당내용을 자신에 맞게 수정해서 사용해야 합니다.

아래는 _config.yml에 대한 내용과 그 설명입니다. 주석이 달린 부분을 중심으로 보시면 됩니다.


위의 설정파일에
destination: ./output/으로 설정되어 있기 때문에 command 창에서 “bundle exec jekyll serve” 명령을 수행하면 D:/blogmaker/output/ 폴더가 생성되고 여기에 컴파일된 결과파일들이 저장되게 됩니다.

결과파일을 D:/blogmaker ( Jekyll Source Folder )밑의 output folder로 지정한 이유는 나중에 Travis-CI와 연동하기 위해서 입니다. ( git submodule로 처리하기 위함입니다. )

Travis-CI를 이용하지 않고 그냥 수동으로 결과파일을 자신의 GitHub Page에 올리려면 설정파일에 destination: ../[GitHubPage]/과 같은 형식으로 설정하시면 됩니다. 설정 후 “bundle exec jekyll serve” 명령을 수행하면 D:/[GitHubPage]/라는 폴더가 생성되고 여기에 컴파일된 결과파일들이 저장되게 됩니다.

Jekyll build 작업을 할 때 한가지 주의해야 할 점이 있습니다.

기본적으로 Jekyll build는 development 세팅으로 진행됩니다. 만약 실제 GitHub Page에 Publishing할 목적으로 build하는 것이라면 JEKYLL_ENV 환경변수의 값을 production으로 설정한 후 build를 진행해야 합니다. (참고링크)

위의 작업을 하지 않으면 정상적으로 URL이 생성되지 않습니다. localhost로 세팅됩니다.


Travis-CI에 대한 설정은 다른 포스트에서 살펴보기로 하고 여기서는 수동으로 결과 파일을 GitHub Repository (GitHub Page에 대한 Repository)에 올리는 것으로 설명합니다. ( destination: ../[GitHubPage]/ 으로 설정되어 있다고 가정 )

이제 D:/[GitHubPage]/파일안의 내용을 GitHub Page에 Publishing하시면 됩니다.

먼저 GitHub에 접속해서 새로운 Repository를 생성합니다. 주의할 점은 Repository의 이름을 (자신의 github id).github.io로 지정해야 합니다.

Git을 이용하여 방금 만든 D:/[GitHubPage]/ 안의 내용을 Repository에 push합니다.

정상적으로 push가 진행되었다면 이제 https://(자신의 github id).github.io로 접속해서 블로그가 잘 개설이 되었는지 확인합니다.

이 포스트에서는 GitGitHub에 대한 기본적인 사용법에 대해서는 다루지 않습니다. 해당 부분은 저의 다른 포스트나 혹은 여기를 이용하여 살펴보시면 될 듯 합니다.

GitHub Page에 블로그가 잘 개설되었나요? 블로그가 잘 개설되었다면 이제 메뉴를 원하는 형식으로 바꾸고 새로운 내용의 post도 작성해서 블로그에 올리시면 됩니다. _posts 폴더에 기존에 있는 .md file을 복사해서 새로운 내용을 만들고 포스팅 작업을 해 보세요.

End.