Middleman + Foundation + Amazon S3 でのBlogサイト構築(4)Blogサイトの設定

前回はBowerを使ってFoundation等のフロントエンドライブラリをインストールする手順を記載しました。今回はBlogの設定やビルドの設定に関して記載します。ここで記載した設定は全てオプションで、必須ではありません。デフォルト設定のままBlogを運用することも可能です。(唯一タイムゾーンの設定は事実上必須と言えます。)

gemインストール

あるとうれしいライブラリ(gem)をいくつかインストールします。

middleman-livereloadはmiddlemanでLiveReloadを使うための公式拡張です。Livereloadを有効化しておくとファイル編集＆保存時に自動でブラウザをリロードしてくれるのでローカル環境での作業が捗ります。

NokogiriはHTMLやXMLをパースするためのライブラリです。詳しくは次回以降に書く予定ですが、Blog記事の要約を取得するために使います。(記事の冒頭の200文字を抜き出す、といった使い方です。)

redcarpetはmarkdown用のライブラリです。middlemanのデフォルトのmarkdownエンジンはkramdownですが、githubと同じ記法が使える、という理由で今回はredcarpetを使うことにしました。

gemはBundlerを使ってインストールします。middleman init実行時にプロジェクトフォルダ直下にGemfileが生成されているので、これにパッケージ名を追加します。 (middleman、middleman-blog、builderのgemの定義はmiddleman init実行時に自動で追加されています。)

source 'http://rubygems.org'

gem "middleman", "~> 3.2.1"
gem "middleman-blog", "~> 3.5.1"
gem "middleman-livereload"  # 追加
gem "nokogiri"  # 追加
gem "redcarpet" # 追加

# For feed.xml.builder
gem "builder", "~> 3.0"

この状態で以下のコマンドを実行します。

$ bundle install --path vendor/bundle

これでvendor/bundleディレクトリにmiddleman-livereloadとnokogiriがインストールされます。加えて既にgem installコマンドでシステムワイドに(rbenvでrubyをインストールしている場合は~/.rbenv以下に)インストール済みだった、middlemanやmiddlemanが依存するgem群も再度vendor/bundleにインストールされます。

こうしておくとプロジェクト毎にgemを管理できるので、私はやったことはありませんが、例えば特定プロジェクトでだけgemにパッチを適用したい場合などに有用かと思います。

なお、--pathで指定したディレクトリは以下のようにプロジェクトフォルダ下の.bundle/configにBundlerの設定として保存されるので、次回以降はbundle installだけでvendor/bundleにgemがインストールされるようになります。

---
BUNDLE_PATH: vendor/bundle
BUNDLE_DISABLE_SHARED_GEMS: '1'

BUNDLE_DISABLE_SHARED_GEMS: '1'はシステムにインストールされているgemは使わない(つまり該当のgemがシステムにインストールされていてもvendor/bundleにインストールする)という意味です。

Blogの設定

middlemanの設定ファイルはconfig.rbです。これにサイト全体の設定を書いていきます。設定のいくつかはデフォルト値がコメントアウトされた形で書かれているので、必要に応じてコメントを外して値を修正していきます。

まずはタイムゾーンを設定します。Blogの公開日時に関連してくるので、冒頭で述べたとおり必ず設定しておいた方がよい項目です。

Time.zone = "Tokyo"

Blogに関する設定はactivate :blog do...endのブロックに書いていきます。今回は以下を設定しました。

activate :blog do |blog|
  # blogのパスにprefixを付加
  blog.prefix = "blog"

  # blog記事用のレイアウトファイルを指定
  blog.layout = "blog_post"

  # ページネーション設定
  blog.paginate = true
  blog.per_page = 10
  blog.page_link = "page/{num}"
end

デフォルトではBlog記事のパスは/(Web サイトのルート)ですが、これを/blog/に変更しています。プロジェクトのディレクトリ構成もこれに合わせて変更しておきます。sourceディレクトリの下にblogという名前でディレクトリを新規作成し、ここにBlog記事を作成していきます。 blog.layoutはBlog記事のページに特定のレイアウトを適用するための設定です。最後の3行はページネーションの設定です。1ページあたりのBlog記事の最大表示数を10としています。この辺りの設定は次回以降、ブログのレイアウト作成手順でもう少し詳しく触れたいと思います。

更にディレクトリインデックスを有効化しておきます。この設定はactivate :blog do...endの外に書きます。

activate :directory_indexes

これによりhttp://nmbr8.com/blog/2014/01/06/blog_title/blog_title.htmlがhttp://nmbr8.com/blog/2014/01/06/blog_title/というURLでアクセスできるようになります。URLの見た目の問題ですね。仕組みとしては単純で、build時にBlog記事の本体がindex.htmlというファイル名となるので、URL上ファイル名を省略してもWebサーバが自動的にindex.htmlを読み込んでくれる、というわけです。(index.htmlを自動で読み込むか否かは、厳密にはWebサーバの設定によりますが。)

Livereloadの有効化

middleman-livereloadを使うには、これを有効化しておく必要があります。

