Nahuel Sanchez

A place to write down what I discover and learn everyday at my workplace. Front-end may be the main topic, but who knows, probably I'll be publishing something else.

You're looking at all the posts published under the tag Ghost.
← Go back to the front page

A blank Ghost blog theme for development

This blogs runs on the Ghost platform built with Node.js, with a homemade theme that uses Handlebars, HTML, CSS and JavaScript, and 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.

For example, when creating the theme for this blog, I had to "deconstruct" Casper to start building on top of the ashes because I wanted a more simple theme, that has my own code wrote the way I wanted it.

Introducing the Pale Ghost blank theme

The Pale Ghost theme is a blank theme, developer ready, focused on the markup without styles, that already includes all the Ghost features for you to customize or remove in order to create your own theme.

I already searched for Ghost blank themes, and truth be told there are many out there, but none suits my desires. All the blank themes I encounter has too much JavaScript, or they are too much complex to the point they looses they purpose of being a blank theme.

This blank theme in particular is very simple, so you might be spending time in the styling part with CSS/SASS/LESS rather than working on the markup. And if you want to move stuff around, you'll find it's easy with the Pale Ghost theme as it is well deconstructed into different .hbs files for an easy development.

It also includes everything a Ghost theme can deliver, just as Casper, but with a simple implementation. The goal with this theme is to avoid the part where we as developers smack things down before actually building up.

For a more technical description of what this blank theme includes you can check the Pale Ghost theme's GitHub page.

Downloading...

You can download this blank Ghost theme from the Pale Ghost theme's GitHub page, where you'll find the "Releases" section.

Configure a Ghost blog using a custom domain with www and non-www using CloudFlare

Ghost is a blogging platform that you can host in your own web server or allow the company to host it for yourself to save time and stress (and to just focus on writing post). Think about it as a WordPress blog that has been tear down to the basic functionality like write post, tag them and no more like that.

"Ghost is a platform dedicated to one thing: Publishing." Ghost's About page

But if you're reading this it means that you already knows Ghost, you already have a blog hosted by them under an URL like yourname.ghost.io, and you already know it can cause you a big headache to configure your custom domain to point to your blog using both the www and non-www version of your domain and not just one as Ghost seems to allow.

I fought with this problem when I created this blog, so probably what I experience can help somebody.

CloudFlare DNS and Page Rules configuration

Let's assume you have the yourdomain.com domain and you want to point it to yourname.ghost.io. Also, let's go a even forward and assume you already add your custom domain to CloudFlare because the main problem here is to make both www and non-www work (because Ghost already explain how to get only one of them working).

DNS settings

Access your domain DNS setting in order to create a new CNAME record that points your subdomain www to your Ghost blog URL.

  • Type: CNAME
  • Name: www
  • Value / Domain name: yourname.ghost.io

You can take a look at my configuration in the image below. The first row is the one that matters for this tutorial, and the others are used to make Google Apps works (so I can have my email hosted by Google).

DNS settings to point www and non-www to Ghost using CloudFlare

It's very important that the configured CNAME goes through the CloudFlare servers, which means that the cloud icon at the last column should be orange as the image shows.

Page Rules setting

Lucky us CloudFlare provides a way to configure page rules to redirect somebody who types some URL to another desire URL. In this case we want to redirect the non-www version of our domain (yourdomain.com) to the www version of it (www.yourdomain.com).

Add a new rule for the URL pattern http://yourdomain.com/*, set the Forwarding option to ON, enter http://www.yourdomain.com/$1 as URL destination, and finally set the Forwarding type as Permanent - 301.

Look at my page rule for this blog to get things even more clear.

Page Rule configuration to redirect non-www URLs to www version

Probably you're wondering about the * and $1 on the URLs. They are there to match whatever comes after the domain without www in order to add the same to the www sub-domain once the redirection takes place.

For example, with this page rule as described, when somebody types yourdomain.com/this-is-a-blog-post/ it's going to be translated to www.yourdomain.com/this-is-a-blog-post/. No visitor is left behind with this configuration.

Ghost Custom Domain configuration

Finally, this whole CloudFlare setup will make sense if you go back to your Ghost blog configuration in order to set the www version of your domain as the Custom Domain of your blog.

Ghost blog configuration using www as Custom Domain


That's all it takes to have both yourdomain.com and www.yourdomain.com working with your Ghost blog.

If you can't see the results, meaning the redirection is not working for you, first take a break because it could take some minutes to take effect, or blame the cache of your browser (clean your browser cache and try again, or simple change the browser you are using).