Colin Nederkoorn

Migrating this blog from Jekyll to Ghost

A better editing experience while still being able to use a static site won me over.


I was reasonably happy with Jekyll as a way to run my personal blog. The precision and readability of writing in Markdown eliminated my frustration with complex visual editors that often generate garbage code that you can't see or fix when they inevitably do something wrong.

The biggest challenge I had with Jekyll or really any static site generator was dealing with images. How do you resize, compress, or upload images to make them available without pulling your hair out?

To solve my image resizing and compressing challenge, for marketing emails I built a project to let me write in markdown and also resize images in a standard way using a super fast image library named Sharp. Ghost handles resizing and compressing for me using Sharp, and I don't have to worry about messing around with uploading anywhere.

Even though I'm using Ghost for content management, I decided to still use a Static Site Generator and wanted to play around with Eleventy after reading a blog post about how to use Eleventy with Ghost.

Here are the things I needed to do to complete the migration:

Exporting posts from Jekyll

I used which exports in to a JSON file ready to import in to Ghost when you build your Jekyll site.

Running Ghost

There are 3 interesting ways to run Ghost when you're using it as a CMS primarily.

  1. On your home network. As long as it's publicly accessible to Netlify, you can run it obfuscated at home. I run Unraid as another fun project at home and there are people hosting their blogs at home using Unraid and Ghost.
  2. DigitalOcean (or another host). I'm using DO because it works with 1-click through their marketplace. You do have to log in from time to time to upgrade it though.
  3. Pay Ghost $29 a month. I may switch to this to remove the hassle (fun?) of hosting myself. If you're curious to see how nice it is to write in Ghost, they have a trial.

Importing in to Ghost

Once you have Ghost running, you can import your content.

I had manually moved a few posts over to test before I was able to get the Jekyll export script working and it was a bit stressful to do a big import and be concerned with duplicate content and having to do a lot of clean up. Overall though, it was quite easy.

Using eleventy to serve up Ghost posts

You could just find a nice Ghost theme. For most people that's a good option. There are some nice aspects of the platform that you won't get if you're just using the content API and a static site generator. For example, Ghost recently added the ability to have paid memberships as well as automatically mail new posts to subscribers.

But this is a fun hobby and I wanted to go further. Out of the supported options, I picked Eleventy because I'm less comfortable with Gatsby, and Eleventy seemed like it was the most similar to Jekyll.

The easiest way to get started is to clone the starter and update the API key in .env and spin up your local server to see your posts.

Goal: Invisibly replace Jekyll

My goal was to make a drop-in replacement for my old blog and just replace the underlying tech. I ended up using the same CSS and HTML from my Jekyll blog wherever possible.

There were small modifications to my structure and opportunities for improvements like pagination on the homepage rather than a giant list.

The starter pack had a few bugs that I'd like to try and fix and submit pull requests for example the dates in the RSS feed are broken by default.

Deploying to Netlify

After generating a static site, you need to host it somewhere. Even better than you generating it, Netlify handles the whole build process generating a static site for me and then they host it. In fact, I also use Netlify for the email signup form on this page.

Netlify's build process for this site takes about 1 minute, 4 seconds. With a site backed by a database, updating typos is faster, but there's a tradeoff where unless your server is big enough, you might go down. I'm happy to make the tradeoff and that's a pretty fast deploy all things considered.

Fast enough deploy times for me. 

Deploys get kicked off in 2 different ways:

  1. Github gets a new commit to master.
  2. Content gets updated in Ghost
Netlify kicks off a build any time content gets updated

What do I think?

Overall, I really like this solution and I want to support the JAMstack movement as well as Netlify, Ghost, and Eleventy.

However, I know most people aren't interested in what I have to say about how I blog! Now that I've got this set up, I can easily write in Ulysses which can publish to Ghost, or in the Ghost interface itself, I'm planning to write more about the lessons I've learned being CEO at a SaaS company. See you in the next one.