How to compile a custom theme?


I was following along with the documentation for themes, and upon copying the Casper theme, making changes, and making sure that the theme is selected in my local instance, no changes are being made.

I then noticed a separate “built” folder in the theme. This implies that I need to build or compile the theme.

I searched all through the Ghost docs and Handlebars docs, but I could not find anything about compiling the theme. How do I go about this?

So it turns out that I was being a little dumb.

I did not realize that the themes actually had scripts associated to them with building, so I had deleted the original package.json and ran npm init.

By copying the scripts and devDependencies over from the example Casper theme, I ran npm run pretest, it built the theme, and then restarting ghost recognized the changes.

I know that the docs mentioned “previous experience” making it “a breeze”, but I really wish it still at least pointed out those steps. I was expecting a more proprietary approach, and that’s the docs led me to believe initally.

Edit: Also, running npm run dev and then for ghost ghost restart -D, I can manually reload the page and see the changes. Though, I guess live reloading doesn’t really exist?

1 Like