Updated: March 22, 2021 By: Dessign Team
Collection of Best free gatsby.js themes and how to use them to build super fast site. Gatsby is all about speed building website with React.js framework. Gatsby themes are plugins that include a
gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project! If you need to Export WordPress content to Gatsby there is a great plugin you can use Export WordPress Content to Gatsby
What to Look for in a Free Business Theme?
- Bootstrap 4 grid and media (UI / UX Optimized)
- Fully customized and well coded
- Fully Responsive (Mobile Friendly) & SEO optimized
- Lightweight and highly extendable
- JSON-LD Schema
Gatsby themes allow Gatsby site functionality to be packaged as a standalone product for others (and yourself!) to easily reuse. Using a traditional starter, all of your default configuration lives directly in your site. Using a theme, all of your default configurations lives in an npm package. Also read Sourcing From WordPress and how to setup all. If you interested in learning more about WordPress & Gatsby I recommend this online course “Headless WordPress w Gatsby.js”
Free Gatsby.js Themes and Templates to build super-fast website in 2021
1. LekoArts Cara
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
- React Spring Parallax effects
- Theme UI-based theming
- CSS Animations and shapes
- Light/Dark mode
Multi page/content-type starter using Markdown and SCSS. Serif is a beautiful small business theme for Gatsby. The theme is fully responsive, blazing fast and artfully illustrated.
- Graphql query in `gatsby-node.js` using aliases that creates pages and templates by content type based on the folder `src/pages/services`, `src/pages/team`
- Responsive design
- Bootstrap 4 grid and media queries only
- Responsive menu
- Royalty free illustrations included
- SEO titles & meta using `gatsby-plugin-react-helmet`
- Eslint & Prettier
3. Portfolio Starter Jodie
Image-heavy photography portfolio with colorful accents & great typography
- Configurable with theming, CSS Grid & a yaml file for navigation
- Create your projects by editing a yaml file and putting images into a folder
- Shows your Instagram posts
- Cypress for End-to-End testing
- react-spring for animations & transitions
- Uses styled-components + styled-system
- SEO with Sitemap, Schema.org JSONLD, Tags
- Responsive images with gatsby-image
Ginger beautiful Gatsby and WPGraphQL WordPress theme for bloggers, photographers and any lifestyle professionals looking for amazing and fast theme. Y
A fully responsive, single page React.js website template. Built using Gatsby.js and designed by HTML5 UP. Great for a quick profile or portfolio site.
6. Ghost & Gatsby
Build lightning-fast, modern publications with Ghost and Gatsby
- Ghost integration with ready to go placeholder content and webhooks support
- Minimal responsive design
- Pagination for posts, tags, and authors
- SEO Friendly Meta
- JSON-LD Schema
- OpenGraph structured data
- Twitter Cards meta
- Sitemap Generation
- XML Sitemaps
- Progressive Web App
- Offline Support
7. Gatsby Netlify
Gatsby starter using Netlify CMS
- Example of a website for a local developer meetup group
- NetlifyCMS used for easy data entry
- Mobile-friendly design
- Styling done with Sass
- Gatsby version 2
8. Gatsby Material Kit React
Adaptation of Material Kit React to Gatsby
- 60 Handcrafted Components
- 4 Customized Plugins
- 3 Example Pages
A Simple, clean and modern designed blog with firebase authentication feature and easily customizable code.
- Minimal and clean white layout.
- Dynamic content from Contentful.
- Blog post listing with previews (image + summary) for each blog post.
- Disqus commenting system for each blog post.
- Search post with keyword.
- Firebase for Authentication.
- Protected Routes with Authorization.
- Contact form integration.
10. Gatsby Starter Theme
Polished Gatsby theme for documentation site
- ⚛ Prerendered static site
- ? Internationalization support by i18next
- ? Markdown-based documentation and menus
- ? Examples with live playground
- ? Unified Theme and Layout
- ? Easy customized header nav
- ? Built-in home page components
11. London Portfolio Template
A custom, image-centric theme for Gatsby.
- Post thumbnails in the homepage
- Built with PostCSS
- Made for image-centeric portfolios
- Based on London for Ghost
12. Gatsby Portfolio
Clean gird based Gatsby portfolio theme, with left side navigation and infinite scrolling.
- Simple portfolio to quick start a site with DatoCMS
- Contents and media from DatoCMS
- Custom Sass style
Blog with all the Bells and Whistles
- Write blog posts into Markdown files (easy to format and content will not be married to any platform).
- Responsive and streamlined design.
- Blazing fast UX
- Autogenerated tracedSVG image placeholders are stylized to create a smooth look and transition as the image loads without the page jumping around.
- Posts organized by tags.
- Teasers of posts are generated to front page with infinite scroll which gracefully degrades into pagination.
- Allow readers to be notified of updates with RSS feed and email newsletter.
- Contact Form.
A slick portfolio and blog theme converted to a Gatsby theme. Or you can download directly from Github
Frequently Asked Questions – FAQ
What are the best free Gatsby WordPress themes?
The best free Gatsby WordPress themes are: LekoArts Cara, JugglerX, Ginger, Dimension, Ghost & Gatsby, Gatsby Netlify, Gatsby Material Kit React, Gatsby Starter Theme, Tabor
What is the best Gatsby WordPress theme?
Ginger. Ginger beautiful Gatsby and WPGraphQL WordPress theme for bloggers, photographers and any lifestyle professionals looking for amazing and fast theme.
What is Gatsby WordPress theme?
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
How do I use GatsbyJS?
There are two main ways to get started with Gatsby:
- Tutorial: Step-by-step instructions on how to install Gatsby and start a project: written for people without Gatsby or web development experience, though these learning resources have helped developers of all skill levels.
- Quick start: One page summary of how to install Gatsby and start a new project.
How to Install Gatsby JS?
- Install the Gatsby CLI. Copy. npm install -g gatsby-cli.
- Create a new site. Copy. gatsby new gatsby-site.
- Change directories into site folder. Copy. cd gatsby-site.
- Start development server. Copy. gatsby develop.
- Create a production build. Copy. gatsby build.
- Serve the production build locally. Copy. gatsby serve.