Jekyllのインストール

Jekyll がブログとしてとりあえず機能するまで。

お世話になったサイト

非常に分かりやすく丁寧に書いてあり、ほんと参考になりました。ぜひ訪問してみてくださいね。

前準備

作業は主に黒い画面（ターミナル）で行います。

主な環境

Mac OS X 10.8.4
ruby 1.9.3p429
Jekyll 1.0.3

ブログを作るディレクトリを作って、移動

1 $ mkdir myblog
2 $ cd myblog

jekyll をインストールする準備

1 $ bundle init

Gemfileに以下を追加

1 $ emacs Gemfile
2 gem 'jekyll'
3 gem 'redcarpet'

jekyll をインストール

1 $ bundle install --path vender/bundle

jekyll-template の利用

１から作るよりテンプレートを利用した方が早く良いものが作れそうなので jekyll-template を使わせてもらうことにします。

jekyll-template のインストール

1 $ cd ..
2 $ git clone https://gitfub.com/krisb/jekyll-template.git
3 $ rsync -av --progress jekyll-template/ myblog/ --exclude .git --exclude README.md
4 $ cd myblog

jekyll-template の内容が myblog の中へ同期されました。

とりあえず実行（失敗）

1 $ bundle exec jekyll serve --watch

こういったエラーが出ました。

1 Generating...
2        ERROR: YOUR SITE COULD NOT BE BUILT:
3               ------------------------------------
4               Post 0000-00-00-welcome-to-jekyll.markdown.erb does not have a valid date.

＿config.yml の exclude に vender を追加するといいようです。

1 $ emacs _config.yml
2 exclude: ['Rakefile', 'README.md', 'config.rb', 'vender']

もう一度実行

1 $ bundle exec jekyll serve --watch

今度は動いたようです。ブラウザで http://localhost:4000/ にアクセスしたら表示出来ました。

scss | sass をインストール

css の編集では scss を使いたいので jekyll-sass をインストールします。

Gemfileに追加

1 $ emacs Gemfile
2 gem 'jekyll-sass'       #追加

インストール

1 $ bundle install --path vender/bundle

プラグインを格納するフォルダを作成

1 $ mkdir _plugins

プラグインを追加

1 $ emacs _plugins/bundler.rb
2 require 'rubygems'       #追加
3 require 'bundler/setup'       #追加
4 Bundler.require( :default )       #追加

＿config.yml に追加

1 $ emacs _config.yml
2 sass:                                 #追加
3   syntax: scss        # scss|sass                  #追加
4   style:  compressed  # nested|expanded|compact|compressed       #追加

これで scss が使えるようになるはずです。

シンタックスハイライト

cssフォルダは assets というフォルダの中に css というフォルダを作りました。

1 $ pygmentize -S default -f html > assets/css/syntax.css

コードをこんな感じで挟んで使います（Ruby の場合）。

｛% highlight ruby linenos %｝
ここにコード記述
｛% endhighlight %｝
（｛｝は全角で記述しているので半角に修正してください。）

RSS フィード

snaptortoise / jekyll-rss-feeds こちらを使わせていただきます。ダウンロードしたら feed.xml を myblog フォルダの直下へ移動し、編集します。

1 $ emacs _config.yml
2 name: 【ブログ名】       #追加
3 description: 【ブログの説明】       #追加
4 url: 【URL】       #追加

こんな感じで実行して、このブログが出来上がりました。後はデザインでcssを頑張るのみです。

Jekyllいつやるの？ジキやルの？今でしょ！
JekyllをStep by Stepで使って理解する再度の紹介になりますが、Jekyllサイトの作り方などこちらがすごく詳しいです。