We last refreshed our website about a year ago, and we took advantage of moving from Wordpress to exploring new technologies based on JAMStack and using Gatsby as a static site generator and NetlifyCMS as a Git-based headless CMS. We used the Gatsby + Netlify CMS Starter created by Netlify as a starting point.

Much has changed since then. Gatsby has evolved to be much more than a static site generator. According to them:

Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.

We decided to take advantage of the latest features in Gatsby, including functions support, improved image optimisation and MDX, and redesigned our website using TailwindCSS and TailwindUI.

Features of the new website include:

• Full-featured blog with frontmatter (title, description, author, date, image, tags)
• Tags index page and individual tag pages
• Pagination in posts and tag pages
• Support for RSS feed, sitemap and robots.txt
• Automatic optimization of images in Markdown/MDX posts
• SVG design (unDraw, Hero Patterns, HeroIcons)
• Support for code syntax highlighting
• Manifest and offline support
• Contact form using sendgrid email and Gatsby functions
• Full SEO support (via React Helmet) including Open Graph, Twitter Cards and Schema.org via JSON-LD

The full technology stack used in our website now includes:

• Gatsby
• TypeScript
• TailwindCSS and TailwindUI
• HeroIcons
• Hero Patterns
• HeadlessUI
• unDraw for illustrations
• MDX and Markdown
• ESLintfor type-checking
• SendGrid email delivery
• Schema.org and JSON for Linking Data
• Open Graph used by Facebook
• Twitter Cards