jekyll dektop app with node-webkit on osx

April 26, 2014

I had an idea this morning that I could make a simple desktop app by combining the lightning-fast website generation capabilities of jekyll with the awesome Node-Webkit that lets us native wrappers for HTML5 apps. I checked out this nice intro to Node-Webkit, and unsurprisingly ran into a few gotchas, documented below for other adventurer and my future self:

Simple Website with Jekyll

gem install jekyll
jekyll new experiment
cd experiment
jekyll serve

go to http://localhost:4000
you should see the default sample jekyll site

Make a Native OSX App

Download and install Node-Webkit pre-built binary

At the root of your jekyll site, create a file named “package.json”

{
  "name" : "nwk-experiment",
  "window" : {
    "width" : 800,
    "height" : 600,
    "toolbar" : true
  },
  "main" : "app://whatever/index.html"
}

The app root url is a nice feature of node-webkit which makes it pretty easy to transport any website into this system of building a native app.

jekyll build  # creates the site
cd _site
zip -r ../app.nw * 
cd ..

Most tutorials tell you to zip the directory. The first time I tried, I got an Invalid package error “There is no ‘package.json’ in the package, please make sure the ‘package.json’ is in the root of the package.” On OSX, we need to zip the files from the root of the directory that had the ‘package.json file in it. (via crashtheuniverse)

Run the App

open -n -a node-webkit "./app.nw"

When I double-click on the app.nw file, I see the directory, not my index file. I haven’t figured out that part yet. Still a work in progress!

---