020 Nanoc

02 Nov 2012

Nanoc is tool for building static web sites. Using a static site generator like Nanoc has some advantages such as speed, security and local development. In this episode, we will explore how to build a blog with Nanoc!

Download video: mp4

Sample code: Github

Version: 3.4.2

Similar episodes: 005 Markdown, 006 Wordpress, 009 Package Managers

##Background on Nanoc:

  1. Nanoc documentation and api 3.4
  2. Nanoc code repo
  3. Build a blog with Nanoc
  4. Rocking and rolling with Nanoc
  5. build a static site with nanoc
  6. Using nanoc for blogging
  7. Learn to code the Hard Way in Ruby by Zed Shaw

##Things to learn with Nanoc

####1. check pre-requisites:

In the command line::

  1. ruby programming language is installed: ruby -v
  2. rubygem is installed: gem -v
  3. install nanoc: gem install nanoc
    • check nanoc is installed nanoc --version
  4. install kramdown, ruby implementation of Markdown: gem install kramdown
    • check kramdown is installed: kramdown --version
  5. install adsf to preview our site in any directory with a web server: gem install adsf
    • check adsf is installed in all the list of gems: gem list

####2. create a static site with nanoc

in the command line:

  1. create new blog folders and files: nanoc create_site blog && cd blog
  2. view all contents inside the folder: tree
  3. create all the view files: nanoc compile
    • if you get an error RuntimeError: Could not read content/index.html because the file is not valid ASCII-8BIT., then add the following in config.yml on line 53 after layouts_root: /:

      config: encoding: utf-8

  4. nanoc view and view the site http://localhost:3000/

####3. amend content and create new pages

  1. amend content on file content/index.html and run nanoc compile && nanoc view
  2. amend metadata, title on file content/index.html line 2 and nanoc compile && nanoc view
  3. use Markdown to write by adding the following in the file Rules on line 20 before the line compile '*' do:

    compile '*' do if item.binary? # don't filter binary items else filter :kramdown layout 'default' end end

  4. to create partials:
    • include include Nanoc::Helpers::Rendering in file lib/default.rb
    • create the partial file e.g. defaults/sidebar.html
    • <%= render 'sidebar' %> in the layouts/defaults.html at the line where sidebar will appear
  5. to automate nanoc compilation, view in browser and refresh browser page, run nanoc autocompile and start the chrome extension live reload

####4. create blog posts

  1. include in lib/default.rb

    include Nanoc3::Helpers::LinkTo include Nanoc3::Helpers::Blogging

  2. create 4 articles in content/*.html with the following format:

    ``` — kind: article title: Hello World created_at: 1 September 2012 —

    contents in markdown

    ```

  3. include the post title and date in layouts/default.html

    ```

    <%= @item[:title] %>

    <%= @item[:created_at] %>

    <%= yield %> ```

  4. list the posts in chronological order in layouts/default.html on home page

    ``` <% if (@item[:title] == ‘Welcome’) %>

      <% (@site.sorted_articles[0..30]).each do |post| %>
    • <%= link_to(post[:title], post.path) %> <%= post[:created_at] %>
    • <% end %>

    <% end %> ```

  5. include next/previous post links:

    • define the next and previous links in lib/default.rb

    ``` def previous_link prv = sorted_articles.index(@item) - 1 if sorted_articles[prv].nil? return “” else link_to(‘← Previous’, sorted_articles[prv].reps[0]) end end

    def next_link nxt = sorted_articles.index(@item) + 1 if sorted_articles[nxt].nil? return “” else link_to(‘Next →’, sorted_articles[nxt].reps.find { |r| r.name == :default }) end end ``` - put the links on layout/default.html if it’s an article:

    <% if (@item[:kind] == 'article') %> <p>it's an article!!!</p> <p><%= previous_link %> | <%= next_link %></p> <% end %>

####5. create feed

  1. create content/feed.erb:

    <%= atom_feed :title => 'My Blog', :author_name => 'Sayanee', :author_uri => 'http://localhost:3000', :limit => 10 %>

  2. include compilation rule before compile '*':

    compile '/feed/' do filter :erb end

  3. include routing rule before route '*'

    route 'feed' do '/feed.xml' end

  4. include base url in config.yml in the last line:

    base_url: 'http://localhost:3000'

##More Resources on Static Site Generators

  1. List of Static Site Generators
  2. Jekyll, a ruby static site generator
  3. Punch, a node.js static site generator
  4. Benifits of using a static site generator: Redesign notes by Divya

##Build Link of this Episode

You and Your Research by Richard Hamming and a summary of his talk.