Local Dev for a Ghost Theme

I recently customized the default Ghost Casper theme for this blog.

It took me a while to figure out a good local development flow. Here is what I ended up with.

1. Install Ghost locally

First, you need to be running a Ghost instance locally. Instructions for doing this are here.

Once installed, it should be available here: http://localhost:2368/

On your local Ghost install, select the theme you want to start with. I started with Casper.

Wherever you installed ghost, you'll have a directory with the theme. Open it up and you'll see all the theme files.

ghost/current/content/themes/casper

2. Setup local dev for the theme

For Casper, they have local dev instructions on GitHub.

yarn install
yarn dev

The dev server rebuilds the assets each time you edit a file.

Since you're now developing inside of your ghost install, each time you make a change, you'll be able to refresh the page in your local Ghost and immediately see the changes.

3. Using in production

Once you've made edits and are happy with the results, you can upload them to your production ghost installation by doing the following.

• Open package.json inside the theme directory and edit the name of your theme (to avoid conflicts)
• Next run yarn zip. This will generate a zip of your theme in the dist folder
• You can then upload that zip to your production ghost instance

Once you get this all setup, it's quite easy to customize Ghost.