Artboard 2

Build the internet on DigitalOcean with ☁️ Servers, Managed DBs, K8s. 💰 Start free with a $100 credit.

6 Gatsby Starters and Themes For Your Static Site

Lumen is a minimalistic, mobile-first starter perfect for on-page websites and blogs

DevHoot

Static sites are all the rage right now and Gatsby is at the forefront. If you’ve already jumped Gatsby wagon and you’re working on customizing your Gatsby static site I bet you’d like to save some time, right? If that’s the case (and even if it isn’t) starters and themes are something you need to check out since they are built to help you to skip the configuration part, take care of basic features and head straight on to development.

Conveniently so, at least for a newbie like me, starters and themes helped me a lot while learning the ropes. However, keep in mind that the options are abundant and, depending on what you need, it can be hard to pick just one. It is a problem oh so familiar to me.

To make your decision a bit easier, I’ve made a list of some of the best Gatsby starters and themes for you to choose from, for your simple projects (one-page presentations, personal blogs or company websites, things like that).

For the sake of those that are completely new to this (just as I am), let’s start from the beginning.

What Is Gatsby?

Gatsby is one of the best and most popular open-source frameworks out there and it can be used for making websites, such as personal blogs, marketing sites, etc. Gatsby also makes a great foundation for building SPA, complex PWAs and web apps in general.

Gatsby is built with React and also on top of some other technologies (such as GraphQL and JavaScript). For developers who work with React and JavaScript already using Gasby means that they stay in the same ecosystem which in turn makes everything significantly easier. Gatsby rather prides itself on abstracting the dull parts of front-end development such as bundling, optimizations and transforming data (which it does very well).

The best of all, it can take in data from all sorts of sources such as markdown files, headless CMS platforms, and other third-party APIs.

Why Use Gatsby?

Because it can act as a static site builder. In general, static sites have many pros. The most important ones are performance/speed and security.

Gatsby ensures that your site loads as fast as possible. It does so by only loading the important HTML data, CSS, and JavaScript. Although it leverages React, Gatsby combines different libraries and tools to create a powerful, simple framework for developers. Some of them, like linking or handling images, will make the whole process of developing a site much easier.

As for security, well, since there is no server or database, and pure HTML pages are served over CDNs for example, the surface for malicious attacks is significantly smaller.

What Are Gatsby Themes?

Gatsby has a large library with a lot of starters and themes. Starters and themes are very similar, so you can basically use them as synonyms. However, some differences do exist, so let’s briefly define these terms.

Gatsby Starters

In order to create a Gatsby site more quickly, people often turn to starters (as should you if you are a beginner). Starters are sites with pre-configured functionality and users can freely customize them. They are pre-made for a specific purpose, such as e-commerce, blogging, etc. To see Gatsby’s starter library, click here.

They have a couple of downsides, though, but nothing too drastic. For example, if you use one starter to create multiple sites and you decide to make the same update to all of them, you’ll have to do it one by one. However, themes help with avoiding some of these issues.

Gatsby Themes

Gatsby themes or Gatsby templates are basically the more advanced versions of starters. They essentially have the same purpose, but avoid some of the problems that users encounter on occasion. Themes allow you to easily compose UI, configuration, and functionality across multiple sites.

One upside is that, by using a theme, the configuration isn’t written into the project. Instead, all of it lives inside an installable external package. Themes also allow smooth updating, composing Gatsby templates together and swapping compatible themes.

Six Gatsby Themes and Starters For Your Static Website

Gatsby Starter Blog

blog devhoot

This is one of the simplest, cleanest blog templates made for Gatsby. It comes with a few posts out of the box, and some styling with which you can play and explore the ability Gatsby offers. On top of that, it features multiple plugins that allow different useful things, such as offline support and pretty typography. Also, it has Google Analytics and RSS feed support.

This is a no brainer starter for newbies. So, if you’ve just started learning Gatsby, play with this one.

Get this theme

Gatsby Starter Lumen

lumen devhoot

Lumen is a minimalistic, mobile-first starter perfect for on-page websites and blogs. Besides offline support, it offers Disqus Comments integration (talk about dynamic features in a static site) and Google Analytics support. The archives are organized by categories and tags and the typography is inspired by matejlatin/Gutenberg. The clean aesthetic will definitely make your content stand out, but you can always switch some things up.

Get this theme

Gatsby Starter Portfolio

portfolio devhoot To step up a notch your Gatsby skills and to create a portfolio, use this starter. It’s a fun and colorful starter with the light and dark mode functionality and nice touches like the Parallax effects and animations give another dimension to the starter story.

For most creating portfolio, websites is a necessary evil and surely enough everyone can use this Gatsby template, but it’s best recommended for photographers and designers!

Get this theme

Apollo Gatsby Theme

apollo devhoot

Running a documentation website can be challenging at times. One of the best solutions is using this one.

Get this theme

SuperProps

superprops devhoot

Enter the landing pages. SuperProps is built with React, Gatsby Js, Next Js, and styled-components. One of the best features is the modern mono repo architecture and the fact that it’s very easy to deploy. An awesome solution if you are looking to build an impressive landing page. Just keep in mind that when landing pages are concerned, images are half of the first impression, half of the landing page success so make an effort with the images as well. Check it out!

Get this theme

StoryHub

storyhub devhoot

StoryHub is a theme made specifically for blogs. It’s quick, SEO friendly, easy to use, with a couple of pre-built blog templates and integration with Disqus (think comments) and Mailchimp (think newsletter and forms). Ready to be deployed on any of the popular hosting and deployment solutions. Performance vise it has proved to be better than the one for Wordpress.

Get this theme

The Beginning

Modern-day marketing requires you to be a jack of all trades so to speak. Keeping a tap on web dev trends among many other things has become a necessity. For me, however, getting into the Gatsby was much more than a mere introduction story. With not many posts talking about newbie experience I hope this one will be, as it was for me, the beginning of your Gatsby journey.

Further Reading

Hopefully, I got you interested into Gatsby. But I’ve just scratched the surface, to be honest (maybe not even in a good way). Maybe even not in the right way. For this reason, check out the list of the Gatsby beginners resources that have helped me and will, I guess, help you as well:

Subscribe below or here to receive new content whenever we publish. 👇

No new content, No new e-mail. Promise !!!