New Websites Up!

Published: July 29th, 2021

It's done! My new website is now live.

I don't pretend to be an epic designer, or have amazing design skills, but I think I have a good grasp of the basics.

I wanted to quickly mention a few websites that I used to help me with creating a design/theme that is aesthetically pleasing. Sometimes I just use these for inspiration too:

I'm pretty happy with how the website looks at the moment, and I'll definitely be adding to as and when I have time and energy.

Website Technology

I've used Gatsby as the framework for this website. I'm really enjoying it, along with GraphQL. It just automagically does all the optimisations for you!

For the back-end I've used the Headless CMS Sanity, which feeds the blog content onto the site. I might later add the pages into Sanity as well (like I did with my Cheeky Tea website) but for now that parts hard coded.

I've avoided using a CSS framework like Tailwind or Material, because I really like scoping the CSS into each of the components using Styled Components. I also wanted my site to look a bit unique.

Hosting

The website is built and hosted via Netlify, which is connected to my GitHub account and allows auto-deploys whenever I push code! Pretty cool. Oh, it's all completely free as well ;)

Something I need to try at some point is Gatsby Cloud, it looks like they have some kind of building and hosting offer (with a free option) especially for Gatsby websites.

Snags

GraphQL Fragments in Gatsby-Node.js

I was trying to use GraphQL fragments in my gatsby-node.js file, to pass images to the blog template page.

Annoyingly, it's not possible to use fragments here. After a bit of frustration and research I found this GitHub issue with a really helpful mention from PieterT2000 to the written-out fragments used with Gatsby Image - thanks!

Upgrade to Gatsby v3

I started building the site on Gatsby v2.26.1 and decided afterwards to migrate to Gatsby v3.10.2.

The main breaking changes are with how the images are dealt with, there is a new image plugin and the old package is now deprecated. Also a change in how the GraphQL/API queries work for the images.

Below is a quick before and after of the image components.

Before

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Img from "gatsby-image";

const Image = ({ alt }) => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "cheeky-tea.png" }) {
        childImageSharp {
          fluid(maxWidth: 750, maxHeight: 500) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  if (!data?.placeholderImage?.childImageSharp?.fluid) {
    return <div>Picture not found</div>
  }

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} alt={alt} />
}

export default Image

After

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";

const Image = ({ alt }) => {
  const data = useStaticQuery(graphql`
      query {
        placeholderImage: file(relativePath: { eq: "cheeky-tea.png" }) {
          childImageSharp {
            gatsbyImageData(layout: CONSTRAINED)
          }
        }
      }
  `)

  if (!data?.placeholderImage?.childImageSharp?.gatsbyImageData) {
    return <div>Picture not found</div>
  }

  return <GatsbyImage image={data.placeholderImage.childImageSharp.gatsbyImageData} alt={alt} />
}

export default Image

The migration guide from Gatsby helped a ton in making these changes and package updates, I recommend you read through that if you're interested.

I'm also facing a small issue with Gatsby when shutting down the development server. It seems to be quite wide spread, see here. So, for now I'm running on Gatsby v2.

Extras

A couple things I want to do is have the ability to add comments to the blog, and I would also love to see if I can display what I'm listening to on Spotify in real time, using their API.

All the code for the site is available on GitHub for anyone to view/fork/use. I hope it's useful for someone! Peace out ✌️

Categories: JavaScript, Gatsby

George McEntegart

I'm a New Zealand-born web developer based in North Devon, UK. I love to help people grow their brands and businesses.