Migrating To Ghost CMS

I have an unhealthy compulsion that makes me undertake any technology project at least twice. The first time I complete the project it feels amazing to have something new to show the world and I am (generally) happy with the final result. The 2-6 months that follow a new project involve my brain working in the background, often without my conscious awareness, on how to make the project better. By the end of this process I am somehow ashamed of the first iteration and need to do it again. Depending on the project and its size that cycle can be extremely long. For example I have remade the same game prototype 5 times now in 3 different tools. Imagine if I just released it?!

It seems that scott.cab is my new playground for this weird fetish and in v2.0 the site now runs on Ghost CMS.

What is Ghost CMS?

Ghost is an open source headless Content Management System. If you are not familiar with the term CMS but have used Wordpress then think of this as Wordpress only, better? Better might not be the right word, less opinionated maybe. For a developer that is a huge plus. Below will chronicle the week it took me to port my site over, why I moved to Ghost, and some tips for making developing for Ghost CMS a breeze.

A note on hosting...

Ghost can be hosted on their platform or self-hosted. What developer doesn't love self-hosting? Of course I picked the self hosted-solution.

My original intention was to go with AWS because I was familiar with their environment and had used their t2 micro EC2 instances in the past when they were free. For the comparative price Digital Ocean was cheaper than Amazon, they have a nice 1-Click installer for Ghost, their UI is slick and generally speaking I have wanted an excuse to support them for a while. Digital Ocean has always seemed to have an extensive list of support articles and blog posts (they also use Ghost!) so if you wanted to look at hosting it yourself my experience with them, in the short time this site has been live, has been fantastic.

Why move to Ghost?

As a developer I want to make things. I derive enjoyment from creating solutions to problems and the more elegant and self contained the solution the better. Hand rolling a responsive website, which scott.cab v1.0 was, was probably more of a statement to myself that I could do that, and do it well, rather than anything else. Having an entirely static site served out of an AWS bucket also meant a cheap website to run, but cheapness comes at a cost.

Without a robust CI/CD pipeline making changes to my website was a pain. Moreover I had to make EVERY. 👏 SINGLE. 👏 CHANGE. 👏 in code. Despite being a developer I do not want to spend every waking minute in an IDE. They are great tools for coding, writing blog posts not so much. The result was that scott.cab lost its ability to be a sandpit for me. Not something that I could easily tweak and grow over time. Add a new page? Forget about it I had to scaffold up too much HTML. Sometimes I don't feel like coding, I feel like writing. But now on Ghost give me 5 minutes and I can have you a draft!

Ghost Custom Themes are the Secret Sauce

I will admit when I ran my old company website it was on Wordpress. For much the same reasons as above I wanted something functional that I could easily add content to so I could focus most of my efforts of completing paid freelance work rather than massaging my website whenever I needed to add a new post.

My problem with Wordpress (and I stress this was ages ago and I have not tried their new headless API) is that trying to do things outside of their prescribed patterns or ecosystem seemed very difficult. Anyone who has had to work on custom Wordpress themes will attest that this can make you lose a passion for front end development.

I have found Ghost refreshing in that they provide references for many popular front end frameworks if you wish to roll your own front end entirely, or you can utilize their out-of-the-box Casper theme and tweak it as needed.

I went with the latter and fell in love with Handlebars in the process. For a website my size I don't need a full front end framework but I do need some way to organise and reuse code. Handlebars being simple, yet powerful, and rendering out to plain HTML, css and JavaScript has meant that I could create an entirely custom website free of the confines of the underlying CMS. What was originally going to be a slight deviation from Casper turned out to be something that doesn't feel template-y (I hope.) From my experiences in the past this made my decision to adopt Ghost blog a no-brainer.

Did it really all go to plan?

Mostly! I find that many technologies have good on-boarding processes these days because despite being open source they are also companies. Ghost is no different. It is when you want to do something that isn't part of the slick on-boarding where lots of these technologies fall over or show their short-comings. So far I have not had this experience with Ghost, but it is early days so we will see.

I miss sub-headings

Migrating from Medium I miss having sub-headings on my posts because they often added extra context to something that may have been intentionally silly or misleading. I am trying to find ways to abuse posts to insert this content somewhere. So far I am out of luck because I am using the excerpt in some posts (like this one) and I don't want to abuse tags that would just get messy. Stay tuned!

Some tips for developing your custom theme

If like me you want to keep each of your projects separate then your theme really should be separate from your local working instance of ghost. Nesting your repo inside your ghost install is OK, I guess, but if you decide you want a clean slate and you blow away your ghost install you're going to have to clone your work and start all over again.

My top tip for theme development is to symlink your repo folder to /path/to/ghost/content/themes/theme-name. This allows you to work on your ghost theme in a repo of your choosing and lets your Ghost install live somewhere more appropriate.

Uploading themes

I develop on a Windows machine because I am afraid of being hip and owning a Mac, I also coincidentally do not own plaid or have the ability to grow facial hair. However, my Digital Ocean 1-Click Installer runs on Ubuntu.

If you are a diligent developer like me who reads the manual then you might be surprised to find that after running zip on your custom theme that it fails to upload to your website. This might be a an npm thing but I found that zipping the project through a linux terminal (like Ubuntu on WSL) fixed that problem for me.

What is next?

Hopefully this move allows me to add more content to my site, this article was one of three that I thought of while porting my site alone. It is refreshing to have an article backlog and not a technical one for a change! I also need to create a backup plan for my blog as there is no out-of-the-box solution for self hosted Ghost installs. For now I have exported a back up just in case but I would like to automate that some time next week.

Now I just have to not think about scott.cab v3.0...