Search by Algolia

Gatsby Starters

The Gatsby CLI tool lets you install “starters”. These are boilerplate Gatsby sites maintained by the community. gatsby new helps you start your project by cloning the boilerplate, installing dependencies, and clearing git history.

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

    Features:

  • 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-portfolio-bella (demo)

    The target audience are designers and photographers.

    Features:

    • Big typography & images
    • White theme
    • Prismic.io as CMS
    • Emotion for styling
    • One-page layout with sub-pages for case studies
    • Easily configurable
    • And other good stuff (SEO, Offline Support, WebApp Manifest Support)
  • gatsby-starter-portfolio-cara (demo)

    The target audience are designers and photographers.

    Features:

    • Gatsby v2
    • React Spring
    • TailwindCSS & Emotion
    • Playful & Colorful One-Page website with Parallax effect
    • Easily configurable
    • And other good stuff (SEO, Responsive images, 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
  • gatsby-starter-ecommerce (demo)

    Features:

  • gatsby-starter-tachyons (demo)

    Features:

  • 💀gatsby-starter-skeleton (Demo)

    Features:

    • Full-featured site for developer or small company
    • Includes Articles and Projects
    • Includes Tags and Categores
    • Minimal but stylish default theme
    • Styled Components and CSSAPI for styles
    • Configure many of the site’s features from a separate site config files
    • Extended Markdown support, responsive embeds, solid inline code support and lots of other goodness
    • Well commented and documented

Was this helpful? edit this page on GitHub