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!

Comments

Thomas J Bradley April 26, 2014

You're looking into creating an app that will turn Jekyll on/off instead of using Terminal?

Or an app that uses Jekyll to generate its interface?

sarah April 26, 2014

Creating a native, off-line app that uses Jekyll to generate its interface