Jekyllのインストールでやったこと

お世話になったサイト

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

• Jekyllいつやるの？ジキやルの？今でしょ！
• JekyllをStep by Stepで使って理解する

前準備

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

主な環境

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

Jekyll インストール開始

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

[shell]
$ mkdir myblog
$ cd myblog
[/shell]

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

[shell]
$ bundle init
[/shell]

Gemfileに以下を追加

[shell]
$ emacs Gemfile
gem ‘jekyll’ #追加
gem ‘redcarpet’ #追加
[/shell]

jekyll をインストール

[shell]
$ bundle install –path vender/bundle
[/shell]

jekyll-template の利用

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

jekyll-template のインストール

[shell]
$ cd ..
$ git clone https://github.com/krisb/jekyll-template.git
$ rsync -av –progress jekyll-template/ myblog/ –exclude .git –exclude README.md
$ cd myblog
[/shell]
jekyll-template の内容が myblog の中へ同期されました。

とりあえず実行（失敗）

[shell]
$ bundle exec jekyll serve –watch
[/shell]
こういったエラーが出ました。
[shell]
Generating…
ERROR: YOUR SITE COULD NOT BE BUILT:
————————————
Post 0000-00-00-welcome-to-jekyll.markdown.erb does not have a valid date.
[/shell]

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

[shell]
$ touch _config.yml
$ emacs _config.yml
exclude: [‘Rakefile’, ‘README.md’, ‘config.rb’, ‘vender’]
[/shell]

もう一度 実行

[shell]
$ bundle exec jekyll serve –watch
[/shell]
今度は動いたようです。
ブラウザで
http://localhost:4000/
にアクセスしたら表示出来ました。

scss | sass をインストール

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

Gemfileに追加

[shell]
$ emacs Gemfile
gem ‘jekyll-sass’ #追加
[/shell]

インストール

[shell]
$ bundle install –path vender/bundle
[/shell]

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

[shell]
$ mkdir _plugins
[/shell]

プラグインを追加

[shell]
$ emacs _plugins/bundler.rb
require ‘rubygems’ #追加
require ‘bundler/setup’ #追加
Bundler.require( :default ) #追加
[/shell]

＿config.yml に追加

[shell]
$ emacs _config.yml
sass: #追加
syntax: scss # scss|sass #追加
style: compressed # nested|expanded|compact|compressed #追加
[/shell]

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

pygmentize（シンタックスハイライト）を使う

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

[shell]
$ mkdir -p assets/css
$ pygmentize -S default -f html > assets/css/syntax.css
[/shell]

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

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

RSS フィード

snaptortoise / jekyll-rss-feeds こちらを使わせていただきます。
ダウンロードしたら feed.xml を myblog フォルダの直下へ移動し、＿config.ymlを再度編集します。
[shell]
$ emacs _config.yml
name: 【ブログ名】 #追加
description: 【ブログの説明】 #追加
url: 【URL】 #追加
[/shell]

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

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

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

関連記事:

Coda2でscssを使うときのお供にcompassをどうぞ。 Jekyll で静的ブログサイトを作れます Rails製のショッピングカートシステム Spree Adminページでエラー Markdownを使うためにCoda2にインストール Rails製のショッピングカートシステム Spree インストール編 Jekyllというブログソフトを使う