Gatsby starters or pre-built Gatsby templates help you kickstart your Gatsby projects with a predefined structure, configuration, and some initial content. These starters can save you time and effort by providing a foundation for various websites or applications. You can customize and extend them to fit your specific needs.
Why Gatsby starters
Gatsby is a React-based, GraphQL-powered static site generator. With Gatsby starters, you can quickly build websites that use only static files for fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.
So, if you're looking to build Gatsby websites, here are 30 awesome Gatsby templates (by categories) to initiate a new Gatsby project.
Get started with Gatsby starters
To start Gatsby starters you need a set of tools installed at the working station:
Node.js (version 18 or newer)
npm (npm command line interface to add packages to your project)
Gatsby CLI - the Gatsby console
npm install -g gatsby-cli (code line)
GIT - to clone some starters
To follow the step-by-step process there is an official Installation Guide.
Gatsby starters: Gatsby Blog templates
The toolset is ready, so the only thing left to do is to choose the starter kit. Let’s start with the Blog starters showcase:
Gatsby Advanced Starter
This Gatsby starter doesn’t have any UI limitations and only offers basic components for SEO/Links/Infinite Scrolling while creating a comfortable development environment to get started.
Starter with advanced blog features such as:
Tags
Categories
Google Analytics
Offline support
Web App Manifest
SEO
Learn more:
GitHub ⭐: 1.6k
Gatsby DevBlog
Fully customizable Gatsby blog template that comes with syntax highlighting and built-in server-side rendering.
Features:
Fully responsive
Minimalistic
Customizable via a config.js file
Server-side rendering
Learn more:
GitHub ⭐: 437
Apple Gatsby starter
Gatsby blog starter kit with responsive design.
Apple-style responsive design
Dynamic theme (Comment + Code Highlights)
Mobile menu animation
RSS Feed
SEO
Learn more:
GitHub ⭐: 132
Glass
Minimal Gatsby blog starter with Glassmorphism UI.
Features:
Fully responsive
SEO metadata and Open Graph tags
Contact form with Netlify
Form edit content with Netlify
Learn more:
GitHub ⭐: 165
BCMS Gatsby Blog starter
BCMS Gatsby Blog Starter is a full-pack code starter for functional Gatsby blog websites built with Gatsby.js, Tailwind, and BCMS.
One codebase for submitting blogs, listing and searching for them, and getting applications.
Features:
Fast setup
Easy customization
SEO-ready
SSG support
Learn more:
GitHub ⭐: 227
Gatsby Blog tutorial: Building an SEO-friendly blog with BCMS code starter
Gatsby starters: Gatsby templates for personal websites
LekoArts Cara Portfolio starter
One-page portfolio featuring Parallax effects and animations. Built with MDX and the Theme UI.
Features:
React Spring Parallax effects
UI-based theming
CSS Animations and shapes
Learn more:
GitHub ⭐: 1,4k
Gatsby Starter Portfolio Minimal
Portfolio Minimal is a one-page portfolio Gatsby template with expressive design and slick animations.
Features:
Cookie Consent Bar
Content Integration via MDX - No external CMS needed.
Responsive design
PWA - Offline Support
Learn more:
GitHub ⭐: 131
Smakosh Gatsby Portfolio
Simple one-page portfolio with GitHub projects showcase, about text, and contact form.
Features:
GitHub projects cards
Netlify form handling
MDX support
Google Analytics support
Learn more:
GitHub ⭐: 128
London Gatsby Starter
Based on Ghost CMS, London is an image-centric portfolio with plenty of graphics to show off.
Features:
About page
Typography
PurgeCSS for bundle size optimization
Google Analytics support
Learn more:
GitHub ⭐: 173
BCMS Gatsby Personal website code starter
BCMS Gatsby Personal Code Starter allows you to shape your brand or persona. Built with Gatsby, Tailwind, and BCMS.
Features:
Optimized for speed
SEO-ready
Highly customizable design
Learn more:
GitHub ⭐: 227
Gatsby E-commerce starters
Gatsby Shopify
Gatsby Starter for Shopify projects; an online store with a custom landing page, detailed product pages, and a shopping cart.
Features:
Landing page
Product page
Instant search functionality
Filters for categories
CSS modules for customization
Google Analytics
Learn more:
GitHub ⭐: 307
Moltin E-commerce Gatsby starter
Minimalistic and simple starter for an E-commerce store.
Features:
Moltin eCommerce AP
React 16
PWA
Semantic-UI
Styled components
Google Analytics - (you enter the tracking ID)
Learn more:
GitHub ⭐: 498
Gatsby and Snipcart Starter
Gatsby and Snipcart integration resulted in a user-friendly, simple E-commerce site.
Features:
Minimal design
Simple customisation
Snipcart provides an easy-to-use shopping cart
Product pages with custom fields.
Gatsby image optimization
Learn more:
GitHub ⭐: 14
Crystallize E-commerce starter
E-commerce skeleton running on the headless and GraphQL.
Features:
Rich content support
Product catalogue
MIT license
Optimized for performance
Learn more:
GitHub ⭐: 12
BCMS E-commerce starter
Ready-to-go E-commerce Starter built with Gatsby, Tailwind, and BCMS. All-in-one E-commerce features that are crucial for an online store.
Features:
Image-centered
Product catalogue and list
Custom product search
SEO-friendly
Social media sharing button
Content-heavy support
Learn more:
GitHub ⭐: 227
Gatsby job board starters
For this category was hard to find examples. Still, I found something worth sharing.
Justcamp - Gatsby Job Board
Even though it is not free, with Justcamp, you can create a variety of job-related websites using React and Gatsby. You can use it to build job listings, directories, portals, regular job websites, career platforms, resume directories, employment websites, freelancer hubs, candidate databases, and other similar projects.
Features:
Fast-loading
Mobile-responsive design
SEO-friendly
Customizable
Gatsby Business Website Starter
Gatsby Business Website Starter follows the Jamstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.
Features:
Complete Business Website Suite - Home page, About page, Pricing page, and Blog
Netlify CMS for content management
SEO Friendly
Bulma and Sass Support for styling
PWA
Learn more:
GitHub ⭐: 254
Open-job board
Learn more:
GitHub ⭐: 95
BCMS Gatsby Job board
A fully functional job board with Gatsby.js, Tailwind, and BCMS. Whether you are looking to build a job board for your company or a stand-alone job board website - this starter is a great choice.
Features:
jobs submitting
jobs listing
jobs search
search filters
Highly customizable design thanks to Tailwind
Fully responsive
Learn more:
GitHub ⭐: 227
Gatsby Podcast starter
Code Chefs Repo
It is not an official podcast starter but open-source code to the Code Chefs Podcast website that is free to peruse. Based on Gatsby-Hooks-Starter-Theme this repo allows a custom React Audio Library that controls playback speed, volume levels, and timestamps that can autoplay a fully responsive SasS library.
Learn more:
GitHub ⭐: 22
Candid & Cringe podcast
An example of a podcast website built with Gatsby's default starter. This starter ships with the main Gatsby configuration files you might need to get up.
For more instructions visit the GitHub source and the official Gatsby tutorial.
Simplecast
Podcast Gatsby theme to create a site for your podcast. Write announcements, and store all episodes on your site.
Features:
UI customization
Responsive design
Mockup data
Learn more:
GitHub ⭐: 194
BCMS Podcast starter
Podcast code starter kit that simplifies setting up, recording, and sharing your content. With BCMS podcast starter, you can manage the whole workflow from idea to recording and organize your episodes efficiently with notes and metadata. Say goodbye to manual updates and hello to a streamlined workflow for publishing audio content.
Features:
Dynamic data integration
Responsive audio player
Deployment options: Gatsby supports easy deployment to popular hosting platforms like Netlify, Vercel, and AWS.
Responsive layout that looks good on all devices.
Editable through BCMS (Add and update podcast episodes through BCMS)
Learn more:
GitHub ⭐: 227
Gatsby starters: Rare examples
TailwindCSS Landing Page Starter for Gatsby
A simple landing page starter built using Tailwinds. Suitable for any business.
Features:
Styles using Tailwind
Features section
Reviews section
Learn more:
GitHub ⭐: 134
Airtable listing theme for Gatsby
Gatsby's starter theme integrated with Airtable.
Features:
Item details are displayed in a modal with navigation (previous/next)
Responsive/adaptive images via gatsby-image
Generic newsletter form
Dark Mode support
Learn more:
GitHub ⭐: 82
Gatsby starter for scientists
A website starter built with Gatsby for a typical scientist's or laboratory website.
Features:
Publications page
Customizable theme and colors
Custom URL
Learn more:
GitHub ⭐: 12
Gatsby Starter Leaflet
A Gatsby starter with Leafet to quickly build React apps with a map. Ideal starter for the Gatsby mapping project.
GitHub ⭐: 115
Gatsby Starter OpenAI Blog
Public repository for the Open AI Q&A project. A public collection of questions asked by authorized members and answers provided by the text-davinci-003 model - developed and maintained by the OpenAI organization.
Built with:
Gatsby
Openai-node
Firebase
Mui
Learn more:
GitHub ⭐: 6
Gatsby docs starter
Gatsby starter that contains a documentation website starter that can optionally include a blog.
Features:
Markdown
Syntax highlighting
Anchors
Sidebar
Blog feature / second content type
Landing page
Learn more:
GitHub ⭐: 67
BCMS Gatsby Conference
Gatsby Conference Website Starter is your go-to solution for creating a conference center website.
Features:
Gatsby-powered performance
Responsive design excellence
Customizable templates
Event showcase
Dynamic speaker profiles
Multichannel support
Learn more:
GitHub ⭐: 227
Gatsby Resources
If you liked this list I made, in this part I will leave some most important links for Gatsby projects so you can search it or follow trends when it comes to the next Gatsby projects.
Gatsby Apps - the full index published on Github
Gatsby Docs - official documentation
Gatsby Starters - the official list with starters sorted by technologies and usage
Gatsby Apps - Gatsby apps supported by AppSeed