nanocを使って静的サイトを作ろう2

前回の続きになります。


今回は新しいページの作成に挑戦します。

ディレクトリとファイルの解説

まずは前回と少し被りますが、ディレクトリの構成です。

$ ls -F
Rakefile  Rules  config.yaml  content/  layouts/  lib/  output/  tmp/
$ ls -F layouts/
default.html
$ ls -F content/
index.html  stylesheet.css

まず、layouts/default.htmlが全体で使われるテンプレートになります。
次に、content/index.htmlがトップページです。
処理としては、layouts/default.htmlにcontent/index.htmlが埋め込まれます。結果はoutput/に作成されます。


layouts/default.htmlの中身を見てみます。

$ cat layouts/default.html 
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Brand New nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" type="text/css" href="/style.css" media="screen">
    <meta name="generator" content="nanoc 3.2.3">
  </head>
  <body>
    <div id="main">
      <%= yield %>
    </div>
    <div id="sidebar">
      <h2>Documentation</h2>
      <ul>
        <li><a href="http://nanoc.stoneship.org/docs/">Documentation</a></li>
        <li><a href="http://nanoc.stoneship.org/docs/3-getting-started/">Getting Started</a></li>
      </ul>
      <h2>Community</h2>
      <ul>
        <li><a href="http://groups.google.com/group/nanoc/">Discussion Group</a></li>
        <li><a href="irc://chat.freenode.net/#nanoc">IRC Channel</a></li>
        <li><a href="http://projects.stoneship.org/trac/nanoc/">Wiki</a></li>
      </ul>
    </div>
  </body>
</html>

"<%= yield %>" という部分があります。ここにcontent/index.htmlが埋め込まれます。
この記法はERBというRubyのデフォルトのライブラリとして実装されていて、任意のテキストファイルにRubyスクリプトを埋め込む書式です。

新規ページの作成

簡単な動作を理解したところで実際に新規ページを作成します。

手っ取り早く行うためにindex.htmlをコピーして使います

$ cp content/index.html content/test.html


ちなみにページを1から作成したい場合は"create_item"オプションがあります。

$ nanoc create_item test
      create  content/test.html
An item has been created at /test/.


これが修正した内容です。

$ cat content/test.html 
---
title: Test <!-- 修正部分 -->
---

<h1>Test Page</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.html" 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>


修正部分をコメントで示しています。"Home"を"Test"に、"A Brand New nanoc Site"を"Test Page"に変更しました。


この修正を表示するために"compile"オプションを使用してhtmlを作成します。

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

Site compiled in 0.10s.

output/test/index.htmlが作成されているのが分かります。


新しいファイルが作成されたので表示をしてみます。
この状態でブラウザから"http://localhost:3000/test/"にアクセスしてください。修正した内容が表示されれば成功です。

$ nanoc view
[2012-01-24 23:16:22] INFO  WEBrick 1.3.1
[2012-01-24 23:16:22] INFO  ruby 1.9.3 (2011-10-30) [x86_64-linux]
[2012-01-24 23:16:22] INFO  WEBrick::HTTPServer#start: pid=25689 port=3000

HTML上の階層

content/test.htmlを作成しましたが、これがHTML上の位置でどのようになるかを説明します。
これを理解していないと、サイト内リンクが作成出来ない状態のままになります。

単体ファイル

"content/hoge.html"の場合、"output/hoge/index.html"として作成されます。
このようになっている理由を想像すると、2つ理由があります。
1つ目の理由は、"content/hoge.html"にアクセスするために、"http://localhost:3000/content/hoge/"だけでアクセスできるようにという配慮だと思われます。
2つ目の理由は、複数ファイルへの対処です。これは次で説明します。

複数ファイル

"http://localhost:3000/hoge/*.html"という形で、サブディレクトリを作り複数のファイルをまとめて管理する場合の方法です。
この場合、content/hoge/というディレクトリを作成しその下にファイルを作っていく流れになります。
当初、"content/hoge.html"を作成していたが、ページが増えてきて1つのページを複数に分けたいという欲求が出てきた場合、"content/hoge/"を作成し、次に"content/hoge.html"を"content/hoge/index.html"にするだけで対応ができます。


最初からこのようにサブディレクトリを作成したい場合は"create_item"オプションで一度に作成できるようになっています。

$ nanoc create_item hoge/index
      create  content/hoge/index.html
An item has been created at /hoge/index/.

あとはhoge/index.htmlを修正し、新しいファイルが欲しければ"create_item"オプションを使えば良いのです。

URLはどうなるか?

"content/test.html"の場合、"http://localhost:3000/test/index.html"というリンクになります。


これを確かめるために"content/index.html"にこのように"test/"へのリンクを作成してみます。

$ cat content/index.html 
---
title: Home
---

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

<a href="test/">test page<a> <!-- 追加 -->

<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.html" 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>


compileを行うとリンクが作成されてリンクをクリックすると正しく移動する事が分かります。



いかがだったでしょうか? nanocを使うと空ページのテンプレートの作成やディレクトリ構成を深く考える必要が無く、簡単にHTMLを作成できる事ができました。
次回は、コンパイル時のルール修正について解説します。