jekyll

jekyll로 회사페이지를 만들어보자.

Jekyll 은 아주 심플하고 정적인 사이트 생성기이다. markdown 을 이용해서 쉽게 글을 작성할 수 있고 사용자가 직접 작성하거나 다른 사람들이 이미 만들어 놓은 템플릿을 통해 작성된 글을 markdown 변환기와 Liquid 렌더러를 통해 완성된 웹사이트로 만들어준다. 가장 좋은 점은 jekyll은 github pages의 내부 엔진이기 때문에 jekyll을 사용하연 웹사이트를 무료 로 github에 호스팅 할 수 있다. github.io 라는 간지나는 도메인 명은 덤!

다음 사이트에서 jekyll에 대한 정보를 얻을 수 있다.

• jekyll
• jekyll tips

설치

• osx, linux
• windows

사용법

reference
앞서 언급한데로 jekyll은 markdown 변환기를 통해 작성한 markdown을 html 문서로 변환하고 Liquid 렌더러를 통해 완성된 사이트로 만들어준다.

$ jekyll build

위 명령어를 입력하면 현재 jekyll 프로젝트의 내용으로 ./_site에 사이트를 생성한다.

$ jekyll serve

$ jekyll s

jekyll에 내장된 개발서버를 통해 로컬환경에서 생성된 사이트를 미리 살펴 볼 수 있다.

디렉토리 구조

현재(2016.08.24) nofetan.github.io 의 디렉토리 구조는 다음과 같다.

.
├── _config.yml
├── _includes
|   ├── analytics.html
|   ├── disqus-comments.html
|   ├── disqus-counts.html
|   ├── navbar.html
|   ├── sidebar.html
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── about.html
|   ├── default.html
|   ├── list.html
|   ├── member.html
|   └── post.html
├── _posts
|   ├── dev
|   └── press
├── _data
|   └── members.yml
├──  css
├──  images
├──  js
├── 404.html
├── README.md
├── about.md
├── dev.html
├── feed.xml
├── member.html
├── press.html
└── index.html

각각의 파일과 디렉토리가 하는 일의 개요는 이 문서를 참고하면 된다. 우리 사이트에서 각 파일과 디렉토리의 역할은 아래와 같다.

파일	디렉토리
_includes/analytics.html	google analytics를 위한 html
_includes/disqus-comments.html	disqus를 위한 html
_includes/footer.html	site의 footer
_includes/header.html	site의 header html문서를 위한 각종 파일 import명시
_includes/navbar.html	네비게이션바
_includes/sidebar.html	/dev.html 혹은 /press.html 접속시 보여지는 사이트바
_layouts/about.html	/about.html 의 레이아웃
_layouts/member.html	/member.html 의 레이아웃
_layouts/list.html	/dev.html 와 /press.html 에서 포스트의 목록을 보여주는 레이아웃
_layouts/post.html	각각의 포스트들을 보여주는 레이아웃
_layouts/default.html	가장 기본레이아웃 최상위 레이아웃
_data/members.yml	팀원의 정보가 들어있는 파일