https://github.com/ooloth/mu-gatsby

The sixth iteration of michaeluloth.com. Built with Gatsby, TypeScript, Styled Components, MDX and Sanity.
https://github.com/ooloth/mu-gatsby

gatsby gatsbyjs graphql mdx react reactjs sanity styled-components typescript yaml

Last synced: about 13 hours ago
JSON representation

The sixth iteration of michaeluloth.com. Built with Gatsby, TypeScript, Styled Components, MDX and Sanity.

• Host: GitHub
• URL: https://github.com/ooloth/mu-gatsby
• Owner: ooloth
• License: other
• Created: 2019-07-26T04:24:28.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T10:36:53.000Z (over 1 year ago)
• Last Synced: 2024-04-18T06:07:43.955Z (7 months ago)
• Topics: gatsby, gatsbyjs, graphql, mdx, react, reactjs, sanity, styled-components, typescript, yaml
• Language: TypeScript
• Homepage: https://mu-gatsby.netlify.app
• Size: 72.9 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# mu-gatsby

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

## Project Structure

- The site is built in [React](https://reactjs.org) using [Gatsby](https://www.gatsbyjs.org). (If you're new to Gatsby, check it out! It's a game-changer.)

- The logic is written using [TypeScript](https://www.typescriptlang.org) to enable static type checking and easier debugging

- The `CSS` is written using [styled-components](https://www.styled-components.com) 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](https://graphql.org) to pull content from the `YAML` files into the relevant React components

- The blog is written using [MDX](https://mdxjs.com) to allow React components to be used in the posts

## Deployment

- The site is hosted by [Netlify](https://www.netlify.com) (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