How to move from Wordpress.com to Ghost in a bazillion easy steps

In my last post I wrote about why I moved to Ghost, and why I made some particular design decisions. I thought it might be useful to some people if I also wrote up how I did the transfer, as there are a few moving parts here. Most of it is not terribly difficult, but it took a little while for me to get my head around what needed to be done. If you're thinking about doing something similar, this might save you some time.

Starting point

At the beginning of the process I already had

• a blog hosted at Wordpress.com, including access to change the CSS (but none of the underlying HTML)
• a domain name mapped to my Wordpress.com blog
• some shared hosting space at Gandi
• a second domain name mapped to my Gandi instance
• a Wordpress.org install
• a hosted Ghost install at hugh.ghost.io

As you can see, I was starting to spread my web presence across too many sites, and part of what I want to do with Ghost is bring some of these things back together.

Why a hosted install again?

The obvious question that some people have already asked me is why I went with the Ghost Foundation hosted option rather than self-hosting. There are a few reasons:

1. Ultimately, I'm lazy. There is no 'famous five minute install' for Ghost. It's getting easier with every release, but the install instructions still start with 'open up a command line...'.
2. I got three months free hosting as part of my Kickstarter backer reward. It seemed a shame to waste it.
3. Ghost runs on node.js, and there are currently few cheap shared hosting services that offer node.js instances. Gandi was not one of them when Ghost first shipped, but recently they have added it as an option. I've had one failed attempt to install Ghost on Gandi, but there is now a guide to doing just this using Git. Add that to the list of things I need to learn.
4. It's only $5 a month.

One of the great things about Ghost.org hosting is that they bill by the month, not by the year. This means that I'll be able to move to Gandi or elsewhere as soon as I'm comfortable that I've got a bit of an idea what I'm doing, rather than waiting for an annual subscription to run out.

Design

Like Wordpress, the Ghost project encourages developers to build themes to share or sell. One of the advantages of being involved so early with Ghost is that everything is so new that it is easier to see how things fit together. I'd like to build one or more themes myself, and it doesn't seem like such an outlandish proposal when I look at how existing themes are structured - there's really not that much code involved once you work out the building blocks.

I had some ideas about what I wanted the design to look like from playing around at www.hugh.li. The theme I settled on as a starting point was Stefan Laketa's Orre theme. It features a nice scrolling cover page and a clean layout. Because Ghost gives full access to theme files, and they're organised in a logical way, it was pretty easy to

• change the fonts (to Google fonts Maven Pro and Advent Pro);
• adjust a couple of icons to the fade-in menu to include a link to the 'About' page and an email link, and remove Stefan's links to Github and Google+;
• adjust the footer to include a small text menu, a Creative Commons license notice and a nice link through to Ghost.org;
• add some CSS to create a 'drop-cap' (Gilda Display font) to the first letter of each post;
• adjust the colour scheme;
• change the post footer to include a link to easily share by email, and an adjustment to what is now 'Discuss'.
• add some tracking code

All of these things by themselves are fairly straightforward, but they required a lot of tinkering to get right. The default header for posts and pages, for example, uses the cover image from the front page, but I couldn't position it in a consistent way that left the header text easy to read (one of the great things about the Orre theme is that it's responsive, but that made positioning the text relative to the background image pretty tricky). In the end I decided to change it to a plain black background, which solved the problem and looked better anyway. I'm still not satisfied that the drop-cap is consistently giving the result I want, but I decided I was getting a little too OCD and have left it for the time being.

CSS/LESS/SASS/SCSS

One thing you count on with coding is that someone is always trying to work out a way to make things easier. CSS was born out of a frustration with having to include coding for the design in each HTML page, even if all the design elements were the same for every page on a whole site. It seems that web designers