既存のJekyll環境にBootstrapを適用する方法

• 概要
• 環境
• 各種設定
  • Jekyll Bootstrapの適用
  • 広告を外す
  • そのままでは移植できなかったフォーマット
  • その他設定箇所

概要

Jekyllをそのまま使っていてちょっとデザインが味気ない場合にBootstrapを適用することができるのでその方法をご紹介します
バージョンによって設定方法が変わる可能性がありますのでご了承ください

環境

• Ruby 1.9.3p286
• Jekyll 1.2.1
• Jekyll Bootstrap 0.3.0

各種設定

Jekyll Bootstrapの適用

既存の環境はこんな感じです

[root@localhost jekyll]# ls -ltr
合計 28
-rw-r--r--  1  134 10月 15 16:56 2013 _config.yml
drwxr-xr-x  4 4096 11月 11 11:23 2013 assets
drwxr-xr-x  3 4096 11月  7 13:30 2014 _posts
drwxr-xr-x  2 4096 11月 11 15:25 2014 _layouts
-rw-r--r--  1  500 11月 11 15:29 2014 index.md
drwxr-xr-x 74 4096 11月 11 15:29 2014 _site

• デフォルトからほぼ変更していない状態
• index.mdとassets配下にcssを若干置いたくらい
• _layouts配下も記事のテンプレートとなるHTMLと若干のcssがある
• _post配下には記事となるmdファイルがたくさんある

この状態から

git clone 'https://github.com/plusjade/jekyll-bootstrap.git'
cp -ipr _posts/* jekyll-bootstrap/_posts
cd jekyll-bootstrap/
jekyll build
jekyll server

とすればhttp://hostname:4000でJekyll Bootstrapが適用されたUIが確認できると思います
基本的には_posts配下の記事を移動するだけです

ビルドした際にエラーが出る場合は_postsディレクトリ配下に移動したmarkdownファイル内に使用できない文字が含まれていたりmarkdownファイルのフォーマットがおかしい可能性があるのでエラーの内容を確認してmarkdownファイルを修正してください

ここまでがJekyll Bootstrapの適応に必要な作業です
適用すること自体は非常に簡単でした
以下は必要に応じて作業してください

広告を外す

どうやらJekyll Bootstrapはコメント機能にDisqusを使っているようです
デフォルトだとDisqusの広告機能が有効になっておりアダルトやらbillの広告多数あります
外す方法はこちら参考にしてみてください

そのままでは移植できなかったフォーマット

_postsファイル配下にmarkdownファイルを移動した際にエラーとなったので対処しました

• `（backticks）が使えない
  デフォルトだと使えません
  以下の手順でredcarpet2というJekyllPluginをインストールする必要があります

gem install albino redcarpet

cd jekyll-bootstrap
git clone https://github.com/nono/Jekyll-plugins.git
mv Jekyll-plugins/redcarpet2_markdown.rb _plugins/
rm -rf Jekyll-plugins/

そして_config.ymlに対して以下を追記します

markdown: redcarpet 
redcarpet: 
    extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"] 

これでGithubFlavorのようにソースコードを表示するときのbacktickts3つが使えるようになります

その他設定箇所

• _config.yml
  
  • title, authorを変更
  • comments, analyticsをコメントアウト
    
    • commentsの設定箇所をコメントアウトすれば
  • BASE_PATHの設定
    
    • /以外がindex.htmlにある場合に設定してください
    • ビルドする際はjekyll build --safeオプションを指定してください（指定しないとBASE_PATHがうまく反映されませんでした）
    • BASE_PATH: /blog
• トップ画面の不要部分を削除（index.md）
  
  • titleの変更
  • taglineのSupporting taglineを削除
  • Read ~ Sample Postsまでを削除
  • TODO部分の削除
• 不要ファイルの削除
  
  • _posts/core-samples/2011-12-29-jekyll-introduction.mdの削除
  • pages.html, categories.html の削除（ヘッダのナビゲーションバーもなくなります）
• 検索フォームの削除
  
  • _includes/themes/bootstrap-3/default.html内でフォームを管理しているのでその部分を削除
    
    • 検索機能がうまく動作しなかったので外しました

以上です
Jekyllは便利ですね