GitHub Pages와 Jekyll로 website 생성

@markdown

---

[https://nukeguys.github.io/](https://nukeguys.github.io/)에서 `markdown`으로 작성 후 함께 공유된 글입니다.

(tistory에 `markdown`을 적용하는 방법은 [http://makerj.tistory.com/299](http://makerj.tistory.com/299) 참고)

---

_

Portfolio 정리할 겸 찾아보다가 마침 이전부터 찾던 geek스러운(*GitHub를 통해 운영, MarkDown으로 작성, Theme Customizing* 등) blog를 GitHub을 통해 운영할 수 있다는 것을 알게 되어, 개발도 손놓지 않고 이어갈 겸 만들어 보기로 했다. 아직 좀 더 욕심이 나지만 일단 운영 수준으로는 만들어 진 것 같다. 하루 종일 삽질하면서 해본 내용들을 정리해서 첫 글로 posting 해본다.

## 설치 ([https://jekyllrb-ko.github.io/docs/installation](https://jekyllrb-ko.github.io/docs/installation))

Jekyll은 공식적으로 windows를 지원하지 않는듯하니 mac이나 linux 기반으로 진행하는게 편할 듯한다.

(이후는 macOS에서 진행과정)

### Ruby 설치

Jekyll은 `RubyGem`으로 ruby가 먼저 설치되어야 한다. (`RubyGem`은 ruby의 library정도로 이해, rails는 framework)  

최신 macOS(High Sierra 10.13)에는 ruby가 포함되어 있어 필요없지만, 이전 버전에서는 Homebrew를 통해 별도로 설치를 해야 한다.

```bash

# 설치

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install ruby

# 버전확인

ruby -v

ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]

```

### Jekyll 설치

플러그인과 테마를 위와 `Bundler`와 함께 `Jekyll`을 설치한다.

```bash

gem install bundler jekyll

```

설치 후 직접 `jekyll new jekyll-website` command를 통해 기본 블로그 테마를 설치하거나, `bundle init`, `bundle add keyll`, `bundle install`을 통해 하나씩 직접 설정도 가능하다. 그러나 web에 익숙치 않고 blog가 목적이기 때문에 이 부분은 패스하고 theme를 통해 쉽게 만들어 본다.

### GitHub 설정

GitHub Pages를 운영하는 방법도 크게 두 가지로 나뉜다. Pages용 repository를 만들어서 관리하거나, 각 project(repository)별로 branch를 두고 별도로 운영할 수 있다. 난 간단하게 전용 repository를 만들어서 시작했다.

GitHub에 로그인한 다음 repository를 생성해서 이름을 `[id]/[id].github.io`로 만들어 주면 자동으로 pages가 활성화된다. (setting에서 아래처럼 표시된다.)


설정은 끝났으나 아직 표시할 내용이 없기 때문에 접속을 해도 표시되지 않는다. 확인을 해보려면 해당 repository를 clone해서 간단한 html을 작성 후 올리고 접속해보면 표시되는 것을 알 수 있다. 여기에 jekyll을 사용하면 github을 통해 blog를 hosting할 수 있게 된다.

## Theme 적용 & Configuration

### Theme 적용

위에서 언급한 대로 직접 한땀한땀 만들어 갈 수도 있지만, 이미 만들어진 훌륭한 theme를 사용하면 손쉽게 초기 설정을 할 수 있다. setting에서 선택할 수 있는 theme도 있고, 추가로 GitHub에 많은 theme([jekyll-theme](https://github.com/topics/jekyll-theme))들이 있다. 난 가장 인기가 많은 [minimal-mistatkes](https://github.com/mmistakes/minimal-mistakes)라는 theme로 선택했다.  

Theme를 결정했다면 가장 손 쉬운 방법은 fork하는 것이다. 해당 project를 fork해서 내 GitHub으로 가져온 다음 repository의 이름을 위에서처럼 `[id]/[id].github.io`로 변경해준다. 그리고 나서 접속하면 해당 theme가 보이게 된다.(혹 경로 등의 문제가 발생할 수 있다.)  

나는 [Jekyll 블로그 테마 적용하기](https://junhobaik.github.io/jekyll-apply-theme/)를 참고해서 해당 project의 최신 release 버전을 zip파일로 내려 받은 후 압축을 풀어서 내 repository에 올렸다. 이 때 불필요한 파일들은 지워주고, `docs` 디렉토리에는 참고할 만한 내용들이 많아서 별도로 보관하고 있다. (자세한 내용과 추가 작업은 링크된 블로그 참고)


### Configuration

Jekyll에 `_config.yml`파일을 통해 전역적인 설정이나 default값들을 미리 설정 할 수 있다. ([https://jekyllrb-ko.github.io/docs/configuration/](https://jekyllrb-ko.github.io/docs/configuration/) 참고)

가장 기본적인 내용인 Site Settings, Site Author등을 설정하고 추가적인 comment 기능이나 navigation 등은 링크된 site들을 보면 자세하게 나와있다.

```bash

# Site Settings

locale                   : "ko-KR"

title                    : "Mémento"

title_separator          : "-"

name                     : &name "Seung-Kyu Sung"

description              : "A personal website."

url                      : "https://nukeguys.github.io" # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"

baseurl                  : # the subpath of your site, e.g. "/blog"

repository               : "nukeguys/nukeguys.github.io" # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"

...

# Site Author

author:

  name             : *name

  avatar           : "/assets/images/profile.png" # path of avatar image, e.g. "/assets/images/bio-photo.jpg"

  bio              : "Just a developer."

  location         : "Seoul, Korea"

  email            : "nukeguys0@gmail.com"

...

# Defaults

defaults:

  # _posts

  - scope:

      path: ""

      type: posts

    values:

      layout: single

      author_profile: true

      read_time: true

      comments: true

      share: true

      related: true

      toc: true

```

기본적인 설정들을 완료했으면, 추가로 취향에 맞도록 theme도 수정 가능하다. 난 글자 크기나 archive 등을 위에 링크된 blog에서 참고해서 수정을 했다. 그 결과가 현재 모습.

## 글 쓰기 ([https://jekyllrb-ko.github.io/docs/posts/](https://jekyllrb-ko.github.io/docs/posts/))

Jekyll은 `_posts` 디렉토리에 지정된 형식(`YEAR-MONTH-DAY-title.MARKUP`)으로 이름을 지정해서 작성하면 표시가 된다. 추가로 post외에도 collection을 추가할 수 있고 글 목록에 표시되지 않는 글도 작성할 수 있는 pages도 작성 가능하다. 우선 post를 작성하기 위해 markdown editor를 골라본다.

### Markdown Editor

수 많은 markdown editor가 있다는 걸 새삼스레 알게됐다. 많이는 아니지만 이것저것 살펴보고 후보로 남은 것이 [Atom](https://atom.io/), [Typora](https://typora.io/), [HarooPad](http://pad.haroopress.com/) 였다. 기존에 쓰던 text editor인 sublime에서 markdown 잘 되지 않는다고해서 `Atom`으로 함께 갈아타볼까 하다가 무겁다는 말이 있어서 일단은 보류. 이 글을 작성시작하면서 사용한건 `HarooPad`였다. 그리고 결과적으로 계속 사용하기로 했다. `Typora`도 깔끔하고 맘에들었지만, 아직 markdown 익숙하지 않아 code를 분리해서 보고 싶어서 code와 preview가 분리를 일단 선택했다. 이후에 markdown 익숙해지면 `Typora`도 좋은 editor로 사용할 수 있을 것 같다.  

아래는 `HarooPad`로 현재 글을 작성하는 화면.


### Posting

초안 기능인 `draft`도 활용할 수 있지만, 바로 글을 작성해 본다.  

`_posts` 디렉토리에 형식에 맞춰 새 파일을 하나 생성한다. 그리고 Jekyll에서는 post에 [FrontMatter](https://jekyllrb-ko.github.io/docs/frontmatter/)를 추가할 필요가 있다. 이를 통해 post를 handling하는데 사용한다고 한다.

```bash

---

layout: post

title:  "Welcome to Jekyll!"

date:   2015-11-17 16:16:01 -0600

categories: jekyll update

---

You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `bundle exec jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

```

layout의 경우 `_config.yml`에서 default로 설정해 두면 일일이 쓸 필요가 없고, 기타 등등을 제외하고 난 `title`, `tags`만 현재 사용한다. 글을 작성하면서 중간중간 확인하고 싶은 경우 `jekyll serve` command를 통해 local에서 직접 확인 할 수 있다. 기본적으로 `127.0.0.1:4000`으로 hosting된다.  

아래처럼 `--livereload`를 option으로 주면 변경내용이 바로 browser에 반영된다. 단 `_config.yml` 같은 경우는 rebuild가 필요해 종료 후 다시 실행해 주어야 한다.



이제 완료된 post를 commit하고 push해주면 게시되어 확인할 수 있다.([https://nukeguys.github.io](https://nukeguys.github.io))  

처음 본다면 따라하기 힘들겠지만 어느정도 이런 환경에 익숙하다면 참고된 링크들을 통해 더 많은 것들을 할 수 있을 것이라고 본다. 자세하게 쓰려면 너무 많아질 것 같아 첫 posting을 올려보는 것에 목적을 두고 작성해봤다. 이 글을 시작으로 많지는 않아도 꾸준한 글쓰기를 이어 나갈 수 있었으면 하는 바람이다.

## Reference

### GitHub Pages & Jekyll

GitHub Pages - [https://pages.github.com/](https://pages.github.com/)  

Jekyll - [https://jekyllrb-ko.github.io/](https://jekyllrb-ko.github.io/)  

Jekyll 테마 - [http://jekyllthemes.org/](http://jekyllthemes.org/)  

### 참고

kakao 기술 블로그가 GitHub Pages로 간 까닭은 - [http://tech.kakao.com/2016/07/07/tech-blog-story/](http://tech.kakao.com/2016/07/07/tech-blog-story/)  

오픈튜토리얼즈 - [https://opentutorials.org/module/2398/16117](https://opentutorials.org/module/2398/16117)  

깃허브 블로그 만들기 - [http://recoveryman.tistory.com/321](http://recoveryman.tistory.com/321)  

Jekyll 블로그 테마 적용하기 - [https://junhobaik.github.io/jekyll-apply-theme/](https://junhobaik.github.io/jekyll-apply-theme/)  

쉽고 빠르게 수준 급의 GitHub 블로그 만들기 - [https://dreamgonfly.github.io/2018/01/27/jekyll-remote-theme.html](https://dreamgonfly.github.io/2018/01/27/jekyll-remote-theme.html)  

### 예제

kakao - [http://tech.kakao.com/](http://tech.kakao.com/)  

우아한형제들 - [http://woowabros.github.io/](http://woowabros.github.io/)