Gatsby Advanced Starter

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

Gatsby
Author vagr9k
Github Stars 1305
Last Commit Aug 29, 2021
Gatsby Advanced Starter screenshot

A starter skeleton with advanced features

The Advanced Starter doesn’t define any UI limitations in any way and only gives you the basic components for SEO/Links/Infinite Scrolling while creating a comfortable development environment to get started.

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.

You are free to use any UI framework/styling options or you can use the gatsby-theme-amaranth as a starting point, which provides a stylish blog design styled with Styled Components

Demos

With gatsby-theme-advanced

With gatsby-theme-amaranth.

Features

  • Gatsby v3 support
  • First class TypeScript support (for query data and components exposed by the theme)
  • Styled Components 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
  • 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