jeykyll은 ‘지킬’이라고 발음합니다. 지킬 박사와 하이드(Dr Jekyll and Mr Hyde)의 지킬과 같은 단어입니다.

Github Page 설정하기

Github Page를 이용하여 USERNAME.github.io 도메인을 정적 페이지로 호스팅(Hosting) 할 수 있다.

Repository 생성

이름은 inswave.github.io 입력
public 선택

Clone Repository

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

블로그 프레임워크 선택

Githuyb page를 블로그로 만드는데 Jekyll과 Hexo가 일반적으로 사용된다. Hexo는 JavaScript기반에 기본 테마 디자인이 미려하여 사용하는 사람이 많지만 Git으로 블로그 포스트 버전관리가 어렵다는 치명적인 단점이 있어서 Jekyll을 선택하였다.

Jekyll은 가장 많은 사용자를 보유하고 있으며 Github Page에서 직접 지원하고 있어서 설정이 쉽다는 장점이 있다. 단점으로는 Ruby기반으로 속도가 느리고 오류가 발생하는 경우 Ruby를 알아야 할 수 있다.

jekyll 사이트에 다음과 같이 설명하고 있다.

Jekyll 은 아주 심플하고 블로그 지향적인 정적 사이트 생성기입니다. Jekyll 은 다양한 포맷의 원본 텍스트 파일을 템플릿 디렉토리로부터 읽어서, (Markdown 등의) 변환기와 Liquid 렌더러를 통해 가공하여, 당신이 즐겨 사용하는 웹 서버에 곧바로 게시할 수 있는, 완성된 정적 웹사이트를 만들어냅니다. 그리고 Jekyll 은 GitHub Pages 의 내부 엔진이기도 합니다. 다시 말해, Jekyll 을 사용하면 자신의 프로젝트 페이지나 블로그, 웹사이트를 무료로 GitHub 에 호스팅 할 수 있다는 뜻입니다.

블로그 구성

먼저 github 기본 테마 중 slate를 선택하여 download 하고 Apache2 라이선스로 공개되어 있는 kakao 기술 블로그 소스를 참고하여 구성했다.

title: inswave 기술 블로그
email: webmaster@inswave.com
description: |
  웹을 넘어 새로운 비즈니스 가치의 창출
baseurl: ''
url: 'http://tech.inswave.com'
timezone: Asia/Seoul

repository: inswave/inswave.github.io

permalink: /:year/:month/:day/:title/

excerpt_separator: <!--more-->

markdown: kramdown

krandown:
  input: GFM
  highlighter: rouge

plugins:
  - jekyll-paginate

paginate: 5
paginate_path: '/page/:num/'

collections:
  authors:
    output: true
    permalink: /authors/:path/
  tags:
    output: true
    permalink: /tags/:path/

defaults:
  - scope:
      path: ''
      type: authors
    values:
      layout: author
  - scope:
      path: ''
      type: tags
    values:
      layout: tag

exclude: [README.md, Gemfile, Gemfile.lock]

keep_files: [assets, files]
github: [metadata]

author: webmaster@inswave.com
image: '/assets/images/default_blog_cover.png'
asset_url: /assets
google_analytics:
  ua: 'UA-1212521-13'
facebook:
  app_id: '1204347326263800'
  username: inswave
github_url:
  username: inswave

폴더 및 파일 구성

폴더

_layout : 화면 layout을 구성하는데 사용되는 template 파일 저장 폴더. markdown 파일에 layout을 지정하면 _layout 폴더를 검색하여 일치하는 파일로 화면을 생성한다.
```
  ---
  layout: post
  title: 'jekyll를 이용한 기술 블로그 설치'
  author: kimwooglae
  date: 2018-02-13 14:11
  tags: [jekyll]
  ---
```
_includes : layout 파일에서 참조하는 파일이 저장된 폴더. header, footer 등을 구성하는데 사용된다.
_plugin : 사용자 정의 플러그인 폴더
assets : css, image, js 등 정적 리소스 저장 폴더
files : blog를 작성하면서 필요한 파일 저장 폴더

_authors : 작성자 정보 저장 폴더

  ---
  name: kimwooglae
  title: 김욱래
  image: /files/authors/kimwooglae.jpg
  ---

_tags : tag 정보 저장 폴더

  ---
  name: kimwooglae
  title: 김욱래
  image: /files/authors/kimwooglae.jpg
  ---

_posts : 블로그 글 저장 폴더. 블로그 글은 yyyy-mm-dd-slug.md 파일로 저장.
- slug: 해당 포스트의 고유 키로 url의 일부로 사용. 특수문자없이 영문자,숫자,-(하이픈),.(점)…만 사용.
- 최종적으로 포스트의 url(permalink)는 http://tech.inswave.com/yyyy/mm/dd/slug/
- 이 블로그 글의 URL은 http://tech.inswave.com/2018/02/13/setup/
_site : jekyll이 생성한 파일이 저장되는 폴더로 수정하면 안됨

