jekyll ではじめる Static Web Site シリーズJekyll × Gruntでブログを作ってみた：環境構築編
はじめに
このブログの作るにあたり、Rubyをはじめとし様々なツールを覚えるきっかけになったので備忘録として残すことにしました。個人的な目標として、最先端な技術でなくとも一人でWebサービスを設計・構築・運営できる知識とスキルを持つことが目標なので、これを足がかりにRuby on Railsやテストについて学習の幅を広げていく予定です。
概要
プロジェクト毎に依存パッケージなどを固定するため、rbenvとbundlerの導入は必須です。Jekyllを動かすためにこの2つを導入し、使い方に慣れることでRuby on Railsを使ったアプリケーション開発の足がかりになります。
※本記事はTerminalを使ったCUI操作経験がある方を対象に書いています。
主なツール
※インデントは依存関係を表しています。
- Java：Homebrewに必要
- Xcode Command Line Tools：Homebrewに必要
- Homebrew：rbenvやImageMagickなどのパッケージ管理
- npm：node系のパッケージ管理：GruntやGulpなど
- Grunt：タスクランナー
実現する機能
- 開発
- Gruntパッケージの自動読み込みとタスクの個別管理
- ビルド結果をプレビューとリリースに分ける
- SCSS、bourbon/neatのコンパイル
- MediaQueriesの統合
- CSS/JavaScript/HTMLの圧縮
- JSファイルを1つにコンパイルする
- 執筆
- SyntaxHighlighterでソースコードを表示する
- markdownで記事を管理
- レスポンシブイメージの自動生成する（クロップを含む）
- 画像の軽量化
- プレビュー
- ブラウザでプレビュー（ライブリロード）
- ドラフト記事のプレビュー
- デプロイ
- Amazon S3にデプロイ（差分ファイルのみ）
- その他
- スタイルドキュメントの生成
ディレクトリ・ファイル構造
/
├── .bundle/
├── _grunt/
├── _jekyll/
├── release/
├── docs/
├── node_modules/
├── prev/
├── src/
├── vendor/
├── .gitignore
├── .ruby-version
├── Gemfile
├── package.json
├── Gruntfile.js
└── README.md
環境構築
細かい手順については説明を省きます。 説明が手間というのもありますが、これらの環境を自身で管理していく上で自分で調べつつ試行錯誤する体験は必要なものです。
Javaのインストール
Javaは入っていなければインストールするよう通知されるので、とりあえず以下のコマンドでバージョンチェックとインストールを済ませます。
$ java -version
Xcode Command Line Toolsのインストール
App StoreからXcodeをインストールして起動します。
Preferences（設定画面）のDownloadタブにあるCommand Line Toolsをインストールします。
Homebrewのインストール
参考：http://brew.sh/index_ja.html 公式の通り、コマンドラインからインストールを実行します。
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
正しく動作するか確認してみましょう。 このコマンドを実行するとHomebrewを使うために必要な改善箇所を指摘してくれます。
$ brew doctor
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry and just ignore them. Thanks!
Warning: Your Homebrew is outdated.
You haven't updated for at least 24 hours, this is a long time in brewland!
To update Homebrew, run `brew update`.
Warning: You have unlinked kegs in your Cellar
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
git
jq
Warning: Your Homebrew is outdated.
You haven't updated for at least 24 hours, this is a long time in brewland!
To update Homebrew, run `brew update`.
各Warningの最後に解決するためのコマンドbrew updateなどを指示してくれるのでかなり親切なツールです。
rbenvのインストール
参考：https://github.com/sstephenson/rbenv#homebrew-on-mac-os-x
rbenvのインストールは少し面倒です。 パス（$PATH）を通すということをあまり理解していなかったので、ここで引っかかりました。 素直にbashを使っている場合は問題ないと思いますが、zshを使っていたりするとパスの記述ファイルが変わるので注意が必要です。
パスについてあまり理解のない人は、まずパスについて勉強してみると良いと思います。
$ brew update
$ brew install rbenv ruby-build
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
正しくインストールされているかコマンドで確認します。
$ rbenv -v
rbenv 0.4.0
バージョン情報が帰ってくれば完了です。
特定のバージョンをインストールする
rbenvでプロジェクト毎にrubyのバージョンを管理できるようにするわけですが、使いたいバージョンのrubyを取得する必要があります。そんな時はrbenv intall -listでインストールできるバージョン一覧を取得します。
$ rbenv install -list
Available versions:
1.8.6-p383
1.8.6-p420
1.8.7-p249
1.8.7-p302
1.8.7-p334
1.8.7-p352
1.8.7-p357
...
rubyのインストール
バージョン一覧の中から必要なバージョンをメモってインストールコマンドを実行します。
$ rbenv install 2.1.0
インストールされているバージョンを知る
利用できるバージョン一覧を取得するにはrbenv versionsを使います。 *マークは現在PC上で基準（グローバル）となっているバージョンです。
$ rbenv versions
* system
2.1.0 (set by /Users/user-name/.rbenv/version)
rbenvのグローバルとローカル
rbenvにはグローバルとローカルという概念があり、グローバルが基準となりプロジェクト毎にローカル（ディレクトリ）で指定するバージョンがローカルとなります。ローカルでバージョンが指定されている場合、こちらが優先されます。
たとえば、PC上（グローバル）では1.9.0が基準になっているがこのプロジェクト（ローカル）では2.1.0を使いたいといった場合にグローバルとローカルを使い分けます。
バージョンを切り替える
グローバルのバージョンを切り替えるには以下のようにすでにインストールされているバージョンを指定してコマンドを実行します。
$ rbenv global 2.1.0
ローカルはglobalをlocalに変えるだけなので簡単ですね。
$ rbenv local 1.9.0
rbenvで何か変更を行ったら「rehash」
バージョンの切り替えやその他何らかの処理を行ったらrbenvを更新するためにrehashを行いましょう・
$ rbenv rehash
ローカルのruby上でgemのパッケージを管理する「bundler」
ここからさらにややこしくなります。rbenvでプロジェクト毎にrubyのバージョンを固定できることは理解できましたよね？SassやJekyllも普通にインストールするとグローバルにインストールされてしまうのでプロジェクト毎にバージョン管理をしたくなります。そこで使うのがbundlerです。ここからはサンプル用のディレクトリを作ってください。
$ mkdir example
$ cd example
$ rbenv install 2.1.0
$ rbenv rehash
今後はexampleディレクトリ内で作業します。
ローカルのruby用にbundlerをインストール
bundlerはgemからインストールすることができます。ここで注意しなければならないのは、ローカルのrubyに対して何かインストールするにはすべてrbenv経由でコマンドrbenv exec ...を実行しなければいけません。
bundlerをインストールするにはこのコマンドを実行します。
$ rbenv exec gem install bundler
インストールが完了したら保存場所も確認しておきましょう。 rbenvで管理されているrubyのバージョンに保存されてますね。
$ rbenv exec gem which bundler
/Users/user-name/.rbenv/versions/2.1.0/lib/ruby/gems/2.1.0/gems/bundler-1.7.2/lib/bundler.rb
ローカルにbundlerの環境を構築する
まずはGemの設定を記述するためにGemfileを作ります。
$ bundle init
ディレクトリ内にGemfileが作られたと思います。 このファイルにプロジェクトで利用するGemパッケージとバージョンを記述します。
source "https://rubygems.org"
gem "sass"
gem "bourbon"
gem "neat"
gem "jekyll", "~> 2.3.0"
bundlerでGemをローカルにインストール
普通にbundle installだけ行ってしまうとRuby環境に直接インストールさせてしまうため、インストール場所のパス--path vendor/bundleを指定します。
$ bundle install --path vendor/bundle
インストールが完了したらインストールされたgemを確認してみましょう。
$ bundle list
Gems included by the bundle:
* blankslate (2.1.2.4)
* bourbon (4.0.2)
* bundler (1.7.2)
* celluloid (0.15.2)
* classifier-reborn (2.0.1)
* coffee-script (2.3.0)
* coffee-script-source (1.7.1)
* colorator (0.1)
* execjs (2.2.1)
* fast-stemmer (1.0.2)
* ffi (1.9.3)
* jekyll (2.3.0)
* jekyll-coffeescript (1.0.0)
* jekyll-gist (1.1.0)
* jekyll-paginate (1.0.0)
* jekyll-sass-converter (1.2.0)
* jekyll-watch (1.1.0)
* kramdown (1.4.1)
* liquid (2.6.1)
* listen (2.7.9)
* mercenary (0.3.4)
* neat (1.6.0)
* parslet (1.5.0)
* posix-spawn (0.3.9)
* pygments.rb (0.6.0)
* rb-fsevent (0.9.4)
* rb-inotify (0.9.5)
* redcarpet (3.1.2)
* safe_yaml (1.0.3)
* sass (3.3.14)
* thor (0.19.1)
* timers (1.1.0)
* toml (0.1.1)
* yajl-ruby (1.1.0)
しっかりインストールされていますね。
npmのインストール
npmを利用するにはnode.jsが必要です。node.jsはインストーラーが用意されているのでダウンロードしてインストールするだけです。
$ npm -v
1.4.14
プロジェクトの作成
npmのプロジェクトを作成しましょう。npmではインストールするパッケージをpackage.jsonで管理します。このpackage.jsonはnpmに用意されたコマンドで質問に答えるかたちで自動生成できます。質問内用はこちらを参考にしてください。
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (ProjectName)
version: (1.0.0)
description:
entry point: (index.js) Gruntfile.js
test command:
git repository:
keywords:
author: nukos
license: (ISC)
About to write to /Users/nukos/Projects/Labs/blog.jekyll/package.json:
{
"name": "ProjectName",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "nukos",
"license": "ISC"
}
Is this ok? (yes)
.gitignoreについて
gitで管理するために.gitignoreを用意しましょう。 とりあえずは以下のファイルを除外しておくと良いと思います。必要に応じて追記してください。
$ vi .gitignore
/.DS_Store
/.sass-cache
/node_modules
/bower_components
#bundler
/.bundle
/*.lock
/vendor/bundle
Gruntのインストール
Gruntはnpmパッケージなのでnpmを使ってインストールします。npmにはrbenvやbundlrを入れなくともグローバル、ローカルの管理が行えます。-gを指定することでグローバルを指定したことになります。また、--save-devをつけることで先ほど作ったpackage.jsonに自動で書き込んでくれます。
$ sudo npm install -g grunt-cli
grunt-cli@0.1.13 /Users/nukos/.nodebrew/current/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)
これでベース環境の構築は完了です。
次回はGruntの環境についてより詳しく紹介していきます。