iT邦幫忙

DAY 17
1

快寫HTML靜態網頁系列 第 14

適用於個人blog到大企業網站的靜態網站產生器:nanoc

不同於stasis只是單純的轉換,
nanoc 有較多的功能快速建立管理網頁。
可執行的指令
nanoc 是 ruby 環境下的工具,只要執行 gem install nanoc 即可順利安裝,
看看可以有哪些指令的參數:

$ nanoc help
NAME
    nanoc - nanoc, a static site compiler written in Ruby

USAGE
    nanoc command [options] [arguments]

COMMANDS
    autocompile       start the autocompiler
    check             run issue checks
    compile           compile items of this site
    create-item       create an item
    create-layout     create a layout
    create-site       create a site
    deploy            deploy the compiled site
    help              show help
    prune             remove files not managed by nanoc from the output directory
    shell             open a shell on the nanoc environment
    show-data         show data in this site
    show-plugins      show all available plugins
    show-rules        describe the rules for each item
    sync              sync data sources
    update            update the data stored by the data source to a newer version
    view              start the web server that serves static files
    watch             start the watcher
    (3 hidden commands ommitted; show them with --verbose)

OPTIONS
    -C --no-color    disable color
    -V --verbose     make nanoc output more detailed
    -d --debug       enable debugging
    -h --help        show the help message and quit
    -l --color       enable color
    -v --version     show version information and quit
    -w --warn        enable warnings

建立新的網站

$ nanoc create-site site2
      create  nanoc.yaml
      create  Rules
      create  content/index.html
      create  content/stylesheet.css
      create  layouts/default.html
Created a blank nanoc site at 'site2'. Enjoy!

所產生的目錄及檔案的分佈是:

$ tree
.
├── Rules
├── content
│   ├── index.html
│   └── stylesheet.css
├── layouts
│   └── default.html
├── lib
│   └── default.rb
├── nanoc.yaml
└── output

4 directories, 6 files

layouts裡放置了預設的樣版,
content 裡放置所要編的檔案,
output 是輸出完整HTML的位置。
lib 裡放置的檔案是在要編譯成HTML前,
來定義所要執行的動作。
nanoc.yaml定義了些哪些檔案目錄需要偵測或更新;

watcher:
  dirs_to_watch: [ 'content', 'layouts', 'lib' ]
  files_to_watch: [ 'nanoc.yaml', 'Rules' ]

當什麼都不編輯時,
nanoc compile 即會把 content 裡的 html 檔案,
結合 layouts/default.html 輸出完整的 HTML 檔到 output 目錄裡。
這時再執行 $ nanoc view 就會出現:

[2013-10-02 14:04:42] INFO  WEBrick 1.3.1
[2013-10-02 14:04:42] INFO  ruby 2.0.0 (2013-06-27) [i686-linux]
[2013-10-02 14:04:42] INFO  WEBrick::HTTPServer#start: pid=29316 port=3000
127.0.0.1 - - [02/Oct/2013 14:04:53] "GET / HTTP/1.1" 200 1811 0.0012
localhost - - [02/Oct/2013:14:04:53 CST] "GET / HTTP/1.1" 200 1811

表示正在跑一個 3000 port 的 web 服務,
這時 http://1.2.3.4:3000/ 就會看到此預設的頁面:

這是根據 layouts/default.html 的內容:

<html lang="en">
  
    <meta charset="utf-8">
    <title>A Brand New nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" href="/style.css">

    <!-- you don't need to keep this, but it's cool for stats! -->
    <meta name="generator" content="nanoc <%= Nanoc::VERSION %>">
  
  
    <div id="main">
      <%= yield %>
    </div>
    <div id="sidebar">
      <h2>Documentation</h2>
      <ul>
        <li><a href="http://nanoc.ws/docs/">Documentation</a></li>
        <li><a href="http://nanoc.ws/docs/tutorial/">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://github.com/nanoc/nanoc/wiki/">Wiki</a></li>
      </ul>
    </div>
  

再加上 content/index.html 所畫成的完整網頁:

---
title: Title
---

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

在 content/index.html 的最上頭 定義了 title 這個變數的值為 "Title",
取代替換 出現在 layouts/default.html 裡的 <%= @item[:title] %> 的內容,
有變數可運用,就能更彈性地來安排網頁內容。

新增頁面
產生新頁面用 $ nanoc create-item about 來產生一個 about 的頁面,
會多了一個 content/about.html 的檔案:

---
title: A New Item
---

Hi, I'm a new item!

把這檔案編輯後執行

$ nanoc co
Loading site data… done
Compiling site…
      create  [0.01s]  /home/www/Default/htdocs/blog/about/index.html

Site compiled in 0.05s.

是產生 http://1.2.3.4:3000/about/ 或說是 http://1.2.3.4:3000/about/ 的頁面。

刪除頁面
假設不要 about 這頁面,
先是刪掉 content/about.html 檔,
這時 nanoc compile 並沒有什麼要更新,
也不會自動去清除掉 outputs/about/index.html 的內容,
因為 compile 的指令只會新增編譯,
但不做比對刪除的動作。
這時執行

$ nanoc prune --yes
Loading site data… done
      delete  output/about/index.html
      delete  output/about

去比對編輯來源目錄的檔案及輸出output裡的檔案,
會把output裡有,但來源目錄裡沒有的東西 予以刪除。

這種維護網站網頁的方式,
比stasis功能更多實用的功能,
得以更快速更新網頁。

系列文章列表


上一篇
stasis 的即時更新功能
下一篇
使 nanoc 支援 HAML, Markdown 格式
系列文
快寫HTML靜態網頁27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言