Gatsby Starters

The Gatsby CLI tool lets you install “starters”. These are partially built sites preconfigured to help you get moving faster on creating a certain type of site.

When creating a new site, you can optionally specify a starter to base your new site on e.g.

gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO]

For example, to quickly create a blog using Gatsby, you could install the Gatsby Starter Blog by running:

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

This downloads the files and initializes the site by running npm install

If you don’t specify a custom starter, your site will be created from the default starter.

There are several starters that have been created. Create a PR to include yours!

Official:

Community:

  • gatsby-starter-blog-no-styles (demo)

    Features:

    • Same as official gatsby-starter-blog but with all styling removed
  • gatsby-material-starter (demo)

    Features:

    • React-MD for Material design
    • SASS/SCSS
    • Tags
    • Categories
    • Google Analytics
    • Disqus
    • Offline support
    • Web App Manifest
    • SEO
    • Full list here!
  • gatsby-typescript-starter (demo)

    Features:

    • Semantic-ui for styling
    • TypeScript
    • Offline support
    • Web App Manifest
    • Jest/Enzyme testing
    • Storybook
    • Markdown linting
    • Full list here!
  • gatsby-starter-bootstrap (demo)

    Features:

    • Bootstrap CSS framework
    • Single column layout
    • Basic components: SiteNavi, SitePost, SitePage
  • gatsby-blog-starter-kit

    Features:

    • Blog post listing with previews for each blog post
    • Navigation between posts with a previous/next post button
    • Tags and tag navigation
  • gatsby-starter-casper (demo)

    Features:

    • Page pagination
    • CSS
    • Tags
    • Google Analytics
    • Offline support
    • Web App Manifest
    • SEO
    • Full list here!
  • gatsby-advanced-starter (demo)

    Features:

    • Great for learning about advanced features and their implementations
    • Does not contain any UI frameworks
    • Provides only a skeleton
    • Tags
    • Categories
    • Google Analytics
    • Disqus
    • Offline support
    • Web App Manifest
    • SEO
    • Full list here!
  • glitch-gatsby-starter-blog (demo)

    Features:

    • live-edit a temp, anon copy of app
    • same code as gatsby-starter-blog (mostly)
    • free hosting & web IDE on glitch.com
    • HMR working w/ glitch IDE (see note)
    • caution:
    • app running in develop mode
    • glitch serves assets over CDN, API unclear
    • virtual server container provides 128MB for app (512MB for assets)
    • server can’t install certain gatsby plugins (sharp-based; out of mem?)
  • gatsby-starter-grommet (demo)

    Features:

    • Barebones configuration for using the Grommet design system
    • Uses SASS (with CSS modules support)
  • gatsby-starter-basic (demo)

    Features:

    • Basic configuration and folder structure
    • Uses postcss and sass (with autoprefixer and pixrem)
    • Uses boostrap 4 grid
    • Leaves the styling to you
    • Uses data from local json files
    • Contains Node.js server code for easy, secure, and fast hosting
  • gatsby-starter-typescript (demo)

    Features:

    • TypeScript
  • gatsby-starter-default-i18n (demo)

    Features:

    • localization (Multilanguage)
  • gatsby-starter-gatsbythemes (demo)

    Features:

    • CSS-in-JS via Emotion.
    • Jest and Enzyme for testing.
    • Eslint in dev mode with the airbnb config and prettier formatting rules.
    • React 16.
    • A basic blog, with posts under src/pages/blog. There’s also a script which creates a new Blog entry (post.sh).
    • Data per JSON files.
    • A few basic components (Navigation, Footer, Layout).
    • Layout components make use of Styled-System.
    • Google Analytics (you just have to enter your tracking-id).
    • Gatsby-Plugin-Offline which includes Service Workers.
    • Prettier for a uniform codebase.
    • Normalize css (7.0).
    • Feather icons.
    • Font styles taken from Tachyons.
  • gatsby-starter-netlify-cms (demo)

    Features:

    • A simple blog built with Netlify CMS
    • Basic directory organization
    • Uses Bulma for styling
    • Visit the repo to learn how to set up authentication, and begin modeling your content.
  • gatsby-starter-portfolio-emma (demo)

    Features:

    • Perfect for designers and photographers
    • Full-width Photo Grid-Layout (Responsive Images through gatsby-image)
    • Minimalistic light theme with large images
    • Create your projects in Markdown
    • Styling with SCSS and Typography.js
    • Easily configurable
    • And other good stuff (SEO, Offline Support, WebApp Manifest Support)
  • gatsby-starter-bootstrap-netlify (demo)

    Features:

    • Very similar to gatsby-starter-netlify-cms, slightly more configurable (eg set site-title in gatsby-config) with bootstrap/bootswatch instead of bulma
  • open-crowd-fund (demo)

    Features:

    • Open source crowdfunding for your own ideas
    • Alternative for Kickstarter, GoFundMe, etc.
    • Secured Credit Card payments with Stripe
    • Storing of funding information in Firebase
  • gatsby-starter-dimension (demo)

    Features:

    • Based off of the Dimension site template. Designed by HTML5 UP
    • Simple one page site that’s perfect for personal portfolios
    • Fully Responsive
    • Styling with SCSS
  • gatsby-starter-docs (demo)

    Features:

    • All the features from gatsby-advanced-starter, plus:
    • Designed for Documentation / Tutorial Websites
    • ‘Table of Contents’ Component: Auto generates ToC from posts - just follow the file frontmatter conventions from markdown files in ‘lessons’.
    • Styled Components w/ ThemeProvider
    • Basic UI
    • A few extra components
    • Custom prismjs theme
    • React Icons
  • gatsby-styled-blog-starter (demo)

    Features:

    • sidebar navigation
    • look like an app
    • page transitions
    • pwa
    • styling with styled-components
    • easily restyled through theme object
    • README
  • gatsby-starter-deck (demo)

    Features:

    • Create presentations/slides using Gatsby.
    • Offline support.
    • Page transitions.
  • gatsby-starter-forty (demo)

    Features:

    • Based off of the Forty site template. Designed by HTML5 UP
    • Colorful homepage, and also includes a Landing Page and Generic Page components.
    • Many elements are available, including buttons, forms, tables, and pagination.
    • Styling with SCSS
  • gatsby-firebase-authentication (demo)

    Features:

    • Sign In, Sign Up, Sign Out
    • Password Forget
    • Password Change
    • Protected Routes with Authorization
    • Realtime Database with Users
  • gatsby-starter-ceevee (demo)

    Features:

    • Based on the Ceevee site template, design by Styleshout
    • Single Page Resume/Portfolio site
    • Target audience Developers, Designers, etc.
    • Used CSS Modules, easy to manipulate
    • FontAwsome Library for icons
    • Responsive Design, optimized for Mobile devices
  • gatsby-starter-product-guy (demo)

    Features:

    • Single Page
    • A portfolio Developers and Product launchers alike
    • Using Typography.js easy to switch fonts
    • All your Project/Portfolio Data in Markdown, server by GraphQL
    • Responsive Design, optimized for Mobile devices
  • gatsby-starter-strata (demo)

    Features:

    • Based off of the Strata site template. Designed by HTML5 UP
    • Super Simple, single page portfolio site
    • Lightbox style React photo gallery
    • Fully Responsive
    • Styling with SCSS
  • verious (demo)

    Features:

    • Components only. Bring your own data, plugins, etc.
    • Bootstrap inspired grid system with Container, Row, Column components.
    • Simple Navigation and Dropdown components.
    • Baseline grid built in with modular scale across viewports.
    • Abstract measurements utilize REM for spacing.
    • One font to rule them all: Helvetica.

Was this helpful? edit this page on GitHub