静的な Web サイト生成ツール Nanoc 基本編

Open Table of Contents

Nanoc とは？
Nanoc を使ってみる
関連記事

Nanoc とは？

Nanoc とは、静的な Web サイトを生成するための Ruby で書かれたコンテンツビルドツールである。

nanoc: a Ruby site compiler that generates static HTML » home

自身の好みのフォーマットで記載した文書を他のフォーマット(標準では HTML)に変換して出力してくれる。

それだけではない。

作成した文書群を 1 つの文書の集合体(所謂サイト)として管理することができる。 結果として作成されるコンテンツは静的だが、その静的なコンテンツを作成する段階で、最近の文書の一覧、タグ付けされたページの一覧など、文書の属性に合わせたページを動的に作成することができる。

コンテンツマネージメントシステム(CMS)のようだが、一般的に言われる CMS がサーバ側で動作するのに対し、Nanoc はローカルの普通のパソコン上で動作する。
Ruby を入れて、Nanoc をインストールしてしまえば、Apache や Web Application サーバなど特別なものをインストールする必要はない。 (Nanoc で使用するプレビュー用の簡易 Web サーバは別途ライブラリとしてインストールする。)

サーバで公開しようと思えば、生成された静的コンテンツをまとめてサーバにアップロードするだけでよい。静的なコンテンツなので、サーバ側に特別な Web Application サーバなどは必要ない。普通のレンタルサーバなどで公開することができる。

さらにうれしいこととしては、Ruby を知っている人であれば、コンテンツの生成時に利用する filter、helper などを必要な要件に合わせて自作し、拡張していくことができる。
また、汎用的によく使われるであろう filter、helper の機能は既に用意されていたりするので、out-of-the-box で大概のことはできるようになっている。

このサイトも元々 Mephisto という Ruby On Rails ベースの CMS で管理していたが、Nanoc に切り替えてみた。

Nanoc を使ってみる

インストール

Ruby が入っていない場合は、Ruby をインストールしておく。また、Nanoc は RubyGems というパッケージ管理ツールでインストールすることになるので、RubyGems も入れておく必要がある。
ここでは、Ruby、RubyGems のインスール方法についての記載は割愛する。詳細は以下のサイトなどを参照。

上記が既にインストールされていることを前提で、gem コマンドを使って Nanoc をインストールする。

$ sudo gem install nanoc

Nanoc には、作成されたサイトを確認するためのプレビュー機能がある。これを利用するためには、adsf というライブラリを必要とするので、これも gem でインストールしておく。

$ sudo gem install adsf

この文書を書いている環境は以下の通り。

$ nanoc -v
nanoc 3.1.3 (c) 2007-2010 Denis Defreyne.
Ruby 1.8.6 (2010-01-11) running on i686-darwin9.8.0 with RubyGems 1.3.7

新規サイトの作成

適当なディレクトリで、nanoc コマンドの create_site コマンドを使って新規のサイトを作成する。

$ nanoc create_site dr_blog
      create  config.yaml
      create  Rakefile
      create  Rules
      create  content/index.html
      create  content/stylesheet.css
      create  layouts/default.html
Created a blank nanoc site at 'dr_blog'. Enjoy!
$ cd dr_blog
$ ll
total 24
-rw-r--r--  1 taka  staff    22  6 15 11:22 Rakefile
-rw-r--r--  1 taka  staff   692  6 15 11:22 Rules
-rw-r--r--  1 taka  staff  2082  6 15 11:22 config.yaml
drwxr-xr-x  4 taka  staff   136  6 15 11:22 content
drwxr-xr-x  3 taka  staff   102  6 15 11:22 layouts
drwxr-xr-x  3 taka  staff   102  6 15 11:22 lib
drwxr-xr-x  2 taka  staff    68  6 15 11:22 output

上記は、dr_blog という名前のサイトを作成している。コマンドを発行したディレクトリ配下にコンテンツが作成されている。

