GitHub Pages で Jekyll を使う

GitHub Pages で Jekyll を使う

# 1. 事前準備

## 依存パッケージをインストールする

[Using Jekyll with Pages](https://help.github.com/articles/using-jekyll-with-pages/) を見ながら必要なパッケージをインストールします。
- Ruby = 1.9.3 or = 2.0.0
- Bundler
- Jekyll
- git
- openssl

## username.github.io リポジトリの作成

githubで予めリポジトリを作成しておいてください。

```bash
$ git clone git@github.com:USERNAME/USERNAME.github.io.git
$ cd USERNAME.github.io.git
```

## 1.a Ubuntu 14.04 (32bit)

Ubuntu 14.04 の場合

### Ruby

1. rubyはrbenvで管理したいと思います。まずは必要なパッケージをインストール。

    ```bash
    $ sudo apt-get clean
    $ sudo apt-get update
    $ sudo apt-get install git libssl-dev libxml2-dev libxslt-dev g++
    ```
2. [sstephenson/rbenv · GitHub](https://github.com/sstephenson/rbenv#installation) の通りに rbenv をインストールします。

    ```bash
    $ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
    $ cat <<'_EOT_' >> ~/.profile

    # rbenv
    export PATH="${HOME}/.rbenv/bin:${PATH}"
    eval "$(rbenv init -)"
    _EOT_
    ```

    ここまで上手く行くとこんな出力が出る

    ```bash
    $ type rbenv
    rbenv は関数です
    rbenv () 
    { 
        local command;
        command="$1";
        if [ "$#" -gt 0 ]; then
            shift;
        fi;
        case "$command" in 
            rehash | shell)
                eval "`rbenv "sh-$command" "$@"`"
            ;;
            *)
                command rbenv "$command" "$@"
            ;;
        esac
    }
    ```
3. 続けて [ruby-build](https://github.com/sstephenson/ruby-build#readme) のインストール

    ```bash
    $ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
    ```
4. いよいよ ruby のインストールです。今回は 2.0.0-p576 を入れます。ビルドするのでそれなりに時間がかかります。
ちなみにインストール可能なリストは `rbenv install -l` で出せます。

    ```bash
    $ rbenv install 2.0.0-p576
    ```
5. インストールが終わったらインストールしたバージョンを有効にします。

    ```bash
    $ rbenv versions
      2.0.0-p576
    $ rbenv global 2.0.0-p576
    $ rbenv versions
    * 2.0.0-p576 (set by ${HOME}/.rbenv/version)
    ```

### Bundler

gemでインストールします。

```bash
$ rbenv exec gem update
(略)
rake's executable "rake" conflicts with /home/nobuho/.rbenv/versions/2.0.0-p576/bin/rake
Overwrite the executable? [yN] N
(略)
rdoc's executable "rdoc" conflicts with /home/nobuho/.rbenv/versions/2.0.0-p576/bin/rdoc
Overwrite the executable? [yN] N
(略)
$ rbenv exec gem install bundler
Fetching: bundler-1.7.4.gem (100%)
Successfully installed bundler-1.7.4
Parsing documentation for bundler-1.7.4
Installing ri documentation for bundler-1.7.4
1 gem installed
```

# 2. Jekyll のインストール

## Gemでインストール

```bash
$ cd USERNAME.github.io.git
$ rbenv local 2.0.0-p576
$ cat <<_EOT_ > Gemfile
source 'https://rubygems.org'

ENV['NOKOGIRI_USE_SYSTEM_LIBRARIES'] = 'YES'

gem 'libv8', '= 3.3.10.4'
gem 'execjs'
gem 'therubyracer', '= 0.10.2'
gem 'github-pages'
gem 'jekyll'
_EOT_
$ bundle install --path vendor/bundle
```

## 設定

```bash
cat <<_EOT_ > _config.yml
highlighter: pygments
github: [Repository metadata]
safe: true
lsi: false
exclude: ['vendor', 'Gemfile', 'Gemfile.lock', '.ruby-version', '.gitignore', '.bundle', '.git', 'LICENSE']

gems:
    - jekyll-mentions
#    - jemoji
    - jekyll-redirect-from
    - jekyll-sitemap
_EOT_
```

## Hello, world

```bash
mkdir _posts
cat <<_EOT_ > _posts/2014-10-24-hello.md
---
layout: post
title: Hello
categories: [test]
tags: [test]
---

Hello, world!

_EOT_
```

## 起動

```bash
$ bundle exec jekyll serve
```

レイアウトファイルとかが無いのでWarningが出ますが、
http://0.0.0.0:4000/test/2014/10/24/hello.html でアクセスできます。
後はデザインをどうにかしないとね……

## github-pagesで公開

```bash
$ git add .
$ git commit -m 'first commit'
$ git push
```

しばらく待つと github.io でアクセスできるようになります。
http://USERNAME.github.io/test/2014/10/24/hello.html

# 参考

- [Using Jekyll with Pages](https://help.github.com/articles/using-jekyll-with-pages/)
- [sstephenson/rbenv · GitHub](https://github.com/sstephenson/rbenv)
- [sstephenson/ruby-build · GitHub](https://github.com/sstephenson/ruby-build)
- [Installation](http://jekyllrb.com/docs/installation/)
- [installing with native extensions stall · Issue #62 · cowboyd/libv8](https://github.com/cowboyd/libv8/issues/62#issuecomment-11410890)