How I Built My Website With Gatsby, Forestry and Netlify

From design to deployment, I break down the tools and processes I used to create my basic site with blog pages

June 05, 20202 mins to read

  • SSG
  • Git based CMS
  • JamStack

Many months ago I was introduced to Gatsby and the "JamStack", and the revelation that simplicity is better for the developer and user experience.

Gatsby is a classed as a Static Site Generator (SSG), but is more accurately a Static React App Generator. This means you get the speed benefits of serving a static pages alongside all the perks of the React DOM through the process of hydration.

With the drive to build something fast, I decided to rebuild my personal site even though I didn't have any content planned for it. I cloned the Gatsby starter, changed the text and styling and, at this point, my purposeless was ready to deploy.

I could have set up some hosting and uploaded my built site every time I made a change in the traditional way, but this would have been a very manual and time consuming process. Thankfully hosting services such as Netlify exist with free tiers for individuals to host their sites, but the greatest benefit to using Netlify over traditional web hosting is their deployment. Linking my project's git repo to Netlify enabled automatic builds and deploys, listening to changes in my source code to trigger an update.

I now have the ability to deploy my site from the command line, while I'm still working.

This was impressive to me and I was proud of how quickly I was able to put this all together, albeit not much. Next, I needed a domain name and some content.

I acquired my domain and linked it to Netlify's DNS, which automatically issues a certificate so my site is now secure.

Gatsby creates a unified GraphQL layer, so all my content sources can be queried from the same place, whether this be through a CMS with GraphQL API or local files in the project. The latter means that CMSs like Forestry, which save the content to the git repo, can be queried with the same ease as an API. As mentioned earlier, the site will deploy when there are changes in the source code, so any content I publish will automatically trigger a deploy. Double win, the site is always up to date! Automatic deploys can be set up with API CMSs via webhooks, but I wanted to keep things simple for this site.

With my CMS set up and writing to my repo, I then had to configure gatsby to read from the folder where my content will be stored. This is really easy to do using Gatsby plugins. Once configured, I am able to see my blog posts in the GrapQL explorer and I can begin generating static pages based on the content provided by Forestry. I added;

  • A blog page with page query to generate links to each post
  • A query in gatsby-node to fetch and create pages for each blog post
  • A template blog post page used in the above

Once set up, I now have a blog page, and a page for each blog post. Updating the code or adding a new post triggers a deploy, so I can be certain my site is always up to date.

Serving static or server rendered pages has implicit SEO benefits over client rendered pages, as web crawlers are able to read through the HTML in the response without having to wait for a client page load.