이전부터 GitHub에서 페이지 형태의 웹사이트를 만들 수 있다는 것은 알고 있었다. 아무래도 GitHub 측에서도 워낙 잘 밀어주기도 했고, 가끔가다 구글에 잡히는 사이트 중 github.io 도메인을 달고 있는 곳들이 있었으니까. 그래서 뭔가 기록할 페이지를 만들때 어떤 서비스를 사용할지 고민이 없었다. 전통적인 네이버 블로그나 티스토리 같은 것도 있고, 양질의 글이 많이 올라와 요즘 종종 눈팅하는 브런치도 물론 괜찮겠지만 역시 “Geek”스러움이 떨어지는 것은 어쩔 수 없었나보다.

Jekyll(지킬)?

처음 “Jekyll”이라는 이름을 보고 이걸 어떻게 읽어야 하나 잠깐 난감했었는데 찾아보니 지킬과 하이든 할때 그 지킬이란다. 공식 한국어 홈페이지 에서는 “심플하고 블로그 지향적인 정적(Static) 사이트 생성기” 라고 스스로를 정의하고 있다. 간단한 Markdown 문법이나 HTML 등으로 글을 쓰면 Liquid 렌더러를 통해 자동으로 가공하고 완성된 웹페이지를 보여주는 훌륭한 도구인 것 같다.

당연히 여기서의 핵심은 Jekyll로 웹사이트를 만들면 GitHub에 무료로 사이트를 올릴 수 있다는 점. 멋있는 github.io 도메인은 덤이다.

그래서, 페이지는 언제 만드나요?

지금부터 만들 거다. 오래 걸리지 않으니 서두르지 마라. GitHub에서는 크게 개인/팀 페이지와 프로젝트 페이지. 2가지 종류의 웹사이트를 호스팅할 수 있다. 여기서는 개인 페이지를 기준으로 설명할 것이다. 더 자세한 정보나 프로젝트 페이지를 만들고 싶은 분들은 GitHub Pages 사이트를 방문하면 된다.

잠깐 새 창에 GitHub를 띄우고, username.github.io 형태의 새로운 저장소(repo)를 만들어보자. username이 내 GitHub 유저네임과 완전히 같이 않으면 사이트가 작동하지 않으니 주의. 저장소가 만들어졌으면, git clone으로 끌어와 보자. 나는 터미널에서 git을 사용하니 명령어 위주로 서술하겠다.

  git clone https://github.com/username/username.github.io

터미널에서 clone받은 저장소 폴더로 들어간 후, index.html 파일에 “Hello World”를 박아 보자.

  cd username.github.io

  echo "Hello World" > index.html

이제 다시 GitHub로 올려 제대로 작동하는지 확인할 차례다. git push 명령어로 올려 보자.

  git add --all

  git commit -m "변경점 기록"

  git push -u origin master

이제 브라우저에 username.github.io 주소를 넣어보자. 정상적으로 “Hello World”가 출력되면 잘 진행된 거다.

사이트 생성에 조금 시간이 걸릴 수도 있으니, 당장 잘 뜨지 않는다고 하더라도 몇분 더 기다려보자.

Jekyll 사이트 생성하기

잠깐 브라우저 창을 닫고 터미널을 띄우자. 잠깐 위에 링크를 달아둔 Jekyll의 공식 웹페이지를 둘러봤다면 이것이 Ruby를 기반으로 만들어졌다는 것을 알 것이다. 고맙게도 Ruby도 마치 데비안의 apt-get 같은 gem 이라는 분산 패키지 시스템이 존재한다. Ruby를 다뤄본 경험이 없다고 해도 전혀 걱정할 것 없다. 그건 필자도 마찬가지다.

당황하지 말고 gem install jekyll bundler 명령어로 Jekyll 번들을 다운받자. 최신 macOS와 Linux 배포판에는 이미 Ruby가 설치되어 있으니 별 문제 없을 것이다.

사실 Jekyll에는 jekyll new 사이트이름 이라는 명령어로 바로 사이트를 생성할 수 있는 기능이 있지만, 이렇게 하면 기본 테마가 바로 설치되어버려 나중에 귀찮아지는 단점이 있다. 최신 Jekyll에서는 기본 테마 사용을 권장하지 않는다. 사용에 필요한 _layouts 같은 폴더들이 기본 테마로 설치하면 생성되지 않게 된다.

필자의 페이지는 whiteglass 테마를 사용한다. 자유롭게 사용 가능한 많은 테마들이 Jekyll Themes 에서 기다리지 한번 살펴보길 추천한다. 테마 적용에는 별 것 없다. 다운받은 테마 폴더가 그대로 사이트를 구성하는 전부가 된다. 터미널에서 해당 폴더로 이동 후, jekyll serve 라는 명령어로 로컬 서버를 구동해보자. 브라우저에서 localhost:4000으로 접근해보면 정상적으로 사이트가 출력될 것이다. 그게 전부다. 이제 가지고 놀면 된다.

상단 경로에 config.yml이라는 파일이 있을 건데, 들어가면 사이트를 구성하는 title이나 author정보 같은 것들을 수정할 수 있다. 나에게 맞게 고쳐주자. _posts 폴더에 Markdown 문법으로 작성한 글을 넣어주거나 이것저것 테마에 맞는 설정들을 해주자. 사실 상당히 직관적으로 구성되어 있어서 별도의 메뉴얼 없이 대부분의 세탕이 가능할 정도다. 자세한 정보를 원한다면 여길 쭉 읽어보길 권한다.

이제 무엇을 해야 하나요?

일단 어느정도 페이지 구실을 하는 물건이 완성되었다면, GitHub에 푸시하고 username.github.io 주소로 접근해 보자. 로컬 서버에서 보는 것과 온라인에 올라간 페이지를 보는 느낌이 또 다를 것이다.

이제 나머지는 여러분의 자유다. 이것저것 하고싶은 이야기를 Markdown으로 잔뜩 작성해 올려도 좋고, 오픈소스 테마들을 이것저것 맛보면서 공유경제가 무엇인지 피부로 느껴도 좋다.

새로 페이지를 오픈하는 모든 분들에게 도움이 되었으면 하는 바람이다.