# Gatsby starters: 30 free Gatsby templates for blazingly fast website building [Gatsby starters](https://www.thebcms.com/starters/gatsby/) 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. ## TL;DR This article lists 30+ free Gatsby starters across categories like: - Blogs - Portfolios - E-commerce - Podcasts - And moreEach starter includes basic structure, content, and configuration to help you launch fast, with SEO, performance, and customization in mind. ## 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. ### Benefits of Gatsby starters include: - Fast loading static pages - Code splitting and SSG - SEO optimization and performance - Pre-built layouts and content - Easy integration with CMSs like BCMS So, if you're looking to build [Gatsby websites](https://www.thebcms.com/blog/gatsby-sites-examples.md), 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 consolenpm install -g gatsby-cli ([code line](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/)) - GIT - to clone some starters To follow the step-by-step process there is an official [Installation Guide](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/). ## 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: ### BCMS Gatsby Blog starter [BCMS Gatsby Blog Starter ](https://www.thebcms.com/starters/gatsby/blog.md)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 Start your project: ``` npx @thebcms/cli create gatsby blog ``` Learn more: - [Demo](https://blog-starter.thebcms.com/) - [GitHub source](https://github.com/bcms/starters/tree/master/gatsby/blog) - Gatsby Blog tutorial: [Blog code starter for BCMS and Gatsby](https://www.thebcms.com/starters/blog/) ### Gatsby Advanced Starter ![Gatsby Advanced Starter](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d221c/bin2/1-advanced-blog-.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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: - [More Insights](https://www.gatsbyjs.com/starters/Vagr9K/gatsby-advanced-starter/) - [GitHub source](https://github.com/Vagr9K/gatsby-advanced-starter) ### Gatsby DevBlog ![Gatsby DevBlog](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d221d/bin2/2-devblog.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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: - [Demo](https://ryanfitzgerald.github.io/devblog/) - [GitHub source](https://github.com/RyanFitzgerald/devblog?tab=readme-ov-file#devblog) ### Apple Gatsby starter ![Apple Gatsby starter](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d221e/bin2/3-apple-gatsby-blog-starter.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Gatsby blog starter kit with responsive design. - Apple-style responsive design - Dynamic theme (Comment + Code Highlights) - Mobile menu animation - RSS Feed - SEO Learn more: - [More Insights](https://www.gatsbyjs.com/starters/sungik-choi/gatsby-starter-apple) - [GitHub source](https://github.com/sungik-choi/gatsby-starter-apple) ### Glass ![Glass](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d221f/bin2/4-glass-gatsby-blog-starter.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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: - [Demo](https://gatsbyglass.netlify.app/) - [GitHub source](https://github.com/yinkakun/gatsby-starter-glass) ## Gatsby starters: Gatsby templates for personal websites ### BCMS Gatsby Personal website code starter [Gatsby templates for BCMS](https://www.thebcms.com/starters/gatsby/) allow you to shape your brand or persona. Built with Gatsby, Tailwind, and BCMS.Features: - Optimized for speed - SEO-ready - Highly customizable design Start your project: ``` npx @thebcms/cli create next personal ``` Learn more: - [Demo](https://personal-starter.thebcms.com/) - [GitHub source](https://github.com/bcms/starters/tree/master/gatsby/personal) ### 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: 1. [More Insights](https://www.gatsbyjs.com/starters/LekoArts/gatsby-starter-portfolio-cara) 2. [GitHub source](https://github.com/LekoArts/gatsby-starter-portfolio-cara) ### 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: - [More Insights](https://www.gatsbyjs.com/starters/konstantinmuenster/gatsby-starter-portfolio-minimal-theme) - [GitHub source](https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal-theme?tab=readme-ov-file) ### 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: - [Demo](https://gatsby-theme-portfolio.netlify.app/) - [GitHub source](https://github.com/smakosh/gatsby-theme-portfolio) ### London Gatsby Starter Based on [Ghost CMS](https://www.thebcms.com/compare/ghost-alternative.md), 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: - [Demo](https://gatsby-london.netlify.app/) - [GitHub source](https://github.com/ImedAdel/gatsby-london) ## Gatsby E-commerce starters ### 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: - [Demo](https://e-commerce-starter.thebcms.com/) - [GitHub source](https://github.com/bcms/starters/tree/master/gatsby/e-commerce) Start your project: ``` npx @thebcms/cli create gatsby starter e-commerce ``` ### 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 source](https://github.com/gatsbyjs/gatsby-starter-shopify) ### 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: - [Demo](https://parmsang.github.io/gatsby-starter-ecommerce/) - [GitHub source](https://github.com/parmsang/gatsby-starter-ecommerce) ### 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: - [Demo](https://gatsby-snipcart-starter.netlify.app/) - [GitHub source](https://github.com/issydennis/gatsby-snipcart) ### 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: - [Demo](https://crystallize-gatsby-boilerplate-crystallize.vercel.app/) - [GitHub source](https://github.com/CrystallizeAPI/crystallize-gatsby-boilerplate) ## Gatsby job board starters For this category was hard to find examples. Still, I found something worth sharing. ### 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 Start your project: ``` npx @thebcms/cli create gatsby job-board ``` Learn more: - [Demo](https://job-board-starter.thebcms.com/) - [GitHub source](https://github.com/bcms/starters/tree/master/gatsby/job-board) ### 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](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d223e/bin2/screenshot-2024-01-22-at-121434.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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: - [Demo](https://gatsby-starter-business.netlify.app/) - [GitHub source](https://github.com/v4iv/gatsby-starter-business?tab=readme-ov-file) ### Open-job board ![Open-job board](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d222c/bin2/open-jobboard.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Learn more: - [Demo](https://hrflow.wistia.com/medias/gvf4u3fe48) - [GitHub source](https://github.com/Riminder/open-jobboard?tab=readme-ov-file) ## Gatsby Podcast starter ### 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) Start your podcast: ``` npx @thebcms/cli create gatsby podcast ``` Learn more: - [Demo](https://podcast-starter.thebcms.com/) - [GitHub source](https://github.com/bcms/starters/tree/master/gatsby/podcast) ### 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 source](https://github.com/vincentntang/codechefs?tab=readme-ov-file) ### 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](https://github.com/clearlyTHUYDOAN/candid-and-cringe-gatsby-starter?tab=readme-ov-file) and the official [Gatsby tutorial](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-5/#introducing-graphiql). ### 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: - [Demo](https://gatsby-theme-simplecast.netlify.app/) - [GitHub source](https://github.com/vojtaholik/gatsby-theme-simplecast?tab=readme-ov-file) ## Gatsby starters: Rare examples ### 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 Start your project: ``` npx @thebcms/cli create gatsby conference ``` Learn more: - [Demo](https://conference-starter.thebcms.com/) - [GitHub source](https://github.com/bcms/starters/tree/master/gatsby) ### TailwindCSS Landing Page Starter for Gatsby ![TailwindCSS Landing Page Starter for Gatsby](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d223f/bin2/6835b0548d5b-screenshot-2024-01-22-at-220350.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) A simple landing page starter built using Tailwinds. Suitable for any business.Features: - Styles using Tailwind - Features section - Reviews section Learn more: - [Demo](https://gatsby-lander.surge.sh/) - [GitHub source](https://github.com/codebushi/gatsby-starter-lander) ### 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: - [Demo](https://gatsby-airtable-listing.netlify.app/) - [GitHub Source](https://github.com/wkocjan/gatsby-airtable-listing?tab=readme-ov-file) ### Gatsby starter for scientists ![Gatsby starter for scientists](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d2240/bin2/b7e417bc2330-screenshot-2024-01-22-at-222309.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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: - [Demo](https://knightjdr.github.io/gatsby-starter-scientist/) - [GitHub source](https://github.com/knightjdr/gatsby-starter-scientist) ### Gatsby Starter Leaflet A Gatsby starter with Leafet to quickly build React apps with a map. Ideal starter for the Gatsby mapping project. - [Demo](https://gatsby-starter-leaflet.netlify.app/) - [GitHub source](https://github.com/colbyfayock/gatsby-starter-leaflet) ### 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: - [Demo](https://open-q-and-ai.netlify.app/) - [GitHub source](https://github.com/Ys-sudo/gatsby-openai-firebase-starter) ### Gatsby docs starter ![Gatsby docs starter](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d2224/bin2/gatsby-docs.avif?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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 source](https://github.com/jannikbuschke/gatsby-antd-docs) ## 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. If you want to browse more options beyond this roundup, [HTMLrev’s free Gatsby templates](https://htmlrev.com/free-gatsby-templates.html) collect curated Gatsby starters and themes alongside Next.js, Astro, Nuxt, and other framework templates - useful when you’re comparing layouts before you commit to a starter. - [Gatsby Docs](https://www.gatsbyjs.com/docs/) - official documentation - [Gatsby Starters](https://www.gatsbyjs.com/docs/starters/) - the official list with starters sorted by technologies and usage - [Gatsby Apps](https://appseed.us/apps/gatsbyjs) - Gatsby apps supported by AppSeed - [BCMS Gatsby starters](https://github.com/bcms/starters/tree/master/gatsby) ## FAQs about Gatsy starters ### What's the difference between a Gatsby “starter” and a “template”? A starter is a ready-to-use Gatsby project with boilerplate code. A template typically refers to a layout or reusable component inside BCMS or within the starter itself. ### Do I have to write Markdown for every post? Nope! BCMS offers a user-friendly interface for creating and managing content, no Markdown knowledge required. ### How does SEO work with these Gatbsy starters? - Gatsby generates static HTML pages for fast loading - You can manage meta titles, descriptions, Open Graph, RSS, and schema directly via BCMS - [Structured content](https://www.thebcms.com/blog/structured-content-guide.md) helps with rich snippets and better indexing ### Can I change the design of the Gatsby starter? Yes! Since all code is React + Tailwind CSS, you can fully customize layouts, colors, animations, and components. ### Do BCMS starters support localization (multi-language)? Yes. BCMS supports localized content models, enabling full i18n experiences including translated URLs, slugs, and metadata. ### Can I use these Gatsby starters for commercial projects? Absolutely. All listed starters are open source or MIT licensed, which allows for use in personal and commercial projects. Be sure to check the individual repo license. ### Why choose BCMS over other headless CMSs? - Open-source & self-hostable - Rich starter/template ecosystem - Developer-friendly CLI - Highly customizable UI & content models - Free for small teams and projects ### Do I need GraphQL knowledge to use these starters? Not necessarily. While Gatsby uses GraphQL under the hood, most starters include prebuilt queries. You’ll only need GraphQL knowledge if you plan to deeply customize data fetching. ### Can I deploy these Gatsby sites for free? Yes! Services like Netlify, Vercel, or GitHub Pages allow you to deploy static Gatsby sites for free with continuous deployment from Git.