transitive.info

Nanoc でウェブサイトを作る

サイトの作成

nanoc でウェブサイトを作成したのだが、bootstrap やその他の設定のメモを以下に記述した。 OS は ubuntu 13.04 で nanoc のバージョンは 3.6.4 で行った。

nanoc create-site directory-name

とすると directory-name というディレクトリの中に nanoc で使うサイトのファイルができる。

cd directory-name
nanoc compile
nanoc view

で http://localhost:3000/ にアクセスしてページができているか確認する。

git で管理する

ファイルは git で管理することにする。

git init

で .git ディレクトリを作成する。.gitignore に

tmp
output
crash.log

を書く。

git add .
git commit -m "Files created by 'nanoc create-site'"

Gemfile

Gemfile に必要な gem を書いておくと

bundle update

で gem を更新できて便利。

gem "nanoc"
gem "kramdown"
gem "haml"
gem "less"
gem "w3c_validators"

w3c_validators は rake validate:css に必要となる。 ramdown や haml は markdown 形式と haml 形式を扱うために使う。

nanoc_lftp_deploy

ftp を使いたいので https://github.com/ykanda/nanoc_lftp_deploy を利用する。 まず、lftp をインストールしておく。

sudo apt-get install lftp

ここでは nanoc_lftp_deploy を vendor 以下のディレクトリに入れることにする（git のサブモジュールとして扱いたい）。

mkdir vendor
git submodule add https://github.com/ykanda/nanoc_lftp_deploy.git vendor/nanoc_lftp_deploy
git commit -m "Add nanoc_lftp_deploy as a submodule"

nanoc_lftp_deploy をロードするように lib/default.rb に次を追加する。

$LOAD_PATH << File.expand_path(File.join(File.dirname(__FILE__), "../vendor/nanoc_lftp_deploy/nanoc_lftp_deploy"))
require "nanoc3"
require "lib/nanoc3/extra/deployers/lftp"

nanoc_lftp_deployは autoload を使っているのだが、 ruby 2.0 ではうまく動かないようなので lib/nanoc3/extra/deployers/lftp.rb を指定してロードしている。

https://github.com/nanoc/nanoc/pull/233 を見ると config.yaml の代わりに nanoc.yamn に設定を記述することになったようだ。nanoc.yaml に次のような設定を加える。

deploy_lftp:
  default:
    dst: "{FTPホスト名}:{ディレクトリ名}"
    user: "{FTP ユーザーID}"
    pass: "{FTP パスワード}"
    options: ['']

たとえば

deploy_lftp:
  default:
    dst: "example.com:"
    user: "myuser"
    pass: "******"
    options: ['']

とする。 ただ nanoc_lftp_deploy が nanoc.yaml に対応していない（nanoc.yaml に設定を記述してもエラーになる）ので nanoc_lftp_deploy/lib/nanoc3/extra/deployers/lftp.rb を修正して次のようにする。

error 'No site configuration found' unless (File.file?('config.yaml') || File.file?('nanoc.yaml'))

本当は「nanoc deploy」というコマンドでアップロードできれば良いのだが、 対応しているのか不明なので Rakefale に deploy のタスクを作る。 はじめは Rakefile は存在しないので、新しく作成して

require_relative "lib/default"
require "nanoc3/tasks"
require "lib/nanoc3/tasks"

とする。

rake deploy:lftp

で ftp を使ってアップロードされる。

rsync で deploy

rsync でアップロードする場合は nanoc.yaml に

deploy:
  default:
    kind: rsync
    dst: "user@exmple.com:www/nanoc"
    options: [ "-avh", "--delete-after" ]

のような設定を書く。systemu が必要なので Gemfile に

gem "systemu"

を加え

bundle update

でインストールする。

nanoc deploy --target default

とすれば rsync が実行される。

拡張子でフィルタを変える

haml や markdown を使うので content 以下のファイルの拡張子によってフィルタを変えたい。 http://nanoc.ws/docs/guides/using-filters-based-on-file-extensions/ を参考にして Rules ファイルの compile のところを次のようにする。

compile '*' do
  if item.binary?
    # don’t filter binary items
  else
    case item[:extension]
    when /\.md$/
      filter :kramdown
    when /\.haml$/
      filter :haml
    when /\.erb$/
      filter :erb
    end
    layout 'default'
  end
