More than 5 years have passed since last update.

GitHub Pages で Jekyll を使う

Last updated at 2014-10-24Posted at 2014-10-24

1. 事前準備

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

Using Jekyll with Pages を見ながら必要なパッケージをインストールします。

Ruby = 1.9.3 or = 2.0.0
Bundler
Jekyll
git
openssl

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

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

$ 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

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

$ sudo apt-get clean
$ sudo apt-get update
$ sudo apt-get install git libssl-dev libxml2-dev libxslt-dev g++

sstephenson/rbenv · GitHub の通りに rbenv をインストールします。

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

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

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

$ 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
}

続けて ruby-build のインストール

$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

いよいよ ruby のインストールです。今回は 2.0.0-p576 を入れます。ビルドするのでそれなりに時間がかかります。
ちなみにインストール可能なリストは rbenv install -l で出せます。
```
$ rbenv install 2.0.0-p576
```

インストールが終わったらインストールしたバージョンを有効にします。

$ 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でインストールします。

$ 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でインストール

$ 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

設定

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

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

Hello, world!

_EOT_

起動

$ bundle exec jekyll serve

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

github-pagesで公開

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

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

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up