파일

_config.yml : jekyll 환경 설정 파일
Gemfile : ruby 구성 파일
README.md : 글 작성 방법 등 설명
about.md, authors.md, tags.md : about, authors, tags 페이지
index.html : 초기 페이지
sitemap.xml, sitemap.xsl : sitemap 생성 모듈 (크롤러를 위한 사이트 맵 생성 페이지)
rss.xml : rss 생성 파일
search2.json : 블로그 검색을 위한 파일

설치가 완료된 후 폴더 구성은 아래와 같다.

drwxr-xr-x  10 wlkim  staff    320  2 13 16:40 _includes
drwxr-xr-x@  8 wlkim  staff    256  2 13 17:02 _layouts
drwxr-xr-x   3 wlkim  staff     96  2 13 14:14 _plugins
drwxr-xr-x  19 wlkim  staff    608  2 13 17:45 _site
drwxr-xr-x   3 wlkim  staff     96  2 13 17:02 _authors
drwxr-xr-x   4 wlkim  staff    128  2 14 09:08 _posts
drwxr-xr-x   3 wlkim  staff     96  2 13 14:15 _tags
drwxr-xr-x@  8 wlkim  staff    256  2 13 16:50 assets
drwxr-xr-x   4 wlkim  staff    128  2 13 17:03 files
-rw-r--r--   1 wlkim  staff   1105  2 13 17:58 _config.yml
-rw-r--r--@  1 wlkim  staff     73  2 13 13:41 Gemfile
-rw-r--r--   1 wlkim  staff   6488  2 13 13:39 Gemfile.lock
-rw-r--r--   1 wlkim  staff  11358  2 13 11:47 LICENSE.txt
-rw-r--r--   1 wlkim  staff    148  2 13 16:10 404.html
-rw-r--r--   1 wlkim  staff     16  2 14 09:06 CNAME
-rw-r--r--   1 wlkim  staff   5464  2 13 11:51 README.md
-rw-r--r--   1 wlkim  staff    262  2 13 11:47 about.md
-rw-r--r--   1 wlkim  staff    196  2 13 11:47 authors.md
-rw-r--r--@  1 wlkim  staff    164  2 13 11:47 index.html
-rw-r--r--   1 wlkim  staff   1259  2 13 11:47 rss.xml
-rw-r--r--   1 wlkim  staff    821  2 13 11:47 search2.json
-rw-r--r--   1 wlkim  staff   1462  2 13 11:47 sitemap.xml
-rw-r--r--   1 wlkim  staff   3673  2 13 11:47 sitemap.xsl
-rw-r--r--   1 wlkim  staff    175  2 13 11:47 tags.md

로컬 Preview 작업 환경 구성 ==============

Gemfile 파일 수정

source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins

bundler 파일 설치

$ sudo gem install bundler

Jekyll 설치 (go lang이 설치된 경우 go에서 설치한 bundle이 path에 등록되어 있을 수 있으므로 full path로 실행한다.)

$ cd inswave.github.io
$ /usr/local/bin/bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using concurrent-ruby 1.0.5
Using i18n 0.9.4
Fetching minitest 5.11.3
Installing minitest 5.11.3

... 생략 ...

Using terminal-table 1.8.0
Fetching github-pages 177
Installing github-pages 177
Bundle complete! 1 Gemfile dependency, 81 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from html-pipeline:
-------------------------------------------------
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
-------------------------------------------------

실행

$ /usr/local/bin/bundle exec jekyll serve
Configuration file: /Users/user/Documents/GIT/inswave.github.io/_config.yml
            Source: /Users/user/Documents/GIT/inswave.github.io
       Destination: /Users/user/Documents/GIT/inswave.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.188 seconds.
 Auto-regeneration: enabled for '/Users/user/Documents/GIT/inswave.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

접속 주소

로컬 : http://127.0.0.1:4000/
서버 : http://tech.inswave.com

글 작성 방법

상세한 내용은 링크 참고

새 글 작성

_drafts 디렉토리에 적당한이름.md 이름으로 파일을 만들고
포스트를 마크다운으로 작성
- [gfm] 문법, [kramdown] 파서, [rouge] 문법강조기 사용
확인
```
$ bundle exec jekyll serve --drafts
```

글 쓰기

