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:
- 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...'.
- I got three months free hosting as part of my Kickstarter backer reward. It seemed a shame to waste it.
- 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.
- 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 still found CSS too onerous, however, and thus was born SASS - a CSS 'extension language' or preprocessor. The Orre theme makes use of SASS by using separate SCSS files for fonts, colours and layout, which then combine to create one style.css file. This makes changing things like colour schemes and fonts very easy. The only real problem I had is that my first introduction to CSS preprocessing languages was through LESS - a similar but subtly different language that was inspired by SASS and then in turn influenced the development of SASS and its SCSS syntax. Some Ghost themes ship with plain CSS, some with SASS files and some with LESS. Confused? I know I was. I'm now counting down the days before the web design community decided that CSS preprocessing is just too time consuming, and someone invents a preprocessing language for SASS.
Export-Import for blogs - not as simple as it sounds
Exporting from Wordpress wasn't quite as straightforward as I'd hoped, because Wordpress.com (the official hosted version run by Automattic) and Wordpress.org (the open source blogging software) have very different functionalities. There is an official 'export to Ghost' Wordpress plugin, but Wordpress.com users can't install plugins, so it's a bit useless if you're not self-hosting.
Luckily, I also have a self-hosted Wordpress install which I have been using to get a better understanding of the backend of Wordpress (which is why the current design there looks terrible!). This allowed me to use the blog.hugh.li site as an intermediary between Wordpress.com and Ghost. Wordpress.com has a fairly straightforward interface for importing and exporting blogs, as does the self-hosted flavour. With my blog content safely transferred onto my self-hosted site, it was then just a matter of installing the Ghost plugin, and exporting it again.
I could have just exported from Wordpress.com and then seen what happened when I imported direct to Ghost, but given that the structures are completely different I don't really know what would have happened. Using an official Ghost plugin designed for the job seemed like the prudent course of action. One issue which could be a big problem for some blogs but didn't particularly worry me is that Ghost has some issues with featured images. With my Wordpress install I had been using these to appear in the header to brighten up my posts and links to them (which sometimes grab the picture, e.g. on Google+). Currently I don't know whether those pictures transferred into my Ghost install. They probably did, but the way my theme works means they're not displayed - so maybe they didn't. Images inside posts (e.g. some graphs in my very wary posts) did transfer over, albeit with some interesting borders.
The last thing to do was to import my newly exported file into Ghost. Importing to Ghost.io is also pretty straightforward - it's as easy as attaching a file to an email.
So all I had to do was export-import-export-import and everything transferred over :-)
DNS and Permalinks
This was the hardest and most frustrating part of the whole process. When you own a domain name, you need to set up a DNS record so that browsers know where to find your site. Whilst this is not in itself particularly difficult, the DNS system is rather arcane to most of us, and it's kind of terrifying to change records and trust that you haven't accidentally killed your own site.
My domain name is actually still registered through Wordpress.com, but I can access the DNS record and point it somewhere else. The plan was to simply send traffic over to hugh.ghost.io but I hit a snag when I discovered that the Ghost hosting doesn't support the use of A-records for 'bare' domains. What this means in simple terms is that if my blog had always been at www.hughrundle.net or blog.hughrundle.net it would have been really easy to redirect with a 'CNAME record', but since it is at hughrundle.net I had to go through a more convoluted route. I took Ghost.org's advice and registered with Cloudflare, ran my site through their servers and then pointed all hughrundle.net traffic to hugh.ghost.io. This sounds more complicated than it actually is.
This situation is, however, kind of annoying, because
- I am now signed up to another service I didn't really want, and
- I was trying to reduce the number of entities that might be tracking visitors to my site (more on this below).
The whole reason I had to do all of this was so that all my permalinks didn't break. Every post has its own URL, but in exporting my posts over to Ghost I had to be careful to maintain the same URL structure, otherwise every link to my blog would give you a 404 page. A really nice feature of the hosted Ghost product is that you can optionally set the URL structure to a date structure (e.g. /2014/02/25/hughrundle-net-is-moving rather than /hughrundle-net-is-moving/) - and you can change it at any time, like a toggle. Year/Month/Day/title is the only option at the moment, which was just as well for me because that's what I was already using. In the end, everything carried over beautifully except for my RSS feed. I had a suspicion that would happen, but haven't yet figured out if I can adjust the feed coding somehow to push out updates to people who subscribed previously.
Displaying inbound links
One of the things I've lost without comments is a trackback/pingback system for linking back to posts with a link to one of my own posts. I am however tracking analytics (see below) which includes information about referrers - so as long as someone clicks on your link to me, I'll see it. I intend to keep track of these and manually add a link to any posts or articles that 'cite' me. I've already gone back and done this with previous posts.
Analytics and the new Panopticon
Ghost will eventually include a stats feature on the dashboard, but it doesn't currently. I find tracking visits to my blog useful because it tells me how popular different topics are, how people are finding my posts (i.e. via Twitter, search engine or some other way) and from where they are visiting. I do however have real concerns about the way every big web company tracks our every move online. Going through the process of setting up a website with my own domain name has brought home to me the level to which the web is a giant Panopticon, with every single service wanting to track everything they can. 'The Cloud' might make things easier, but it comes at the cost of control. Cloudflare's entry level service is provided free of charge, but if they're not charging me, then someone else is paying them for what I provide. Presumably this is information about my visitors since I've now routed everyone through their servers. It's hard not to wonder at least fleetingly whether CloudFlare is just a giant NSA operation.
Prior to realising the need to use Cloudflare, I thought I may have partially resolved the surveillance problem by installing Piwik on my space at Gandi in order to handle visitor analytics. Piwik isn't a cloud service, it's a software program that you install on your own server to track website visits. It has all the functionality of Google Analytics, is open source, and encourages users to respect their visitors' privacy through various means (for example, the option to opt-out on my new Privacy page. It also allows for importing and exporting of data - it's just a pity that Wordpress.com doesn't provide the same export functionality so I couldn't import the old data.
I decided to compromise on the Cloudflare situation for the time being, but it's likely I'll move again in a few months once I'm comfortable with self-hosting, which will enable me to move off Cloudflare and consolidate everything.
So there you go. Ultimately moving my blog wasn't too hard, it just involved some steps I hadn't expected, and I had to learn a few things at nearly every step. I highly recommend it :-)