node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


Static React (nail-static-react)

Create static pages and sites using React components with John Henry's Hammer


This file use react components as templates. Please install react, or any other dependencies within your project upon which these components depend.


Most nails can be installed automatically see John Henry's Hammer. This nail, however, makes heavy use of babel-register, which is know to fail as a dependency of other modules. As such, please install this manually:

Manual Installation: Clone

From within your project, clone this project using git.

git clone


git clone

Manual Installation: Navigate to the folder and install npm dependencies

cd nail-static-react
npm install

Manual Installation: Nailfile

In your nailfile, point directly to the local installation like this:

  "nails" : [{
      "plugin" : "./nail-static-react"

NOT This:

  "nails" : [{
      "plugin" : "nail-static-react"


  • source:object - source data for react component. (Defaults to {}).
  • destination:string - destination file (Defaults to "index.html")
  • component:string - location of react component to render
  • attach: - list of script and styles to attach to head of generated page.
  • embed: - list of script and styles to embed within head of generated page.
  • attachbody: - list of script and styles to attach to body of generated page.
  • embedbody: - list of script and styles to embed within body of generated page.
  • mode:string - set to 'blog' to create static blog rather than a single page. (Defaults to "single")

Blog Mode

Setting the mode to "blog" modifies some options and introduces some new ones

Modified Options

  • component:string - location of component used to render index pages for the blog
  • source:string - directory of markdown files Defaults to './markdown'
  • destination:string - destination folder relative to nailfile directory

New Options

  • postcomponent:string - location of component used to render individual post pages for the blog
  • itemsperpage:number - number of posts to include per index page (Defaults to 3)
  • reverse :boolean -- create pages in reverse order (defaults to false),

Data Passed to Index

When creating a blog, the component will have access to an object with each of the following properties for every index page.

index :number - index of page posts : - an array of posts last :boolean - indicator as to whether or not the post is the last one

Data Passed to Post

When creating a blog, and object with specific keys will given to the component described in "component" to render.

index:number - index of post post:Post - the current post next:Post - the next post prev:Post - the previous post