Github Pages & Jekyll 사용해서 Github 블로그 만들기

Github Pages & Jekyll 사용해서 Github 블로그 만들기

Github Page, Github Blog를 만들 때 Github에서 권장하는 Jekyll을 사용해 깃허브 페이지를 만들어 보려고 합니다. html, css, javascript만 가지고도 충분히 페이지들을 뽑아낼 수 있겠지만 Jekyll이 궁금해서 사용해보려고 합니다.

 

우선 제 운영체제는 WIndows인데, Github Docs에 따르면, "Jekyll은 WIndows를 공식적으로 지원하지는 않는다."라고 되어 있습니다. 그래도 Windows에서 사용할 수 있는 방법을 제공하고 있다고 해서 그 방법으로 진행합니다. 먼저 Jekyll을 사용하려면 루비를 설치해야 합니다. 아래 사이트 접속해서 Ruby+Devkit을 설치합니다.

 

https://rubyinstaller.org/downloads/.

 

다운로드된 rubyinstaller-devkit-3.2.2-1-x64.exe 파일을 실행하고 기본 설정 값으로 쭉 Next 하여 설치를 완료해 줍니다.

관련 파일들이 C:/Ruby32-x64/ 경로에 설치됩니다.

 

MSYS2 andMINGW development tool chain 옵션 선택을 하고 설치를 진행합니다.

 

완료되었으면 커맨드 창을 열어서 다음 명령어로 jekyll을 설치합니다.

gem install jekyll bundler

 

설치되었는지 확인하는 명령어

 

루비, 지킬 설치 확인

ruby -v
jekyll -v

 

설치되었다면 아래 이미지와 같이 버전 정보가 나타날 것입니다.

 

그다음으로는 Github에서 블로그로 사용할 레포지토리 디렉터리로 이동합니다. Jekyll 공식 페이지에서 UTF-8 인코딩을 적용하기 위해 다음 명령어를 실행하라고 합니다.

chcp 65001

WIndows 환경에서 해당 명령어를 치면 다음 메시지가 나타납니다. Active code page: 65001

 

※ 보통 github page url은 {username}.github.io/{repository_name}으로 사용이 되는데 레포지토리 이름 자체를 {username}.github.io 로 설정하면 파일의 루트 경로를 https://{username}.github.io/ 로 사용할 수 있게 됩니다. 즉 레포지토리 루트 경로에 index.html 파일을 넣고 해당 레포지토리를 Github page 호스팅 기능을 이용하면 https://{username}.github.io 혹은 https://{username}.github.io/index.html 로 해당 레포지토리의 루트 경로에 있는 index.html 파일을 확인할 수 있게 됩니다.

 

반응형

---

다시 jekyll DOCS를 보면,

 

Jekyll is a Ruby Gem that can be installed on most systems.

이라고 되어 있고 Ruby, RubyGems 설치 여부를 확인해 봅니다. (선행조건)

위에서 설치를 진행했다면 위처럼 설치되었을 겁니다.

 

지킬과 번들러를 설치 안 하셨다면 다시 확인해주시고요.

 

지킬 번들러 설치하기 명령어(위에서 했으면 Pass)

gem install jekyll bundler

 

다음은 새로운 jekyll 사이트를 생성합니다.

위에서 얘기했던 repository 이름을 {username}.github.io 이런 형식으로 사용하면 github blog를 만들 때 해당 주소로 사용할 수 있다고 했었습니다. 해당 폴더로 이동해서 다음 명령어를 사용해서 새로운 jekyll 사이트를 생성합니다.

// 폴더가 있었다면 해당 폴더에서 아래 명령어로
jekyll new ./

// 폴더가 없었다면 폴더명을 입력한다.
jekyll new {username}.github.io

 

해당 폴더로 위치했다면 바로 실행하면 되고, 해당 폴더로 위치하지 않았다면 이동합니다.

// 폴더로 이동
cd {username}.github.io

 

다음 명령어로 jekyll 사이트를 로컬 서버로 실행합니다.

bundle exec jekyll serve

--livereload 옵션을 적용하려면 다음 명령어로 실행합니다.

bundle exec jekyll serve --livereload

http://127.0.0.1:4000/ 으로 접속했을 때 (http://localhost:4000/ 으로도 접속할 수 있습니다.)

다음과 같은 페이지를 확인할 수 있다면 정상적으로 실행된 것으로 볼 수 있습니다.

 

 

이제부터는 수정의 길입니다. 테마를 찾아서 수정해서 사용해도 되고 아니면 만들어진 Jekyll 기본 템플릿에서 작업하시면 됩니다. jekyll을 사용하실 분이면 보통은 개발자이실테니 어느 정도 소스 보면서 해석하고 수정하실 수 있으실 것이라 생각합니다. 여기까지 Github + Jekyll을 사용한 깃허브 블로그를 만드는 방법이었습니다.

 

이제 repository에 push 해주면 완료입니다. 그럼 {username}.github.io 페이지로 몇 분 있다가 접속해보시면 http://localhost:4000/ 에서 보았던 페이지와 동일한 페이지를 보실 수 있습니다.