activate :livereload

加えてWebブラウザ側にLivereload用の拡張機能をインストールしておく必要があります。

Markdownの設定

markdownエンジンにredcarpetを指定します。オプション設定として、コードブロックとテーブル記法を有効化しています。smartypantは引用符(“または’)やドット(…)をHTML実体参照に変換するための設定です。

set :markdown_engine, :redcarpet
set :markdown, fenced_code_blocks: true, tables: true, smartypants: true

hamlの設定

今回のBlogサイトではテンプレートエンジンにhamlを使うので、hamlの設定も追加しておきます。

set :haml, { ugly: true, format: :html5 }

ugly: trueを設定しておかないと、コードブロック内のコードに意図しないインデントが含まれてしまいます。なお、middlemanではhamlはデフォルトで使用可能なので、テンプレートエンジンにhamlを指定する、というような設定は不要です。

Buildの設定

cssとjavascriptファイルのミニファイを有効化しておきます。加えてasset_hashも有効化しておきます。これはjavascript、css、画像のようなアセットファイルの内容を変更する度にファイル名を変更してくれる機能です。これによりブラウザ上の古いキャッシュが破棄されるので、レイアウトを変更したけどブラウザ側に反映されない、というような事態の防止になります。設定はconfigure :build do...endブロックに書きます。

configure :build do

  # cssファイルのミニファイ
  activate :minify_css

  # javascriptファイルのミニファイ
  activate :minify_javascript

  # asset_hash の有効化
  activate :asset_hash
end

アセットパイプラインの設定

Bowerでインストールしたフロントエンドライブラリを読み込むには、@import "vendor/bower_components/foundation/foundation.css"のようにcssやjsファイルのパスを指定する必要があるので、ちょっと面倒です。以下のようにvendor/bower_componentsディレクトリをアセットパスに追加しておくと、これを簡略化できます。

sprockets.append_path '../vendor/bower_components'

これでvendor/bower_components/foundation/foundation.cssであれば@import "foundation"というようにライブラリ(が格納されているディレクトリ)名だけでインポートできるようになります。

ただし、sprockets.append_path '../vendor/bower_components'だと/bower_components/<ライブラリ名>の直下までしかファイルの検索対象になりません。BowerでインストールしたFoundationのライブラリにはcss版とsass版のファイルが含まれているのですが、今回はsassを使ってカスタマイズをやっていきたいので、後者(sass版)のファイルが含まれているディレクトリをアセットパスに追加しておきます。

sprockets.append_path '../vendor/bower_components/foundation/scss'

これで@import "foundation"でvendor/bower_components/foundation/scss/foundation.scssがインポートされるようにになります。同じようにFont Awesomeについてもscssと、加えてfontファイルをアセットパスに追加しておきます。

sprockets.append_path '../vendor/bower_components/font-awesome/scss'
sprockets.append_path '../vendor/bower_components/font-awesome/fonts'

これらの設定はafter_configuration do...endブロックに書くのが良いようです。公式サイトではready do...endブロックに書くことが案内されていますが、ビルド時にはこのready do...endが実行されないようで、ビルドエラーとなってしまいました。。これらのコールバックの実行タイミングや役割についてはよく理解出来ていないので、別途調査したいと思っています。

またアセットパスは最初のパスが後のパスよりも優先されるので、最終的な設定は以下のようになりました。

after_configuration do
  sprockets.append_path '../vendor/bower_components/foundation/scss'
  sprockets.append_path '../vendor/bower_components/font-awesome/scss'
  sprockets.append_path '../vendor/bower_components/font-awesome/fonts'
  sprockets.append_path '../vendor/bower_components'
end

今回のBlogサイトでの基本設定は以上です。この他デフォルトで有効化されている設定もいくつかあります。それらを含めて、かつコメント行を除くと、config.rbは以下のようになりました。

Time.zone = "Tokyo"

activate :blog do |blog|
  blog.prefix = "blog"
  blog.layout = "blog_post"
  blog.tag_template = "tag.html"
  blog.calendar_template = "calendar.html"

  blog.paginate = true
  blog.per_page = 10
  blog.page_link = "page/{num}"
end

page "/feed.xml", layout: false

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

activate :livereload
set :markdown_engine, :redcarpet
set :markdown, fenced_code_blocks: true, tables: true, smartypants: true
set :haml, { ugly: true, format: :html5 }

after_configuration do
  sprockets.append_path '../vendor/bower_components/foundation/scss'
  sprockets.append_path '../vendor/bower_components/font-awesome/scss'
  sprockets.append_path '../vendor/bower_components/font-awesome/fonts'
  sprockets.append_path '../vendor/bower_components'
end

configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :asset_hash
end

まとめ

middlemanやBlog機能の設定については公式サイトに詳しく載っているので、ひと通り目を通しておくのが良いかと思います。また今回追加したgem以外に、コメント欄やS3へのデプロイ、シンタックスハイライトのためのgemや設定も追加したのですが、それらについては次回以降に触れたいと思います。

参考サイト