A Ghost blog theme build on top of Casper

Ghost is a new and free open-source blogging platform. Ghost has a unique purpose in providing bloggers with a simple interface that allows them to write and publish their content without the hassle or distraction by the complexity of development from traditional platforms.

If you wish to change the theme you had 3 choices to do so:

1. Write your own theme from scratch.
2. Switch to another theme.
3. Fork Casper and modify to your own liking.

If you are reading this article chances are that you’re already a Ghost blog owner and that you’re looking to develop your own theme. The problem with the Ghost default theme named Casper, while it’s extremely helpful to
learn how to develop a custom Ghost theme, is that it is too complex or “it has too many things” you probably don’t want for your blog.

Building from scratch

To begin building our Ghost theme, start within the Ghost installation folder. Under Content > Themes create a new theme called mytheme. Make sure this is in lowercase without any spaces (hyphens are acceptable). This will be the directory that houses our theme codebase. Within this directory, create the following files and folders:

- /assets/
— /css/
— normalize.css
— screen.css
— /images/
— /js/
— /fonts/
- /partials/
— header.hbs
- default.hbs
- index.hbs
- post.hbs

Activate the new theme

Now in the Ghost dashboard, navigate to Settings > General. Under Theme, select the new theme you just created called mytheme. If it’s missing, you’ll need to go to the terminal and restart the Ghost. Click Save to activate this theme. You won’t see anything in the frontend yet. This is because we have yet to add any markup in our theme.

Modify Casper theme

1. FORK

Fork the default Casper theme to your own GitHub account.

2. CLONE

Clone it locally using this:

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

3. MODIFY

Make any changes you’d like to the theme. A theme controls how all of the pieces are presented visually and how the elements are drawn together. A Ghost theme should have index.hbs and post.hbs.Ghost themes are written with a templating language called handlebars, which has a set of dynamic helpers to insert your data into template files.

4. Zip up your theme and upload it

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).