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 の利用

1から作るよりテンプレートを利用した方が早く良いものが作れそうなので 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を頑張るのみです。

Comments

blog comments powered by Disqus