/ ghostthemesgithublearning

How to build on top of the Casper theme in Ghost

This blog runs on the Ghost platform, and I've done a bit of customization to the styling. Nothing major.

I was mildly surprised when I ran a "ghost update" the other day and suddenly my custom themes and scripts were just gone! Luckily I use DigitalOcean (a great provider, if you happen to be looking for one) with backups enabled, and I had a backup from just a couple days before. I rolled back, verified my styles and customizations were present, then ran ghost update again. Wiped out.

In retrospect, this makes sense. There are going to be updates to Casper, the default Ghost theme, and how should they reconcile that with any local changes I've made? They can't reasonably, so they just overwrite it. WordPress had the concept of child themes, which allowed for extending a base theme, so I attempted to do something similar with Ghost.

If you find yourself wanting to use most of the Casper theme, but with some customizations (and you don't want to shove them all into the "Code injection" tab in the ghost admin screen), then here's what I did:

1. FORK

Fork the default Casper theme to your own GitHub account.

2. CLONE

Clone it locally using one of these:

git clone git@github.com:YOUR-USERNAME/YOUR-FORKED-REPO.git

git clone https://github.com/YOUR-USERNAME/YOUR-FORKED-REPO.git

Rename the directory on your local machine so it's different than the default theme name - something like Casper-YOUR-USERNAME. This is necessary when uploading the child theme later - the name cannot be the same as the default.

3. MODIFY

Make any changes you'd like to the theme. You can see mine here, which includes some small tweaks to add more social icons, more whitespace around certain elements, changes to blockquotes, using PrismJs for code styling, etc.

4. ZIP & UPLOAD

Compress the local directory so you end up with a Casper-YOUR-USERNAME.zip file, and then use the Design tab under settings in the Ghost admin to upload your new theme. Activate it (it should prompt you). Restart Ghost using ghost restart if you don't see the changes applied (but they should be).

5. FETCH LATEST OFFICIAL CHANGES

To avoid missing out on future updates to the default Casper theme, keep your fork up to date (don't forget to commit your changes first).

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream
git pull upstream master
git push

If you're a fan of git aliases, after you've run the above once you could add something like this to your .gitconfig file:

updatecasper = !cd your/casper/location && git fetch upstream && git pull upstream master && git push

Note:

This method of updating my local fork worked perfectly fine for me, but you may also want to checkout the official doc on Syncing a fork which suggests a git merge instead of a git pull. There's also a comment under the gist I linked to above, that suggests a way to keep forks up-to-date all through GitHub.


Grant Winney

Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.

Read More