pitarra13 / oddweb Goto Github PK

Oddweb is a small program written in JavaScript that takes a bunch of files and generates a static website for you. It is similar to Jekyll and others.

It was written for the JSHint website. Before that, JSHint was using Jekyll but I got tired of dealing with Ruby gems on all my computers. Oddweb works perfectly well when installed as a local NPM module.

Oddweb currently supports only plain HTML, Handlebars templates and Markdown files. But it's super easy to write plugins for it so there's that.

Here I'll show how I use oddweb for my personal website. You can find full source code here: antonkovalyov/home.

First of all, my website has a package.json file to manage dependencies and all that:

{
  "name": "anton.kovalyov.net",
  "version": "0.0.0",
  "description": "No Admittance",
  "main": "index.js",

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "oddweb dev .",
    "build": "oddweb build ."
  },

  "dependencies": {
    "oddweb": "~0.0.2"
  },

  "oddwebPlugins": [
    "core/time",
    "core/blog"
  ],

  "author": "Anton Kovalyov <[email protected]>",
  "license": "BSD"
}

Note that oddweb is a normal dependency there. Also not that I use scripts to add shortcuts for oddweb's commands (dev starts a local server, build generates a production site).

There are three directories: res that contains files that has to be copied as is (i.e. images), templates to hold Handlebars templates and pages for your actual content. When I run npm start oddweb starts a local server where I can try out my website. When I run npm run-script build oddweb generates a static file into the site directory.

My website is a blog so I use a built-in plugin called core/blog. This plugin expects all posts to be in the pages/blog subdirectory.

You can add meta-info to each file by prepending it with a JSON structure. See this file for example.

Plugins that don't start with core/ are loaded from your site's directory. A plugin is simply a function that takes two parameters—a site structure and handlebars instance—and returns a modified site structure.

// myplugin.js: this plugin replaces word 'cloud' with 'cat' on all pages.

module.exports = function (site, handlebars) {
  site.pages = site.pages.map(function (page) {
    page.data = page.data.replace(/cloud/g, "cat")
    return page
  })
  
  return site
}

For more examples check out core plugins in this repo and minify.js, options.js, version.js in the jshint.com repo.

That's it. Bye.