カテゴリー:
nanoc
タグ:
 nanoc reilas 静的サイト

このエントリーをはてなブックマークに追加
更新日時:
2015年09月03日(木)
作成日時:
2015年09月03日(木)

前の記事 / 次の記事

何をもってRailsっぽいとするかですが、
次のことを実現しようとしています。

  • htmlをhamlかマークダウンでコーディングしたい
  • cssをsassでコーディングしたい
  • JavaScriptをcoffee-scriptでコーディングしたい
  • css, jsファイルはそれぞれ1つのファイルに結合されて欲しい(sprocketsを使いたい)
  • コードを変更したら即座に反映されて欲しい(毎回"bundle exec nanoc"したくない)

参考ページ

目次

インストール編

  1. nanocのインストール
  2. 各gemのインストール

設定編

  1. hamlの設定
  2. kramdownの設定
  3. sass, coffee-scriptの設定(sprocketsの設定)
  4. 自動コンパイルの設定

インストール編

1.nanocのインストール

railsのように bundle exec rains new . できないので
一旦適当なディレクトリにnanocをインストールする。

$ mkdir nanoc
$ cd nanoc
$ vim Gemfile
source 'https://rubygems.org'

gem 'nanoc'

$ bundle install --path vendor

目的のサイトを生成

$ bundle exec nanoc create-site hawai
  create  nanoc.yaml
  create  Rules
  create  content/index.html
  create  content/stylesheet.css
  create  layouts/default.html

2.各gemのインストール

cd hawai
$ vim Gemfile
source 'https://rubygems.org'

gem 'nanoc'

gem 'haml'
gem 'sass'
gem 'coffee-script'
gem 'kramdown'

gem 'uglifier'    # JavaScript圧縮
gem 'sprockets'   # css, js結合
gem 'sprockets-helpers'
gem 'nanoc-sprockets-filter'

gem 'adsf'        # Webサーバ
gem 'guard-nanoc' # 自動更新

設定編

1.hamlの設定

拡張子がhamlであるファイルがコンパイルされたらhamlフィルターを通るようにする。

$ vim Rules
compile "/*" do
  next if item.binary?

  case item[:extension]
  when /haml\Z/
    filter :haml  # ココ
    layout 'default'

  else
    filter :erb
    layout 'default'
  end
end

route "/*"
  if item[:extension] == 'css'
    # Write item with identifier /foo/ to /foo.css
    item.identifier.chop + '.css'

  elsif item[:extension] == 'js'
    # Write item with identifier /foo/ to /foo.js
    item.identifier.chop + '.js'

  elsif item.binary?
    # Write item with identifier /foo/ to /foo.ext
    item.identifier.chop + (item[:extension] ? '.' + item[:extension] : '') 

  else
    # Write item with identifier /foo/ to /foo/index.html
    item.identifier + 'index.html'
  end
end

layout '*', :erb

2.kramdownの設定

拡張子がmdであるファイルをコンパイルされたらkramdownフィルターを通るようにする。

$ vim Rules
compile "/*" do
  next if item.binary?

  case item[:extension]
  when /haml\Z/
    filter :haml
    layout 'default'

  when /md\Z/
    filter :kramdown  # ココ
    layout 'default'
  end
end

# 以下は変更無し

route "/*"
  if item[:extension] == 'css'
    # Write item with identifier /foo/ to /foo.css
    item.identifier.chop + '.css'

  elsif item[:extension] == 'js'
    # Write item with identifier /foo/ to /foo.js
    item.identifier.chop + '.js'

  elsif item.binary?
    # Write item with identifier /foo/ to /foo.ext
    item.identifier.chop + (item[:extension] ? '.' + item[:extension] : '') 

  else
    # Write item with identifier /foo/ to /foo/index.html
    item.identifier + 'index.html'
  end
end

layout '*', :erb

3.sass, coffee-scriptの設定(sprocketsの設定)

この設定だけちょっとだけ面倒。

sassとcoffee-scriptがコンパイルされた時に、sass, coffeescriptフィルターを通り
さらに、css, jsでそれぞれ1つのファイルに結合されるようにしたい。

cssは"assets/stylesheets/"に、jsは"assets/javascripts/" に格納するものとする。

mkdir -p content/assets/stylesheets/
mkdir -p content/assets/javascripts/

まず、sprocketsの設定を"lib"以下に作成する。

$ vim lib/default.rb
require 'nanoc-sprockets-filter'

include Nanoc::Helpers::Sprockets

Nanoc::Helpers::Sprockets.configure do |config|
  config.environment = Nanoc::Filters::Sprockets.environment
  config.prefix      = '/assets' # 出力先のprefix
  config.digest      = false     # ファイル名の末尾にダイジェストを付けるか否か
end

次にコンパイルとルートの設定をRuleに記述する。

次の記述で特にcoffeescriptは記述していないが
coffee-scriptはsprocketsの機能で自動的にコンパイルされる。

$ vim Rules
# application.css.sass, application.js.coffee だけをコンパイルする設定
compile %r{/assets/(stylesheets|javascripts)/*} do
  next unless item.identifier =~ %r{/application/\Z}

  filter :sprockets, {
    css_compressor: :sass,
    js_compressor:  :uglifier
  } #  ココ
end

compile "/*" do
  next if item.binary?

  case item[:extension]
  when /haml\Z/
    filter :haml
    layout 'default'

  when /md\Z/
    filter :kramdown
    layout 'default'
  end
end

# "stylesheets/application.*"、"javascripts/application.*" のみrouteを生成
route %r{/assets/(stylesheets|javascripts)/*} do
  next unless item.identifier =~ %r{/application/\Z}
  Nanoc::Helpers::Sprockets.asset_path(item)
end #  ココ

route "/*"
  if item[:extension] == 'css'
    # Write item with identifier /foo/ to /foo.css
    item.identifier.chop + '.css'

  elsif item[:extension] == 'js'
    # Write item with identifier /foo/ to /foo.js
    item.identifier.chop + '.js'

  elsif item.binary?
    # Write item with identifier /foo/ to /foo.ext
    item.identifier.chop + (item[:extension] ? '.' + item[:extension] : '') 

  else
    # Write item with identifier /foo/ to /foo/index.html
    item.identifier + 'index.html'
  end
end

layout '*', :erb

cssの読み込み設定

$ cd content/assets/stylesheets/
$ vim application.css.sass
//= require_tree .
//= require_self

// e.g
body
  background-color: #fff
  color: #333

JavaScriptの読み込み設定

$ cd content/assets/javascripts/
$ vim application.js.coffee
#= require_tree .
#= require_self

# e.g.
if true
  alert("working")

4.自動コンパイルの設定

例えばindex.html.hamlを更新したら、自動的にコンパイルされて新しいindex.htmlが生成されるようにする。

$ bundle exec guard init nanoc

デフォルト設定のままで用は足りると思うけど、足りなかったら生成されたGuardfileに設定を書く。
使う時は

$ bundle exec guard

して使う。