Jekyll がブログとしてとりあえず機能するまでを書いてみました。

  1. Jekyll のインストール
  2. jekyll-template を利用
  3. scss | sass のインストール
  4. pygmentize(シンタックスハイライト)の設定
  5. RSS フィード機能を設定

こんな感じで進めます。

お世話になったサイト

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

前準備

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

主な環境

  • Mac OS X 10.8.4
  • ruby 1.9.3p429
  • Jekyll 1.0.3

Jekyll インストール開始

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

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

Gemfileに以下を追加

jekyll をインストール

jekyll-template の利用

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

jekyll-template のインストール

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

とりあえず実行(失敗)

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

_config.yml の exclude に vender を追加するといいようです。
(アンダースコア(_)は半角です。)

もう一度 実行

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

scss | sass をインストール

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

Gemfileに追加

インストール

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

プラグインを追加

_config.yml に追加

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

pygmentize(シンタックスハイライト)を使う

cssフォルダは assets というフォルダの中に css というフォルダを作り、
シンタックスハイライト用の CSS を書き出します。

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

{% highlight ruby linenos %}
ここにコード記述
{% endhighlight %}
({}は全角で記述しているので半角に修正してください。)

RSS フィード

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

基本的な設定は以上です。後はデザインでcssを頑張るのみです。

制作したアスタデザインのブログも見てみてくださいね。
アスタデザインのブログ

こういうブログもありました。

人気のあるブログ: