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 <anton@kovalyov.net>",
"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.