mu-gatsby

This is the source code for the sixth version of my personal website.

Project Structure

The site is built in React using Gatsby. (If you're new to Gatsby, check it out! It's a game-changer.)
The logic is written using TypeScript to enable static type checking and easier debugging
The CSS is written using styled-components to make it easy to avoid styling clashes, remove styles without unintended side effects, and automatically load only styles that are actually used
The content is stored in YAML files in content/ (separated for easy updating)
The site uses GraphQL to pull content from the YAML files into the relevant React components
The blog is written using MDX to allow React components to be used in the posts

The site is hosted by Netlify (free tier)
When this repo changes, Netlify automatically builds a new version of the site
The build process runs the site's GraphQL queries and generates optimized static assets (i.e. HTML + JS + images)
The static files are deployed to Netlify's global CDN
When a user visits the site, the static version loads first (for a fast loading experience)
The site then hydrates into a single-page React app