Building this web site with Gatsby, Contentful and Netlify, enablig it for PWA, SEO and Google Analytics

May 6th, 2021

I decided to build my own, personal website. My journey started with selecting CMS (Content Management System) which would be friendlier than WordPress which I use as part of my engagement with one of my clients. WordPress is basically fine but content creation, editing and the chores around it are more complicated than I can accept, and editors (Elementor mostly) are not very usable.

In a nutshell, I was looking for a simple and understandable way to build content and serve it. My personal criteria were: modern tech stack, ease of content management, and dev tools I can understand (I am no programming guru).

I stumbled upon a tutorial about the Gatsby.js framework, Contentful CMS and Netlify platform, The Great Gatsby Bootcamp by Andrew Mead. And that turned out to be a perfect fit! Exactly what I was looking for.

As a first step, I followed the tutorial step by step. Even today, you can see basic structure and styling of my site are still the same as in the tutorial. But once I understand the technology and dev workflow I rather focus on creating content, leaving out fancy design for later stages.

To sum up, Netlify is simple enough for me to run this website for free. It builds Gatsby's site automatically by enabling auto-publishing for the associated GitHub repository.

Contentful CMS allows me to specify different content types through the Content model (right now I have 2 content types - pages and blog posts). Writing and managing content is pretty simple and far easier than other tools. However, as a headless CMS, it just serves the content, you need to take care of styling in the application.

The content published in Contentful is used to build the Gastby site. Plugins exist for many different CMSs but Gatsby is a very developer-friendly framework to build static sites even if you are not experienced in JavaScript/React. I used Angular before so React was new to me but for the sake of developing this site turned out to be irrelevant.

Once you grasp the concept (and Andrew Meade's tutorial does great job there), all you need is:

• write a new, update or unpublish content in Contentful CMS

• trigger a manual build in Netlify - and the site is updated within minutes.

• repeat

Next, I made my website capable of working offline using gatsby-plugin-offline. This effectively adds all the necessary components to turn the website into Progressive Web Application (PWA).

It was then time to make the web visible to everyone - I made this page available to web search engines using Gatbsy plugins gatsby-plugin-sitemap and gatsby-plugin-robots-txt, added basic SEO enablement stuff using gatsby-plugin-react-helmet (Helmet is introduced in the tutorial as well, you just need to expand it a bit but all relevant info about SEO meta tags, keywords, etc. are widely available and practical examples are provided on the Gatsby plugin website). Go and open Google search console and play with it and apply what you learn there to your website.

The final touch was adding cookies to track site activity with Google Analytics - gatsby-plugin-gdpr-cookies with help of react-cookie-consent module got me going quickly.

Warning related to Gatsby: when you add first or remove the last asset like a picture from your pages, you may need to change GraphQL queries in Gatsby pages. If you do not query for specific media types, they will not render. If you have queries but remove the last asset, the query will stop working and will need to be updated.