Bitbucket is a code hosting site with unlimited public and private repositories. We're also free for small teams!

Close

njsBaker

njsBaker is a simple compiler for static HTML web sites. A complete rebuild of Make/rake/Ant/Maven/gant/Easy Bake Oven/whatever this is not.

So why another tool along those lines? A lot of times a dynamic server side scripting language is overkill. But no one wants to copy and paste HTML for a page being added to a site. And they certainly don't want to go back and edit the site-wide navigation on every page when it changes. Which means you'll say "screw that" and use PHP/Ruby/Python/Perl/etc. just to make maintaining the site easier. Because who wants to go back to Server Side Includes, right?

Well, screw that noise. njsBaker is designed specifically to make maintaining simple static sites easy. Additionally, it keeps the language requirements down. You're probably already writing JavaScript for your web site. So why switch over to something else for a tool like this? Keep it simple.

Install/Usage

Node.js is required.

  1. hg clone https://bitbucket.org/jsumners/njsbaker (or download the latest tarball)
  2. npm -g install njsbaker (where "njsbaker" is your cloned source tree)
  3. Create a project with a Baker.json (described below)
  4. From the project root: njsBaker Baker.json

There is an example project included in the Mercurial repository.

How Does It Work?

njsBaker assumes a project where there is a parent project directory that contains three items:

  1. A template directory
  2. A "build" directory (the location of the "compiled" HTML)
  3. A JSON file that details the project

njsBaker reads the JSON file, loads the template files it describes from the template directory, and writes the compiled HTML files to the build directory.

By default, njsBaker will look for a "Baker.json" file in the project directory. However, you can also supply another filename, e.g. njsBaker myBaker.json.

Note: you must run njsBaker from the root project directory.

Baker.json

The Baker.json file has a simple format with just a few rules. First, an example file:

{
    "config": {
        "buildDir": "build",
        "templateDir": "templates",
        "tokenDelimA": "{{",
        "tokenDelimB": "}}"
    },

    "snippets": {
        "index_content": "index_content.html",
        "site_nav": "site_nav.html"
    },

    "tokens": [
        "site_nav"
    ],

    "pages": {
        "index": {
            "content": "index_content",
            "file": "index.html",
            "template": "template.html",
            "strings": {
                "title": "Page Title",
                "foo": "bar"
            }
        }
    }
}

Rules

  • content token (required): Every template will have tokens that are to be replaced by njsBaker. There is only one required token name -- "content".

  • config object (required): The config object defines the two directories that will be used during compilation. In this example, all templates reside in a directory named "templates" and the resulting HTML will be written to the directory named "build". Additionally, the templates will have tokens that are delimited by "{{" and "}}". For example, "{{content}}" will be replaced with page content.

  • snippets object (required): The snippets object maps the content token in each template to the snippet in the config.templateDir that contains the content for said template. So, each key on this object points to a file in the config.templateDir. If you prefer some organization in your templates directory, the key's value can be a relative path. So, you could have "foo/bar.html" as the value.

  • tokens array (optional): The tokens array is a list of custom tokens that match keys on the snippets object. In this example we have defined a token that will be used to represent the site wide navigation. If you only use the required content token, then you do not need the tokens array.

  • pages object (required): The pages object defines the HTML pages that will be compiled. Each property of this object is a "page" object that has three required properties: "content", "file", and "template".

    1. The "content" property's value must match a key on the snippets object.
    2. The "file" property defines what file will be written in the config.buildDir directory.
    3. The "template" property specifies what template from the config.templateDir directory to use for this HTML file.
    4. Additionally, the pages object can include a "strings" property. This property is an object that maps page specific token names to replacement strings. In our example, every occurance of "{{title}}" in the "index_content" snippet will be replaced with "Page Title". Likewise, every instance of "{{foo}}" will be replaced with "bar".

Recent activity

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.