Building this blog with Ghost

As I've mentioned in the introduction this blog built on top of the Ghost publishing platform. Purely so I could be lazy, don't have to think about everything related to building a blog, managing data, annoying SEO stuff and whatnot.

Even tho it was way less work than building a blog from scratch myself I still had some things to do. Starting with choosing a publishing platform which included all the features that I need: Blog posts & Separate pages manageable from a simple, easy to use admin panel. My search ended up at Ghost, a free to use (when self-hosted) publishing platform with simplicity in everything.

After choosing for Ghost I started thinking about the design/template and figured out quickly this was something I didn't want to spend a lot of time on. First of all I'm definitely not a designer, and also not really a big fan of creating front-ends from scratch. That caused me to search on ThemeForest for a simple html template which I could easily turn into a Ghost template

click

Biggest steps done! I used to get stuck at this part whenever I had an idea to start a project and couldn't get a decent template to work with, for me personally this was a win.

First time transforming an html template towards a Ghost Theme and I gotta say this was a pretty easy process. You can just look at the default theme which is built with Handlebars and vanilla Javascript to display all the data that is available on different pages.

Since displaying all the data was quite easy to fix I decided to have a good look at how the template is set up and found several things I wanted to improve:

  1. First of all I stripped down the template to only the parts I really needed/wanted to use.
  2. Made some small tweaks to the styling.
  3. Replaced the bootstrap css with a minimal version of bootstrap which includes only the bare minimum classes that are currently used.
  4. Completely removed jQuery & slicknav from the source code and replaced it with vanilla javascript for the parts I needed.
  5. Added lazyloading using the lozad library.

This really reduced the size of code that is being loaded on every single page load, at this moment the total size of the homepage is only 176kb of data. Which could be about 80kb less if I removed the photo on the right side of the page. If we check this blog itself, including 1 image & disquss comments enabled the total size is 530kb which I'm more than happy with!

After doing all this stuff on my local pc I had to put it on the web and with Ghost there are multiple options. Obviously you can use the subscription plan of the company it self and that would cost about $36 billed monthly. As you can assume I passed on this opportunity and chose a different route, at DigitalOcean there is a 1 click install to install ghost on a VPS and do everything related to installing the platform. In my case I chose to install it on the smallest VPS available which is about $5 a month, enabled the back-up function for another $1 a month and finished the setup. This saves $30 a month compared to their option with the only downside that updates anything server related will be my problem.

At the end of the road I've worked on this a couple evenings and probably spent to much time on it just for fun. When working with external API's on a daily basis at work, doing this kinda stuff for a personal website kinda feels therapeutic. Zero pressure of finishing something and just playing around with optimizing page speed on such a small project feels like a walk in the park.

Previous Post Introduction