Developing ghost templates

As you can see my blog has a new theme now. I developed that Theme based on the original "Casper"-theme that is included with a standard Installation of ghost (meaning: I kept the Handlebars themes, heavily modified them and scrapped the CSS ;) ).

I like playing with the CSS when I do webdesign (which is not that often anymore) and I like instant feedback, so the first thing that occured to me was setting up an environment to let me do that.

Fortunately the tools that are currently en vogue are all based on node.js as ghost itself is. So I took everything that could possibly help me from forums and collegues and implemented a simple system to develop themes.

Introducing gulp and bower

Because nobody wants to write pure CSS anymore but some kind of dialect of it (be it less or sass or whatever your preprocessor of choice is named) a new intermediate step is introduced: Compiling the CSS-Extension-Language down to standard CSS.

gulp

The tool of choice for that is gulp. gulp is compareable with make (or grunt if you're more into the javascript side of things) but has one big advantage: It does not rely on temporary files but on streams and is faster than most other (javascript based) build systems. And the best thing is: It has a file watcher built right into it. Everytime you save any of the theme files in your project gulp picks that file up and recompiles it instantly. So in principle you're writing CSS by not writing CSS (at least every process on your system may think that).

Normally to build a gulp project you'll just call gulp with a target name (or nothing if you want the default target):

gulp default  

livereload

I don't know if you heard of Livereload already, but if you didn't let me tell you something: It is the best thing since automated build systems! Livereload is a small javascript shim that is embedded into a webpage that connects to a livereload server via a websocket. Everytime the livereload server sees a file change the page is signalled to reload completely or overwrite its css. So you'll get instant feedback in your browser when you save a file in your editor (or gulp changed/compiled a file for you).

It even works on mobile devices and with multiple browsers connected to it. So no refreshing of multiple browsers to compatability test a change.

bower

bower is a tool like npm, it's a simple package manager. This time it's not a package manager for some backend or build stuff but for resources you'll want to include in your product (assets, CSS frameworks, javascript libraries, etc.)

It works exactly like npm and even writes a bower.json file that is very similar to the npm package.json

To let it create a bower.json file for you:

bower init  

and answer the questions.

To install a package just call:

bower install --save inuit-normalize  

The --save argument tells bower not only to install the package but to save it to the json file for persistence.

Running the thing in ghost

Of course just editing some template files without a ghost instance would not work. Because the gulp tool is written in javascript and the gulpfile.js control file is javascript too (like the name suggests) integrating ghost into it is pretty simple.

At first we need a ghost package:

npm install --save-dev ghost  

Now we need to call a ghost server from gulpfile.js:

gulp.task('ghost', ['sass', 'js', 'templates', 'fonts', 'stuff'], function() {  
    var ghost = require('ghost');
    process.env.NODE_ENV = 'development';
    ghost({ config: __dirname + '/ghost-config.js' }).then(function (ghostServer) {
        ghostServer.start();
    });
}

If you call the ghost target of gulp now you will be greeted by a freshly initialized ghost instance (of course a ghost-config.js should be available in your current working directory!)

Getting a complete bundle from github

Because I invested quite some time into the gulpfile.js and ironed out some quirks (Throwing errors in gulp crashes the ghost instance and the livereload server and ghost fight for the express-server instance for example) I just uploaded the full thing to github.

Get the ghost theme developers kit on github and checkout the dunkelstern_theme branch for a version of the theme on this blog as an example.

Setup instructions

If you're on a Mac open a terminal and do the following:

  • Get Homebrew if you don't have it already:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  
  • Install node.js
brew install node  
  • Get a checkout of the git repository (or download as zip and unpack) and change to that directory (type cd, space, and drag and drop the folder to the terminal, then press return)
  • Get gulp and bower
npm install -g gulp  
npm install -g bower  
  • Get all needed node.js modules and assets:
npm install  
bower install  
  • If you have Sublime Text open the project file, else look into the directory for *.scss and *.hbs files
  • If you know Sass and Handlebars that is very good, else visit the ghost theme tutorial
  • In your terminal call the gulp livereloader
gulp livereload  
  • If everything worked you should see a preconfigured ghost instance in your browser if you visit http://localhost:2368/
  • Change something and see it refresh in your browser... it's magic!
  • If you produce an error the terminal will give you an exact error message and the browser will not reload your defect file.

Johannes Schriewer

iOS and Linux developer. Tinkers with electronics and 3D-Printers, loves low-level stuff.

Augsburg, Germany, Planet Earth