Today I decided to spend some time on my blog back again and decided to upgrade ghost to the latest version. It was running on v0.11 and a lot has changed lately on ghost. A lot of new goodies 🎉

Upgrade Ghost

I checked the upgrade docs and see that a lot of breaking changes has landed on the latest version and the upgrade path is not that easy.

Unlike previous upgrades you will be creating a brand new install and importing your JSON export, instead of migrating the old one. As with previous upgrades, we very strongly recommend backing up before you begin.

That definitely does not look something straightforward for sure.

I followed the instructions there and the install/upgrade went smooth.

A few things that I love during the process:

• ghost CLI tool (updating ghost is now easy: ghost update)
• nginx
• automatically configure SSL using lets encrypt.
• Custom card data for twitter/facebook.
• Custom Excerpts
• Built in Unsplash integration

Previously I had to configure all those myself and it was a bit of painful thing to do that each time. Also previously I was using Caddy web server instead of nginx.

So all went well and now the blog is running on v1.17.3 🎉🎉

Casper theme

The team behind ghost has done some marvelous job with updating Casper theme. you can read more about the changes made here

Though love the changes it added, I also disliked a few things, its personal preferences of course :)

• No syntax highlighting
• Font size
• Cards instead list

So I decided to tweak the default Casper theme.

Add Syntax highlighting

To add syntax highlighting there are a few options. Add

• prism.js
• highlight.js

I chose to go with highlight.js bcos adding prism.js needs editing my older posts to add the language selector.

To add highlight.js, just add the following code to the header section of code-injection section in the admin panel so that the css is loaded into your blog.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/tomorrow-night-eighties.min.css">

The following js code needs to be added to the footer section of the code injector

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

That's it and now you have syntax highlighting enabled for your blog.

Tweaking the layout: list instead of cards and bigger fonts.

I did not quite like the new layout of the Casper theme. Cards instead of a list. Also, the fonts were smaller. But the good thing is that you can always tweak the theme and make it the way you like.

So I tweaked a few css classes to make the layout the way I liked. The following are the changes that I made:

// bigger cover image
.site-header {
  height: 50vh
}

// a little bit wider lists
.inner {
  max-width: 1200px;    
}

// bigger fonts
.post-template .kg-card-markdown>p {
  font-size: 1.25em;
  line-height: 1.5em
}
.post-full-content pre code {
  font-size: 1.55em;
  line-height: 1.5em
}
.post-card-excerpt p {
  font-size: 1.55em;
  line-height: 1.5em
}
.post-card-title {
  font-size: 2em
}

// tweaks for the code/syntax highlights
pre {
  word-wrap: normal;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  font-size: 1em;
  line-height: 1.3em
}
pre code,
pre tt {
  white-space: pre
}

// don't use the margin for the lists
.post-card {
  min-height: 0
}

// Change cards to table
.read-next-feed .post-card,
.post-feed {
  display: flex;
}

// keep the card layout for similar posts
.post-card,
.post-feed {
  display: table
}

// smaller subscribers form
.subscribe-form {
  padding: 3.0vw;
}

So that's it, looks much better now.

Let me know how you feel the new ghost and Casper theme and any nice tweaks that you have made.

Sharing is caring.! 🍻