Open Development: Ghost Blog Theme

Joseph Eigenraam -

Like many software developers when I think about creating a side-hustle, or generating passive income, I often default to thinking about website contract work.

But how do you start building a client-base when the vast majority of your career has been spent building software behind closed doors? When your entire portfolio is locked behind NDA's or are parts of a much wider whole?

I honestly have no idea 🤷‍♂️

But I'm hoping creating and selling themes for popular blog-engines is a start. A way to provide value, to build a public portfolio and hopefully attract opportunities for bigger work.

So this mini-series will document my journey creating the theme for this site - and how I'll go about making it usable for others.

Project setup + developer environment

This site runs using the popular blog engine Ghost. Their ThemeStarter does a great job introducing the basic concepts of a ghost theme and their robust official documentation covers any missing gaps.

Throw in a brief guide from LayeredCraft on how to setup TailwindCSS and we have a basic development environment up and running in 15minutes.

Basic design

Going into this I knew this site was going to be a weird mix of my all previous attempts; a personal portfolio, a resume, a software development blog, a place to talk about my hobbies and even display my photography.

My own little corner of the internet to represent my whole self.

With such an over-complicated mission-statement I wanted the design to be as minimalist as possible. To focus readers on the content and let the theme fade into the background.

That left me with a few core requirements:

  • As a portfolio - I wanted a two-panel layout on the home page to showcase both the site-content and who I as an individual
  • As a software-development blog - I wanted posts to be able to support long-form articles with complicated nested headings
  • As a hobby-blog - I wanted the theme to not feel too corporate or overpowering, as a lot of my writing won't be formal
  • As a resume - it should be 'professional-enough' that I wouldn't feel awkward showing colleagues, clients or employers
  • As a place to showcase my photography - I needed few (or no!) colours that would skew how photos were perceived.

Those requirements ultimately resulted in the minimalist card-based layout you see now.

  • a) minimalist design without overbearing colours or typography
  • b) two column layout on the home page that makes it clear this is a portfolio
  • c) one-to-two column layout on posts to support both professional and casual content
  • d) 'tag' pages to offer views for the different kinds of content
  • e) photo gallery support

Next steps?

With the basic design up and running it's time to focus on making it usable by other people - a genuine 'MVP'.

After doing a little research on what Ghost themes have in common on Themeforest I put together this short-list of must haves:

  • Responsive / Mobile Friendly
  • Light/Dark Mode
  • 404 Page
  • Robust Recommendations / 'Read Next' section
  • Optimised page load speed

And to keep this fun for myself I've added a few extra bells & whistles:

  • Customisable type-face options
  • Customisable 'read-next' sections (bottom of page vs sidebar)

Tune in next time as we make this theme ready for sale.