2015年11月16日月曜日

Jekyll に theme を適用する方法

概要

Jekyll のデザインには様々なテーマが公開されており、これを使って簡単にデザインをカスタマイズすることができます
今回はテーマを使って jekyll build する方法を紹介します

環境

  • Mac OS X 10.10.5
  • Jekyll 2.5.3

テーマを適用してみる

http://jekyllthemes.org/ から好きなテーマを選択してください
今回は Jekyll Now というテーマを使ってみます

  • mkdir -p jekyll/work
  • cd jekyll/work
  • git clone https://github.com/barryclark/jekyll-now.git
  • gem install jekyll-sitemap
  • cd jekyll-now
  • jekyll server

で起動まで実施します
途中サイトマップを表示するためのプラグインをインストールしています
jekyll server を実行すると localhost:4000 で LISTEN するのでブラウザでアクセスしてみましょう

今回のテーマだと以下のようなサイトが表示されると思います
jekyll-apply-theme.png

ちょっとカスタマイズする

名前を変更する

  • emacs jekyll/work/jekyll-now/_config.yml

name: Your Name

を編集して再度 jekyll server すれば変更できます

記事をポストする

  • cd jekyll/work/jekyll-now
  • cp _posts/2014-3-3-Hello-World.md _posts/2015-11-16-sample-post.md
  • emacs _posts/2015-11-16-sample-post.md

jekyll server を実行すれば (内容は特に変更しなくても) 記事が増えていることが確認できると思います
あとはこんな感じで markdown ファイルを増やしていけば OK です

ビルドする

サイトなどで公開するための HTML ファイルを生成します

  • cd jekyll/work/jekyll-now
  • jekyll server

_site というディレクトリ配下に HTML や CSS が作成されるのでそれをそのまま Web サーバの DocumentRoot に配置すれば OK です

最後に

既存の Jekyll に対して適用するやり方は今回紹介しませんでしたが、おそらく _posts 配下にある .md ファイルを一旦退避し、テーマをダウンロード後に _posts ファイルに移動すれば適用できるはずです
プラグインを使って記載されている markdown やレイアウトがある場合はプラグインの再インストールも必要になると思います

特にデザインを自分でゴリゴリ作成したいということでなければ、テーマをベースに作成するといいと思います
レイアウトや 404 ファイルなどサイトの公開に必要なファイルは一通りそろっている状態なので、これをベースにカスタマイズしたほうがいいと思います

自分で作成したテーマはもちろん jekyllthemes.org で公開することもできます

あと Jekyll 3.0 が 2015/10/26 に正式にリリースされましたが、 3.0 だともしかしたらエラーになるテーマがあるかもしれません

0 件のコメント:

コメントを投稿