Personal Website with Gatsby

I decided my old WordPress site needed a revamp, and I really wanted a simple and quick way to create posts and customise pages.
So I decided to build a new website the the Gatsby.js framework.

Here’s why…

  1. Possible to use Markdown files as a data-source, which for me is a much quicker and efficient way to publish posts.
  2. Free to host Netlify on Github Pages.
  3. Great documentation and easy to get started with.
  4. It’s built with React, Node.js and GraphQL. Which I find quick to customise to my requirements.
  5. Overall performance and support for PWAs.

Regarding the last point, with a little bit of fine tuning I was able to achieve top scores with Lighthouse audits.

lighthouse audits

Some features I added include:

  • Post Tags.
  • Pagination for Posts & Tags pages.
  • SEO, Open Graph Tags and canonical links with react helmet.
  • Google Analytics and a sitemap.
  • Image, iFrame and Emogi Support for Markdown 😄
  • About page with an experience timeline and skill bars.
  • A custom 404 page 😜
  • Sidebar navigation with social media links and a SVG logo with transition on-hover effect.
  • typography.js and compiling CSS with SASS modules.
  • Code highlighting with prismjs.
  • And more …