My custom Ghost theme

As I said in my introduction post, the default theme for Ghost, Casper, as been reworked a few months ago a looks very good now.

I’m not completely fond of the theme though, so there are a few things that I wanted to modify.

I had 4 choices to do so:

• Write my own theme from scratch
• Switch to another theme
• Add custom CSS through the admin (the is “code injection” tab)
• Fork Casper and modify to my own liking

Ghost themes are actually incredibly easy because of Handlebars.js, so a theme is mainly HTML and CSS in the end. I don’t have the will to create a full theme from scratch (I’m not fond front end development - I’m already doing too much at school), so the first option is out.

I’m still considering switching to another theme, but I’m not sure yet and I’ll do a blog post about it.

Adding stuff trough the admin is dirty, and you can only add HTML/CSS/JS.

Then let’s go with the fourth option: as themes are easy to understand, I should be able to modify Casper.

Casper-XYZ: a Casper fork

Of course, Casper is open source and available on GitHub. I cloned the repo and pushed it to angristan/Casper-XYZ.

I removed the original Readme to only leave the details of my fork, mainly I what changed. I recommend you to read it if you want a list of up-to-date changes. I also added what are the things that I hardcoded in theme, because I want it to be as reusable by anyone as possible.

So the first thing I wanted to do with my fork was to add custom CSS. The default font size of Casper is just way too big that it hurts my eyes. Also the fact that the header image of the post is enlarged is weird and ugly.

In the end I added quite a lot of custom CSS, which you can view here. Every addition is explained in a comment above. This file doesn’t change the overall look of the theme but makes it more pleasant in my opinion.

I changed the font to Soure Sans Pro, which looks better than Georgia. I added the font files and the jQuery file to the repo to not make any external calls (privacy). Same goes for the Feedly links which I replaced with the original RSS links. I don’t understand why it wasn’t the case by default honestly.

I removed the share links on the fixed header, because I don’t want to only have Twitter and Facebook share links, and because this is annoying. I will add custom-made buttons later at the end of posts, if I feel the need to.

And finally, I used the theme to add Isso, the comments software you can see below the post.

Workflow

That’s the thing I like the most about having my own theme.

After cloning the repo and running npm install for the first time, here is how it goes:

• I edit the files
• I run gulp zip to generate a zip file of the theme with the new compiled assets
• I upload the theme to my Ghost website
• If I’m satisfied with my changes, I commit them
• I push the commits to GitHub
• Return to step one until absolute satisfaction

This, associated with the fact that the theme is just HTML + handlebars, CSS and JS, makes it very easy and painless to edit.

I’m using Visual Studio Code at the moment.

My workflow could be even better: indeed, Ghost can run for a production or development environment. In production, static pages are generated and then Ghost just serves HTML. If you make a change to your theme directly on the server, you have to restart Ghost so that the changes are applied. When you upload the time file directly, this is not needed, but the changes are only applied when you change theme or upload a theme.

In development, the pages are regenerated each time you request them. So what you should do when working on a Ghost theme that uses gulp is to run a development Ghost on your machine and launch a gulp process in your theme directory so that the assets are recompiled every time you save a file in the directory.

I’m a madman, so I customize my theme directly in production, but that’s already good enough for me.

I’ll continue to adapt it to suit my needs (until I find a new theme?), so feel free to make any suggestion.