Gatsby Material Starter

A Material Design oriented blog starter for GatsbyJS equipped with advanced features such as SEO, image optimization, PWA capabilities and infinite scrolling feeds.

Gatsby
Author vagr9k
Github Stars 495
Last Commit Oct 23, 2021
Gatsby Material Starter screenshot

A starter skeleton with Material Design in mind

This starter aims to provide a minimal base for building advanced GatsbyJS powered websites by using the latest technologies to simplify your process.

Starter supports both TypeScript and JavaScript, comes with Jest and Cypress configurations and allows you to write Unit/Integration/E2E tests out of the box.

Demo

Material Demo.

Features

  • Gatsby v3 support
  • First class TypeScript support (for query data and components exposed by the theme)
  • Material UI V5 components
  • Emotion used for styling
  • Posts in MDX
    • Code syntax highlighting
    • Embed videos
    • Embed iframes
  • Infinite Scrolling
  • React Query for client side API calls
  • Tags
    • Separate page for posts under each tag
  • Categories
    • Separate page for posts under each category
  • Social features
    • Twitter tweet button
    • Facebook share/share count
    • Reddit share/share count
    • LinkedIn share button
  • Author section
  • Related posts computation and display based on category/tag match ranking
  • Disqus support via gatsby-theme-advanced
  • gatsby-plugin-image for optimized image generation
  • Inline SVG imports
  • High configurability
  • Separate components for everything:
    • Gatsby Link utilities
    • SEO
    • Disqus
  • PWA features
    • Offline support
    • Web App Manifest support
    • Loading progress for slow networks
  • SEO
  • RSS feeds
  • Development tools
    • Yarn 3
    • Jest for unit/integration testing
    • Cypress for E2E testing
    • CI via GitHub Actions
    • CD via GitHub Actions
    • ESLint for linting
    • Prettier for code formatting
    • React Hooks Linting
    • Remark-Lint for linting Markdown
    • write-good for linting English prose
    • gh-pages for deploying to GitHub pages
    • Netlify deploy configuration