_posts 디렉토리에 yyyy-mm-dd-slug.md 파일로 복사(or 이동).
- slug: 해당 포스트의 고유 키로 url의 일부로 사용. 왠만하면 특수문자없이 영문자,숫자,-(하이픈),.(점)…만 사용.
- yyyy,mm,dd: 발행 년,월,일.
- 참고: 최종적으로 포스트의 url(permalink)는 http://tech.inswave.com/yyyy/mm/dd/slug/
파일 상단에 [front matter] 작성
- layout: post # 레이아웃(필수). page 레이아웃을 사용하면 목록에 보이지 않는 글을 쓸 수 있음.
- title: ‘제목’ # 제목(필수)
- author: lastname.firstname # 필자(필수). 왠만하면 회사 아이디(예: iolo.fitzowen) 사용
- tags: [tag1,tag2,tag3,...] # 태그 목록(선택). 왠만하면 특수문자없이 영소문자,숫자,-(하이픈),.(점)…만 사용.
- image: http://… # 커버이미지 url(선택)
- date: YYYY-MM-DD HH:MM:SS # 발행일(필수)
처음 글을 쓰는 필자이라면 글쓴이 등록(필수)
유력한(?) 태그가 새로 등장했다면 태그 등록(선택)

필자 등록

_authors 디렉토리에 lastname.firstname.md 이름으로 필자 정보 파일 추가
- 참고: 최종적으로 사용자 포스트 목록 페이지의 url은 http://tech.inswave.com/authors/lastname.firstname/
파일 상단에 [front matter] 작성
- layout: author # 레이아웃(필수)
- name: lastname.firstname # post의 author와 매칭(필수). 왠만하면 회사 아이디(예: iolo.fitzowen) 사용. 왠만하면 특수문자없이 영소문자,숫자,-(하이픈),.(점)…만 사용.
- title: … # 왠만하면 한글이름 사용( 필수)
- image: http://… # 프로필 이미지(필수)
- cover: http://… # 작성자 커버 이미지(선택)
내용은 필요없음

태그 등록

_tags 디렉토리에 tag-name.md 이름으로 필자 정보 파일 추가
- 참고: 최종적으로 사용자 포스트 목록 페이지의 url은 http://tech.inswave.com/tags/tag-name/
파일 상단에 [front matter] 작성
- layout: tag # 레이아웃(필수)
- name: tag-name # post의 tags 배열의 항목과 매칭(필수). 왠만하면 특수문자없이 영소문자,숫자,-(하이픈),.(점)…만 사용.
- title: … # 좀 더 길고 구체적인 설명(필수)
- image: http://… # 태그 이미지(선택)
내용은 필요없음

마크다운

텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌음

헤더

큰제목: 문서 제목

This is an H1
=============

This is an H1

작은제목: 문서 부제목

This is an H2
-------------

This is an H2

글머리: 1~6까지만 지원

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5

This is a H6

BlockQuote

이메일에서 사용하는 > 블럭인용문자를 이용한다.

> This is a blockqute.

This is a blockqute.

이 안에서는 다른 마크다운 요소를 포함할 수 있다.

> ### This is a H3
> * List
>	```
>	code
>	```

This is a H3
List
  code

순서있는 목록은 숫자와 점을 사용

첫번째
두번째
세번째

첫번째
두번째
세번째

순서없는 목록(글머리 기호)

* 빨강
  * 녹색
    * 파랑

+ 빨강
  + 녹색
    + 파랑

- 빨강
- 녹색
- 파랑

빨강
- 녹색
  - 파랑
빨강
- 녹색
  - 파랑
빨강
녹색
파랑

혼합해서 사용하는 것도 가능

코드

4개의 공백 또는 하나의 탭으로 들여쓰기를 만나면 변환되기 시작하여 들여쓰지 않은 행을 만날때까지 변환이 계속된다.<pre><code> ~~~ </code></pre>와 동일

This is a normal paragraph:

    This is a code block.
end code block.

This is a normal paragraph:

This is a code block. end code block.

backtick을 이용해서 코드 블럭을 표시할 수 있다.

```
This is a code block.
```

This is a code block.

수평선

아래 줄은 모두 수평선(<hr/>)을 만든다. 마크다운 문서를 미리보기로 출력할 때 페이지 나누기 용도로 많이 사용한다.

* * *
***
*****
- - -
---------------------------------------

링크

링크

syntax: [Title](link)

syntax: Title

자동연결

<http://example.com/>
<address@example.com>

http://example.com/ address@example.com

강조

*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
~~cancelline~~

single asterisks
single underscores
double asterisks
double underscores
~~cancelline~~

테이블

| foo | bar |
| --- | --- |
| baz | bim |

foo	bar
baz	bim

이미지

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

석촌호수 러버덕

사이즈 조절 기능은 없기 때문에 <img width="" height=""></img>를 이용한다.

Back to Posts

[0001] jekyll를 이용한 기술 블로그 설치

Github Page 설정하기

Repository 생성

Clone Repository

블로그 프레임워크 선택

블로그 구성

폴더 및 파일 구성

폴더

파일

접속 주소

글 작성 방법

새 글 작성

글 쓰기

필자 등록

태그 등록

마크다운

헤더

This is an H1

This is an H2

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5

This is a H6

BlockQuote

This is a H3

목록

코드

수평선

링크

강조

테이블

이미지

참고 링크

[0002] ES2015 핵심 정리