Designing my website to use a custom Ghost theme
My new website has been in the making for some time. In fact, it's been over 10 months since I decided to do some changes and add a bit more functionality outside the conventional blog posts. My current website is built with Ghost and it runs on Node.js.
A brief history
I've started blogging in 2012. It was shortly after the SQLBits conference in London when I accepted a challenge that required some blogging. The challenge was simple: read 1 book per month and then blog about it. Committing to write a blog post is a great incentive to stick to your promise, since there is accountability. People expect to read your book reviews once you've finished reading them. The "secret" goal behind this challenge was to build a habit and at the same time benefit from reading and writing about the experience. Sadly, I didn't manage to complete the challenge. I did, however, get something great out of it: writing regularly.
I set up my blog to use a WordPress site running on Azure Websites. WordPress was slow and clunky and I didn't like the commenting system. It did the job, but I spent a lot of time erasing random spam comments. Eventually it was all too much and I jumped at the first chance of using something better.
The Ghost era
I've been running Ghost since 2013. I decide to use Ghost after reading a post by Scott Hanselman about this new, great blogging engine called Ghost. It has been running great for over 2 years but I wanted the site to do more, especially now that the traffic has started to grow. In Nov 2014 I asked a graphic designer friend, to design something new for my website. I wanted a simple, clean and functional website with the main focus on the content. It was also around that time that I Ghost's limitations too irritating, so I decide to move to MiniBlog. MiniBlog is a blog engine written by Mads Kristensen (Microsoft) designed to run on .NET and Razor webpages. It's very lightweight, fast and in familiar territory (.NET, Razor etc)
With the new design in place, I started hacking together a fork of MiniBlog in order to match the designs. Unfortunately, as it happens with all pet projects, other, more pressing work took all my time and I dropped my website. For many months I couldn't even look at my website. By the time I was free to start work on it, a lot had changed:
- A new version of Ghost (0.6.4) with many cool features (better navigation, better engine, better admin, static pages etc)
- I wanted to try out Node.js and write some code
- I didn't want to maintain another piece of code that would require significant amount of work every time an update was made available.
Ghost, Node.js and themes
The new version of Ghost (0.6.4) met most of my requirements!
- static pages
- built-in navigation
- tag filtering
- a much improved admin section.
- many more
I was sold. I downloaded the latest code, built it and within 5 minutes I had Ghost running on my local machine with node.js. After spending some time looking at the documentation, it was clear that all I needed to do to create my new website was to add a new Theme. Ghost comes with a default theme called Casper and has excellent support for 3rd party themes. Most of the Ghost sites out there run the default theme. There's an option to download free or paid-for themes, but, in this instance, I wanted to use my own designs.
Putting the puzzle pieces together
It took a week to get the visuals translated in code. In the process I learned quite a bit about how the engine really works and it was very interesting to see how simple it was to create and add my own theme. The Ghost platform is incredibly powerful and allows you to do a lot of customization and overriding of the base files in order to change the appearance of your website. Overall, it was a great experience and I've love working with this stack: Visual Studio Code, Node.js and Ghost.