Migrating this site to Ghost and Gatsby

Over the last few weeks I've been working on this brand new redesign for the site. The old site was a few years old and I felt it was time for a makeover. While revising the site, I came up with several priorities that helped me shape the new design.

Legibility

Over anything else, I wanted the new site to be very legible. I opted for larger text sizes and the font 'Avenir Next' which I find to be modern and easy to read. I choose to build the website's layout in a text-first way – that is to say that if the site's CSS failed to load, it would still be readable. In addition, I ensured the semantics of the html were clear and accurate for screen readers.

Aesthetics

I spent time planning the site's design using Sketch which I highly recommend.

I went through several iterations and gave myself time to process each one, sometimes coming back to it days later. I also tried my hand at coming up with a logo for my site – this also took a few iterations and I will likely come back to it in the future.

After using Sketch, I used Tailwind CSS when applying the style. I really like the way Tailwind allows you to apply existing CSS knowledge and techniques without the need to learn a new framework's component system. I definitly plan on using this tool on all of my future projects.

Ease of use

I wanted visitors to be able to easily navigate the site but I also wanted my writing experience to be better. Giving myself a more pleasant writing experience will help me write more frequently while enjoying the process.

Previously, the site was built using Hugo – a static site generator. Hugo was great but it could be cumbersome to publish new content. Now, the site is built using Gatsby – which is also a static site generator– but I'm also using Ghost to manage the content and publish the content automatically.

Speed

I wanted the site to be fast to load for all users – and Gatsby has been extremely fast in the way that it renders content to users intelligently – but being a static site means that all of the content can easily be served over a content delivery network (CDN). Netlify is an absolutely fantastic service that offers a CDN, along with other helpful products, which I'm using to host this site. I can't recommend them enough.

Overall, I'm very pleased with the result. I've added an email newsletter to the mix and I'm planning on adding another section for various projects of mine. I'm looking forward writing more for the site!

Subscribe

Get notified when I write something new, hear about my escapades building software products, and get updates on new programming tutorials.

You can also subscribe via RSS.