X

10+ Best Free Gatsby WordPress Themes (gatsby.js 2020)

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

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 to build super fast website in 2020

LekoArts Cara

leko arts

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

JugglerX

juggler X

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`
  • SCSS
  • 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

Portfolio Starter Jodie

portfolio 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
  • TypeScript
  • 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

Dimension

dimension

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.

Ghost & Gatsby

ghost and 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

Gatsby Netlify

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

Gatsby Material Kit React

material kit react

Adaptation of Material Kit React to Gatsby

  • 60 Handcrafted Components
  • 4 Customized Plugins
  • 3 Example Pages

Blogger

blogger

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.

Gatsby Starter Theme

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

London Portfolio

london portfolio

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

Gatsby Portfolio

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

Blog

blog

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

Tabor

tabor

A slick portfolio and blog theme converted to a Gatsby theme. Or you can download directly from Github