Search by Algolia

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 (demo)

    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 Bootstrap 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-bulma-storybook (demo)

    Features:

    • Storybook for developing components in isolation
    • Bulma and Sass support for styling
    • CSS modules
    • Prettier & eslint to format & check the code
    • Jest
  • gatsby-starter-default-i18n (demo)

    Features:

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

    Features:

    • Simple portfolio to quick start a site with DatoCMS
    • Contents and media from DatoCMS
    • Custom sass style
    • SEO
  • gatsby-starter-contentful-i18n (demo)

    Features:

  • 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)

    The target audience are designers and photographers.

    Features:

    • Full-width photo grid-layout (with 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-portfolio-emilia (demo)

    The target audience are designers and photographers.

    Features:

    • Focus on big images (with gatsby-image)
    • Dark Theme with HeroPatterns Header
    • CSS Grid and Styled Components
    • One-Page layout with sub-pages for projects
    • Easily configurable
    • React Overdrive transitions
    • Create your projects in Markdown
    • 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-starter-personal-blog (demo)

    Features:

    • Ready to use, but easily customizable a fully equipped theme starter
    • Easy editable content in Markdown files (posts, pages and parts)
    • ‘Like an app’ layout transitions
    • Easily restyled through theme object
    • Styling with JSS
    • Page transitions
    • Comments (Facebook)
    • Post categories
    • Post list filtering
    • Full text searching (Algolia)
    • Contact form (Netlify form handling)
    • Material UI (@next)
    • RSS feed
    • Full screen mode
    • User adjustable articles’ body copy font size
    • Social sharing (Twitter, Facebook, Google, LinkedIn)
    • PWA (manifes.json, offline support, favicons)
    • Google Analytics
    • Favicons generator (node script)
    • Components lazy loading with AsyncComponent (social sharing, info box)
    • ESLint (google config)
    • Prettier code styling
    • Custom webpack CommonsChunkPlugin settings
    • Webpack BundleAnalyzerPlugin
    • README / DEMO
  • 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.
  • gatsby-starter-lumen (demo)

    Features:

    • Lost Grid.
    • Beautiful typography inspired by matejlatin/Gutenberg.
    • Mobile-First approach in development.
    • Stylesheet built using Sass and BEM-Style naming.
    • Syntax highlighting in code blocks.
    • Sidebar menu built using a configuration block.
    • Archive organized by tags and categories.
    • Automatic RSS generation.
    • Automatic Sitemap generation.
    • Offline support.
    • Google Analytics support.
    • Disqus Comments support.
  • gatsby-starter-strict (demo)

    Features:

  • gatsby-hampton-theme (demo)

    Features:

    • Eslint in dev mode with the airbnb config and prettier formatting rules
    • Emotion for CSS-in-JS
    • A basic blog, with posts under src/pages/blog
    • A few basic components (Navigation, Layout, Link wrapper around gatsby-link))
    • Based on gatsby-starter-gatsbytheme
  • gatsby-wordpress-starter (demo)

    Features:

    • All the features from gatsby-advanced-starter, plus:
    • Leverages the WordPress plugin for Gatsby for data
    • Configured to work with WordPress Advanced Custom Fields
    • Auto generated Navigation for your Wordpress Pages
    • Minimal UI and Styling — made to customize.
    • Styled Components
  • gatsby-starter-simple-landing (demo)

    Features:

    • CSS-in-JS via JSS
    • easily restyled through theme object
    • text content via Markdown files
    • auto-generated sizes and types (png, webp) for background and hero images
    • favicons generator
    • webfonts with webfontloader
  • gatsby-starter-typescript-plus (demo)

    Features:

    • TypeScript
    • TSLint (with custom TSLint rules)
    • Markdown rendering with Remark
    • Basic component structure
    • Styling with styled-components
  • gatsby-orga (demo)

    Features:

  • gatsby-starter-minimal-blog (demo)

    Features:

    • Minimal and clean white layout
    • Offline Support, WebApp Manifest, SEO
    • Automatic Favicons
    • Typography.js
    • Part of a german tutorial series on Gatsby. The starter will change over time to use more advanced stuff (feel free to express your ideas)
  • gatsby-starter-redux (demo)

    Features:

  • gatsby-contentful-starter (demo)

    Features:

  • gatsby-starter-gcn (demo)

    Features:

    • Inspired by gatsby-contentful-starter
    • Contentful integration with ready to go placeholder content
    • Netlify integration including a pre-built contact form
    • Minimal responsive design - made to customize or tear apart
    • Styled components
    • SEO friendly
  • gatsby-starter-timeline-theme (Demo)

    Features:

    • Single Page, Timeline View
    • A portfolio Developers and Product launchers
    • Bring in Data, plug-n-play
    • Responsive Design, optimized for Mobile devices
    • Seo Friendly
    • Uses Flexbox
  • gatsby-starter-stellar (demo)

    Features:

    • Based off of the Stellar site template. Designed by HTML5 UP
    • Scroll friendly, responsive site. Can be used as a single or multi-page site.
    • Sticky Navigation when scrolling.
    • Scroll spy and smooth scrolling to different sections of the page.
    • Styling with SCSS
  • gatsby-starter-tailwind (demo)

    Features:

  • gatsby-starter-bloomer (demo)

    Features:

  • gatsby-starter-i18n-lingui (demo)

    Features:

    • Localization (Multilanguage) provided by js-lingui
    • Message extraction
    • Avoids code duplication - generates pages for each locale
    • Possibility of translated paths
  • gatsby-starter-photon (demo)

    Features:

    • Based off of the Photon site template. Designed by HTML5 UP
    • Single Page, Responsive Site
    • Custom grid made with CSS Grid
    • Styling with SCSS
  • gatsby-starter-business (demo)

    Features:

    • Complete Business Website Suite - Home Page, About Page, Pricing Page, Contact Page and Blog
    • Netlify CMS for Content Management
    • SEO Friendly (Sitemap, Schemas, Meta Tags, GTM etc)
    • Bulma and Sass Support for styling
    • Progressive Web App & Offline Support
    • Tags and RSS Feed for Blog
    • Disqus and Share Support
  • gatsby-advanced-blog (demo)

    Features:

    • Blog post listing with previews (image + summary) for each blog post
    • Categories and tags for blog posts with pagination
    • Search post with keyword
    • Put react application / tweet into post
    • Copy some codes in post with clicking button
    • Portfolio
    • Resume
    • Redux for managing statement (with redux-saga / reselect)
  • gatsby-starter-procyon (demo)

    Features:

    • Gatsby + ReactJS (server side rendering)
    • GraphCMS Headless CMS
    • DraftJS (in-place) Medium-like Editing
    • Apollo GraphQL (client-side)
    • Local caching between builds
    • Material-UI (layout, typography, components, etc)
    • Styled-Components™-like API via Material-UI
    • Netlify Deployment Friendly
    • Netlify Identity Authentication (enables editing)
    • Automatic versioning, deployment and CHANGELOG
    • Automatic rebuilds with GraphCMS and Netlify web hooks
    • PWA (Progressive Web App)
    • Google Fonts
  • gatsby-starter-2column-portfolio (demo)

    Features:

    • Designed as a minimalistic portfolio website
    • Grid system using flexboxgrid
    • Styled using SCSS
    • Font icons using font-awesome
    • Google Analytics integration
    • Open Sans font using Google Fonts
    • Prerendered Open Graph tags for rich sharing
  • gatsby-starter-modern (demo)

    Features:

  • gatsby-starter-hero-blog (demo)

    Features:

    • Easy editable content in Markdown files (posts, pages and parts)
    • CSS with styled-jsx and PostCSS
    • SEO (sitemap generation, robot.txt, meta and OpenGraph Tags)
    • Social sharing (Twitter, Facebook, Google, LinkedIn)
    • Comments (Facebook)
    • Images lazy loading and webp support (gatsby-image)
    • Post categories (category based post list)
    • Full text searching (Algolia)
    • Contact form (Netlify form handling)
    • Form elements and validation with ant-design
    • RSS feed
    • 100% PWA (manifest.webmanifest, offline support, favicons)
    • Google Analytics
    • App favicons generator (node script)
    • Easy customizable base styles via theme object generated from yaml file (fonts, colors, sizes)
    • React v.16.3 (gatsby-plugin-react-next)
    • Components lazy loading (social sharing)
    • ESLint (google config)
    • Prettier code styling
    • Webpack BundleAnalyzerPlugin
    • README / DEMO

Was this helpful? edit this page on GitHub