end

nanoc-static-data-source

とくに処理を施さずに、そのままアップロードすればよいファイルは https://github.com/cboone/nanoc-static-data-source を使う。

git submodule add https://github.com/cboone/nanoc-static-data-source.git vendor/nanoc-static-data-source

で vendor ディレクトリにサブモジュールとして保存する。

mkdir static

として static ディレクトリを作成し、その中に静的ファイルを入れる。

このままだとロードされないので lib/default.rb に

require File.expand_path(File.join(File.dirname(__FILE__), "../vendor/nanoc-static-data-source/static.rb"))

を加える。static ディレクトリの処理を Rules に

compile '/static/*' do
end

route '/static/*' do
  # /static/foo.html/ → /foo.html
  item.identifier[7..-2]
end

と書いておく。また、nanoc.yaml の data_sources: のところに

data_sources:
  # original data source skipped
  -
    type: static
    items_root: /static/

を加える。

sprockets の設定

sprockets を使って css と javascript をそれぞれひとつのファイルにまとめることにする。

ファイルを置くディレクトリを作成する。

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

Gemfile に

gem "sprockets"
gem "sprockets-helpers"
gem "sprockets-less"
gem "nanoc-sprockets-filter"

を追加して

bundle update

として gem をインストールする。

lib/sprockets.rb を作成して

require "less"
require "sass"
require "uglifier"
require "sprockets-helpers"
require "sprockets-sass"
require "sprockets-less"
require "nanoc-sprockets-filter"

include Nanoc::Helpers::Sprockets

Nanoc::Helpers::Sprockets.configure do |config|
  config.environment = Nanoc::Filters::Sprockets.environment
  config.prefix      = "/assets"
  config.digest      = true
end

のようにする。

nanoc-sprockets-filter のソースを見ると content/assets/, lib/assets/, assets/, vendor/assets/ の中の javascripts, stylesheets, images, fonts が nanoc-sprockets-filter で登録されているようだ。

Rules に設定を書く。

compile %r{/assets/(stylesheets|javascripts)/application.*} do
  filter :sprockets, {
    :css_compressor => :sass,
    :js_compressor  => :uglifier
  }
end

compile %r{/assets/(stylesheets|javascripts)/.+} do
end

route %r{/assets/(stylesheets|javascripts)/application.*} do
  Nanoc::Helpers::Sprockets.asset_path(item)
end

route %r{/assets/(stylesheets|javascripts)/.*} do
  nil
end

route %r{/assets/(images|fonts)/.*} do
  Nanoc::Helpers::Sprockets.asset_path(item)
end

次に、css へのリンクを変更して

%link{ :rel => "stylesheet", :type => "text/css", :href => stylesheet_path("application"), :media => "screen" }

のようにする。

後は、content/assets/stylesheets/application.css と content/assets/javascripts/application.js を作成して、

nanoc compile

とすると output/assets ディレクトリに css と javascript が作成される。

sprockets と twitter bootstrap

twitter bootstrap は vendor ディレクトリ以下に git のサブモジュールとして配置する。

git submodule add https://github.com/twbs/bootstrap.git vendor/assets/stylesheets/bootstrap
git commit -m "Add bootstrap as a submodule"

として bootstrap をダウンロードする。

content/assets/stylesheets/application.css は次のようにした。

/*
  = require bootstrap_custom
  = require_self
*/

content/assets/stylesheets/bootstrap_custom.css.less には

@import "../../../vendor/assets/stylesheets/bootstrap/less/bootstrap.less";
//
// custom settings of twitter bootstrap
//

のように、まず、vendor にある bootstrap.less をインポートしてから、 twitter bootstrap の設定を書いた。

sprockets の application.js

bootstrap の機能を全て使おうとすると付属している javascript も必要になる。 content/assets/javascripts/application.js の中で

//= require ../../../vendor/assets/stylesheets/bootstrap/docs/assets/js/jquery.js
//= require ../../../vendor/assets/stylesheets/bootstrap/docs/assets/js/bootstrap.js
//= require_tree .

のようにして、bootstrap に同梱されていた jquery.js と bootstrap.js を読み込ませる。

レイアウトの javascript へのリンクを次のようにする。

%script{ :type => "text/javascript", :src => javascript_path('application') }

参考

Tags of current page

, ,