content ディレクトリ配下に文書を作成していくことになる。作成したコンテンツから静的サイトを作成するには、nanoc compile コマンドを使用する。
先程のコマンド実行時に既に雛形的なコンテンツが用意されているので、コンパイルして現在の状況をプレビューで確認してみる。

$ nanoc compile
Loading site data...
Compiling site...
      create  [0.00s]  output/style.css
      create  [0.03s]  output/index.html

Site compiled in 0.05s.

content ディレクトリ存在するコンテンツがコンパイルされて、output ディレクトリに出力される。

プレビューを確認するためのサーバを起動する。

$ nanoc view

デフォルトでは、localhost の 3000 ポートで待ち受けているので、ブラウザの URL 欄に、http://localhost:3000/ と入力する。

ブラウザで以下の画面が確認できたら、ここまでの作業は順調に進んでいることになる。

Nanoc Preview

コンテンツを作成していく作業は、

コンテンツを書く
コンパイルする (nanoc compile)
生成されたコンテンツを確認する (nanoc view)

という流れになる。

コンテンツの作成

試しに、1 コンテンツ作成してみる。

先程のプレビュー画面で見た画面のコンテンツ(Nanoc では、Item と呼んでいる)は、content/index.html に記載されている。

---
title: Home
---

<h1>A Brand New nanoc Site</h1>

<p>
  You've just created a new nanoc site. The page you are looking at right now is
  the home page for your site. To get started, consider replacing this default
  homepage with your own customized homepage. Some pointers on how to do so:
</p>

<ul>
  <li>
    <p>
      <strong>Change this page's content</strong> by editing the "index.h%tml"
      file in the "content" directory. This is the actual page content, and
      therefore doesn't include the header, sidebar or style information (those
      are part of the layout).
    </p>
  </li>
  <li>
    <p>
      <strong>Change the layout</strong>, which is the "default.html" file in
      the "layouts" directory, and create something unique (and hopefully less
      bland).
    </p>
  </li>
</ul>

<p>
  If you need any help with customizing your nanoc web site, be sure to check
  out the documentation (see sidebar), and be sure to subscribe to the
  discussion group (also see sidebar). Enjoy!
</p>

--- と --- で囲まれている領域は、コンテンツ(Item)のメタデータ(もしくは、属性)と呼ばれるものである。記法は YAML のフォーマットとなっている。このセクションは生成されるコンテンツにはそのままは表示されない部分となる。

content ディレクトリ配下にファイルを作成していけば、それがそのままコンテンツになるのだが、ここでは、Nanoc の用意している create_item コマンドを使う方法を試してみる。

ちなみに、先程から「コンテンツ」という言葉に Item という表記を入れていたが、Nanoc では 1 つのコンテンツは、1 つの Item として管理されている。

hello-world というコンテンツを作成する。

$ nanoc create_item hello-wold
      create  content/hello-wold.html
An item has been created at /hello-wold/.

content ディレクトリ配下に作成された hello-wold.html の内容は以下の通り。

---
title: A New Item
---

Hi, I'm a new item!

以下のように書き換えて保存する。

---
title: Hello World!!
---

<h2>This is ths first page. "Hello World"</h2>

コンパイルする。

$ nanoc compile
Loading site data...
Compiling site...
      create  [0.02s]  output/hello-wold/index.html
        skip  [0.00s]  output/style.css
        skip  [0.00s]  output/index.html

Site compiled in 0.03s.

新たに output/hello-wold/index.html が生成されている。URL に http://localhost:3000/hello-world/ と入力し、ブラウザで表示を確認する。

Nanoc Hello World

ほんとの触りの部分だけの紹介だが、Nanoc は拡張性が高く便利なツールだ。

静的な Web サイト生成ツール Nanoc 基本編 - まずは試してみる

Table of Contents

Nanoc とは？

Nanoc を使ってみる

インストール

新規サイトの作成

コンテンツの作成

関連記事