JAMstack with Gatsby and Netlify
Tags: javascript, jamstack, gatsby, netlify
Published: 2019-03-31 18:18:42

---
title: JAMstack with Gatsby and Netlify
description: I'd like to share some thoughts about the JAMstack. And in particular - the JAMstack with Gatsby and Netlify. I work as a web developer at F-Secure and I am convinced that performance on the web matters. The web just had its 30th birthday and it's our job to build performing and high-quality experiences.
published: true
tags: javascript, jamstack, gatsby, netlify
canonical_url: https://blog.georgi-yanev.com/learning/jamstack-with-gatsby-and-netlify/
cover_image: https://blog.georgi-yanev.com/static/jamstack-with-gatsby-and-netlify-1-1b72efd01e626d5a46bd72aedad21008.jpg
---

This post is based on a talk I gave at [Frontend Finland 2019](https://www.meetup.com/frontendfinland/events/258866782/) and at [HelsinkiJS March 2019](https://twitter.com/helsinkijs) called: **“JAMstack with Gatsby and Netlify”**.

[<picture>
        <source srcset="/static/1b72efd01e626d5a46bd72aedad21008/13373/jamstack-with-gatsby-and-netlify-1.webp 230w,
/static/1b72efd01e626d5a46bd72aedad21008/47190/jamstack-with-gatsby-and-netlify-1.webp 460w,
/static/1b72efd01e626d5a46bd72aedad21008/410e1/jamstack-with-gatsby-and-netlify-1.webp 892w" sizes="(max-width: 892px) 100vw, 892px" type="image/webp"></source>
        <source srcset="/static/1b72efd01e626d5a46bd72aedad21008/59e57/jamstack-with-gatsby-and-netlify-1.jpg 230w,
/static/1b72efd01e626d5a46bd72aedad21008/cc1cc/jamstack-with-gatsby-and-netlify-1.jpg 460w,
/static/1b72efd01e626d5a46bd72aedad21008/3da90/jamstack-with-gatsby-and-netlify-1.jpg 892w" sizes="(max-width: 892px) 100vw, 892px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/1b72efd01e626d5a46bd72aedad21008/3da90/jamstack-with-gatsby-and-netlify-1.jpg" alt="Georgi presenting at Frontend Finland 2019" title="">
      </picture>](https://blog.georgi-yanev.com/static/1b72efd01e626d5a46bd72aedad21008/3da90/jamstack-with-gatsby-and-netlify-1.jpg)

## 🕳 Intro and why

I’d like to share some thoughts about the [JAMstack](https://jamstack.org). And in particular - the JAMstack with [Gatsby](https://www.gatsbyjs.org/) and [Netlify](https://www.netlify.com/). I work as a [web developer](https://blog.georgi-yanev.com/learning/how-i-got-into-software-development/) at F-Secure and I am convinced that performance on the web matters. [The web just had its 30th birthday](https://web30.web.cern.ch/) and it’s our job to build performing and high-quality experiences.

[<picture>
        <source srcset="/static/17de2f600c6ccccc98312534a2dd6488/1b73d/jamstack-with-gatsby-and-netlify-0.webp 230w,
/static/17de2f600c6ccccc98312534a2dd6488/e8edb/jamstack-with-gatsby-and-netlify-0.webp 460w,
/static/17de2f600c6ccccc98312534a2dd6488/ccf12/jamstack-with-gatsby-and-netlify-0.webp 920w,
/static/17de2f600c6ccccc98312534a2dd6488/ad9ec/jamstack-with-gatsby-and-netlify-0.webp 1133w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/17de2f600c6ccccc98312534a2dd6488/f340c/jamstack-with-gatsby-and-netlify-0.jpg 230w,
/static/17de2f600c6ccccc98312534a2dd6488/17ded/jamstack-with-gatsby-and-netlify-0.jpg 460w,
/static/17de2f600c6ccccc98312534a2dd6488/913e9/jamstack-with-gatsby-and-netlify-0.jpg 920w,
/static/17de2f600c6ccccc98312534a2dd6488/7821d/jamstack-with-gatsby-and-netlify-0.jpg 1133w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/17de2f600c6ccccc98312534a2dd6488/913e9/jamstack-with-gatsby-and-netlify-0.jpg" alt="Georgi's business card" title="">
      </picture>](https://blog.georgi-yanev.com/static/17de2f600c6ccccc98312534a2dd6488/7821d/jamstack-with-gatsby-and-netlify-0.jpg)

Oh yeah, and I love flying FPV drones.

So, let’s get to it.

## 🥞 What is the JAMstack?

[<picture>
        <source srcset="/static/f71b1b285c1d5cce3cf5c73514474711/1b73d/jamstack-with-gatsby-and-netlify-2.webp 230w,
/static/f71b1b285c1d5cce3cf5c73514474711/e8edb/jamstack-with-gatsby-and-netlify-2.webp 460w,
/static/f71b1b285c1d5cce3cf5c73514474711/ccf12/jamstack-with-gatsby-and-netlify-2.webp 920w,
/static/f71b1b285c1d5cce3cf5c73514474711/2d764/jamstack-with-gatsby-and-netlify-2.webp 1380w,
/static/f71b1b285c1d5cce3cf5c73514474711/126d9/jamstack-with-gatsby-and-netlify-2.webp 1840w,
/static/f71b1b285c1d5cce3cf5c73514474711/d6f91/jamstack-with-gatsby-and-netlify-2.webp 1956w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/f71b1b285c1d5cce3cf5c73514474711/f340c/jamstack-with-gatsby-and-netlify-2.jpg 230w,
/static/f71b1b285c1d5cce3cf5c73514474711/17ded/jamstack-with-gatsby-and-netlify-2.jpg 460w,
/static/f71b1b285c1d5cce3cf5c73514474711/913e9/jamstack-with-gatsby-and-netlify-2.jpg 920w,
/static/f71b1b285c1d5cce3cf5c73514474711/84a87/jamstack-with-gatsby-and-netlify-2.jpg 1380w,
/static/f71b1b285c1d5cce3cf5c73514474711/e97dd/jamstack-with-gatsby-and-netlify-2.jpg 1840w,
/static/f71b1b285c1d5cce3cf5c73514474711/61917/jamstack-with-gatsby-and-netlify-2.jpg 1956w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/f71b1b285c1d5cce3cf5c73514474711/913e9/jamstack-with-gatsby-and-netlify-2.jpg" alt="image of JAMstack description" title="">
      </picture>](https://blog.georgi-yanev.com/static/f71b1b285c1d5cce3cf5c73514474711/61917/jamstack-with-gatsby-and-netlify-2.jpg)

> _Credit: jamstack.org_

The `JAM` acronym stands for `J` avascript, `A` PIs, `M` arkup.

It’s a term coined by [Mathias Biilmann](https://twitter.com/biilmann) from Netlify and has been making rounds for the past few years. Let’s destructure the acronym.

#### `const { J } = JAM`

> “Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript.”

> _jamstack.org_

I think the key takeaways here are **running entirely on the client** and **any framework, library or VanillaJS**. Cool, so pretty loose definition, which is great.

#### `const { A } = JAM`

> “All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services.”

> _jamstack.org_

I’d like to bring your attention here to the **reusable APIs over HTTPS with JavaScript** and **custom-built or third-party services**. Good definition, nothing groundbreaking, pretty simple.

#### `const { M } = JAM`

> “Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.”

> _jamstack.org_

The markup part talks about **prebuilt markup at deploy time**. Some tooling required, ok cool.

Here are [several example jamstack sites featured on jamstack.org/examples](https://jamstack.org/examples/):

[<picture>
        <source srcset="/static/2d09dcaf17d9367765bb75ca0ab9ea5b/1b73d/jamstack-with-gatsby-and-netlify-3.webp 230w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/e8edb/jamstack-with-gatsby-and-netlify-3.webp 460w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/ccf12/jamstack-with-gatsby-and-netlify-3.webp 920w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/2d764/jamstack-with-gatsby-and-netlify-3.webp 1380w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/8e3a9/jamstack-with-gatsby-and-netlify-3.webp 1600w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/2d09dcaf17d9367765bb75ca0ab9ea5b/f340c/jamstack-with-gatsby-and-netlify-3.jpg 230w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/17ded/jamstack-with-gatsby-and-netlify-3.jpg 460w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/913e9/jamstack-with-gatsby-and-netlify-3.jpg 920w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/84a87/jamstack-with-gatsby-and-netlify-3.jpg 1380w,
/static/2d09dcaf17d9367765bb75ca0ab9ea5b/7fa22/jamstack-with-gatsby-and-netlify-3.jpg 1600w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/2d09dcaf17d9367765bb75ca0ab9ea5b/913e9/jamstack-with-gatsby-and-netlify-3.jpg" alt="Example jamstack sites featured on https://jamstack.org/examples/" title="">
      </picture>](https://blog.georgi-yanev.com/static/2d09dcaf17d9367765bb75ca0ab9ea5b/7fa22/jamstack-with-gatsby-and-netlify-3.jpg)

Again the interesting thing to note is that you could opt-in for any framework or library and still ship a JAMstack site. It’s interesting to also note the fact that many of the examples use headless CMS’s to pull in content.

Here’s the part I personally like the most about the JAMstack.

[<picture>
        <source srcset="/static/33d1a3754974f5fd1990d9ce9c636b7a/f3b16/jamstack-with-gatsby-and-netlify-4.webp 230w,
/static/33d1a3754974f5fd1990d9ce9c636b7a/a2dcf/jamstack-with-gatsby-and-netlify-4.webp 460w,
/static/33d1a3754974f5fd1990d9ce9c636b7a/dffcd/jamstack-with-gatsby-and-netlify-4.webp 920w,
/static/33d1a3754974f5fd1990d9ce9c636b7a/6fe76/jamstack-with-gatsby-and-netlify-4.webp 1268w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/33d1a3754974f5fd1990d9ce9c636b7a/45504/jamstack-with-gatsby-and-netlify-4.png 230w,
/static/33d1a3754974f5fd1990d9ce9c636b7a/5b68b/jamstack-with-gatsby-and-netlify-4.png 460w,
/static/33d1a3754974f5fd1990d9ce9c636b7a/1bee4/jamstack-with-gatsby-and-netlify-4.png 920w,
/static/33d1a3754974f5fd1990d9ce9c636b7a/06895/jamstack-with-gatsby-and-netlify-4.png 1268w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/33d1a3754974f5fd1990d9ce9c636b7a/1bee4/jamstack-with-gatsby-and-netlify-4.png" alt="Core ideas of the JAMstack" title="">
      </picture>](https://blog.georgi-yanev.com/static/33d1a3754974f5fd1990d9ce9c636b7a/06895/jamstack-with-gatsby-and-netlify-4.png)

#### 📈 Better Performance

The biggest performance benefit with the JAMstack approach comes from the fact that we are serving prebuilt HTML from the CDN edge.

#### 🔐 Higher Security

Less server side processes = less attack surface.

#### 💵 Cheaper and Easier Scaling

As a rule of thumb scaling is easy and efficient for static files and that’s what we are ultimately deploying.

#### 😍 Better Developer Experience

With a JAMstack approach, there are fewer things to maintain and it’s usually faster to deploy, so developers are happy.

#### Disclaimer

While here I aim to focus more on the benefits of the JAMstack, it is worth noting that the JAMstack approach is not a silver bullet and it is not the answer to all problems. In engineering, it is a good idea to consider the trade-offs and choose the right approach for your project.

> **Engineering is all about making the right trade-offs based on your requirements**

Just a month ago [Jason Miller](https://twitter.com/_developit) and [Addy Osmani](https://twitter.com/addyosmani) from the Google Chrome team put together an [article on when to use SSR and a comparison on many different rendering strategies](https://developers.google.com/web/updates/2019/02/rendering-on-the-web).

{% twitter 1093223382223605762 %}

The article makes for an interesting read and in particular, this table is worth spending some time on.

[<picture>
        <source srcset="/static/6f592ffba7b652d4d8104eff9ec9e19a/f3b16/jamstack-with-gatsby-and-netlify-5.webp 230w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/a2dcf/jamstack-with-gatsby-and-netlify-5.webp 460w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/dffcd/jamstack-with-gatsby-and-netlify-5.webp 920w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/ea7e5/jamstack-with-gatsby-and-netlify-5.webp 1380w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/fb278/jamstack-with-gatsby-and-netlify-5.webp 1840w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/f1fa9/jamstack-with-gatsby-and-netlify-5.webp 2164w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/6f592ffba7b652d4d8104eff9ec9e19a/45504/jamstack-with-gatsby-and-netlify-5.png 230w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/5b68b/jamstack-with-gatsby-and-netlify-5.png 460w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/1bee4/jamstack-with-gatsby-and-netlify-5.png 920w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/33a43/jamstack-with-gatsby-and-netlify-5.png 1380w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/e5ca8/jamstack-with-gatsby-and-netlify-5.png 1840w,
/static/6f592ffba7b652d4d8104eff9ec9e19a/7f95c/jamstack-with-gatsby-and-netlify-5.png 2164w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/6f592ffba7b652d4d8104eff9ec9e19a/1bee4/jamstack-with-gatsby-and-netlify-5.png" alt="Comparison of different rendering strategies" title="">
      </picture>](https://blog.georgi-yanev.com/static/6f592ffba7b652d4d8104eff9ec9e19a/7f95c/jamstack-with-gatsby-and-netlify-5.png)

> _Credit: [https://developers.google.com/web/updates/2019/02/rendering-on-the-web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)_

Finally, another resource worth checking out is the JAMstack video on the Google Chrome Developers YouTube channel by [Surma](https://twitter.com/DasSurma) and [Jake Archibald](https://twitter.com/jaffathecake).

<iframe src="https://www.youtube.com/embed/QXsWaA3HTHA?rel=0" frameborder="0" allowfullscreen title="JAMstack with Surma and Jake Archibald from the Google Chrome team" style="
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          "></iframe>

<img alt="Netlify logo" src="https://blog.georgi-yanev.com/jamstack-with-gatsby-and-netlify-6-50b3f93d034be3b993615e298e9633dc.svg" style="height: 60px !important;" />

The next sections on different [Netlify](https://www.netlify.com/) features might come across a bit as fanboyish, and that’s because they largely are. I’m not even sorry, because everything I have outlined below has been my personal experience and for the better part everything has been outstanding.

#### 😍 Dev Experience

If you are active on Twitter and following any Frontend or Full stack people chances are you might have heard people praise Netlify for what it is, and rightfully so. In fact, I do so myself frequently. It’s because they are awesome, the product is great, and the developer experience score is over 9000.

#### 💵 Free tier

You can get started with the free tier in a matter of seconds and you will probably not outgrow it any time soon.

#### 📦 Application Delivery Network (ADN)

CDN for apps. Netlify comes with a powerful CDN for applications and static sites with plenty of edge nodes.

#### 🔁 Continuous Deployment

If your project has a repository in GitHub, GitLab or Bitbucket, it’s a matter of a few clicks to link that repository to Netlify. This enables you to publish on merges or pushes to the `master` branch of your repository, for example. Very easy to set up with no hassle, very powerful feature.

#### 📑 SSL Certificates

Netlify provides a free of charge SSL certificate for your project by utilizing the open source Let’s Encrypt project. This is important because in 2019 SSL and https are not only highly recommended they are almost a requirement. That provides better security for your users, is required for HTTP/2 and some new TLDs (like `.dev`) and is good for SEO. The best part about it - Netlify automatically renews the certificates for you, so you don’t have to do anything!

#### 📝 Custom Domains

Here the developer experience comes first again, as it is just SO easy to set up a custom domain for your site. With a few clicks, you are good to go. The flow is very smooth. You can also rename the default subdomain where Netlify hosts your project by default, and redirect that to your custom domain. Very cool.

#### 🚀 Auto previews for PRs

When you open a pull request against the master branch of your repository, Netlify will automatically build a preview of that pull request. That’s super awesome! Again, no configuration required, apart from having a project linked to a GitHub repository. That’s pretty neat to be always able to check quickly how the changes from a PR look before you have merged it.

#### ƒ Netlify Functions

AWS lambdas simplified. This is really nice to have in case you ever need to do a bit more with Node.js. You don’t have to use it if you don’t want to, but the feature is there which is neat.

#### 🆔 Netlify Identity

Provides authentication. A way to manage sign-ups, logins. Could be cool for things like the Netlify CMS or creating some sort of gated content like dashboards, personal account pages and more.

#### 📅 Netlify Forms

Get data from a form right into the Netlify app by only adding a `netlify` attribute to a form. This could be very cool and quite useful you if don’t want to go over setting up something more complicated and you need to ship something now, or you are prototyping.

#### 🙌 Deploy a site by dragging and dropping

![Gif that shows how to deploy a simple hello world site on Netlify by dragging and dropping](https://blog.georgi-yanev.com/jamstack-with-gatsby-and-netlify-7-986cd0438c37f9bc938e113bf783a397.gif)

The above is a 30-second deploy demo that gets your site on the internet at a netlify.com subdomain (that you can rename or set up your own custom domain) and an SSL certificate. It’s bonkers 🤯.

#### 👍 Deploy from a repository

But as I mentioned the true power of Netlify comes from connecting it straight to a repository, when you can reap the benefits of auto deploys, deploy previews and other nice things.

 ![Gatsby logo](https://blog.georgi-yanev.com/jamstack-with-gatsby-and-netlify-8-405dc67cbefba905fd9f2f6cd334d0d2.svg)

[Gatsby](https://www.gatsbyjs.org/) is many times introduced as a React based static site generator (which it is) but it also doesn’t do it justice, because maybe some people miss the fact that Gatsby also rehydrates into a full-fledged React app during runtime.

#### 🔥 Blazing fast

One of the most important points is that Gatsby is engineered for performance from the ground up. A default project setup with Gatsby starts off with Lighthouse scores of 100 across Performance, Accessibility, Best Practices, and SEO and can be configured in seconds to deploy as a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (PWA).

#### 🛠 Tooling

Gatsby comes with all the modern tools configured and setup for you. You get [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [GraphQL](https://graphql.org/) and so much more.

#### 📀 Your data from any source

Gatsby creates GraphQL types of data from any source so that you can query it in a similar way across your app. The data can be sourced from headless CMS’s, third-party APIs, local file system and more. Some headless CMS options worth mentioning and trying out are: [Contentful](https://www.contentful.com/), [Sanity](https://www.sanity.io/), [DatoCMS](https://www.datocms.com/).

#### 📦 Deploy Anywhere

Because Gatsby compiles your project into static files (HTML, CSS, JS, JSON) you can deploy the output anywhere you could deploy static assets. For example: [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), [Now](https://zeit.co/now), [GitHub Pages](https://pages.github.com/) and more.

#### 🅿W🅰

You can create a PWA in seconds by running:

```
$ npx gatsby new my-pwa
```

and then enabling the `gatsby-plugin-offline` in `gatsby-config.js` by uncommenting it.

#### 👩‍💻 DX

The developer experience is pretty solid. There many helpful warning and error messages with actionable information available right in your terminal should any issues arise while you are developing.

Because Gatsby uses Webpack under the hood, you get Hot Module Replacement (HMR) and previewing changes while developing is nearly instant as soon as you save the file.

Except for booting up your project on `localhost:8000`, Gatsby also gives you a GraphiQL instance at `localhost:8000/___graphql` where you can live query your data and prototype GraphQL queries, as well as just explore the shape of your data. Very useful!

#### 🔄 Rich ecosystem

There are plenty of resources to get you started. More than 700 plugins and plenty of starters that are just an `npx gatsby new [GITHUB REPO URL]` away.

#### 💜 Amazing community

The community around Gatsby is comprised of many people passionate about the future of the project, willing to help each other out. There are a LOT of articles out there on complete stacks, solving a particular problem, or just using a specific data source. That makes it easy to find an example when you need one.

There is a [Discord](https://gatsby.app/discord) channel, [Spectrum](https://spectrum.chat/gatsby-js) community and following [Gatsby on Twitter](https://twitter.com/gatsbyjs) is probably a good idea, as the main account tweets and retweets many useful resources.

In fact, some people might be so passionate, as to have claimed that a Gatsby project can get a Lighthouse performance score of 70+ while running at CDN edge on a _TOASTER_.

{% twitter 1083999310168162304 %}

Here’s how the Lighthouse scores of the default Gatsby starter look, for illustration purposes.

[<picture>
        <source srcset="/static/c644ba05afac5ed217069133ce98f914/06331/jamstack-with-gatsby-and-netlify-9.webp 230w,
/static/c644ba05afac5ed217069133ce98f914/2220c/jamstack-with-gatsby-and-netlify-9.webp 460w,
/static/c644ba05afac5ed217069133ce98f914/c6d9f/jamstack-with-gatsby-and-netlify-9.webp 920w,
/static/c644ba05afac5ed217069133ce98f914/b561b/jamstack-with-gatsby-and-netlify-9.webp 1048w" sizes="(max-width: 786px) 100vw, 786px" type="image/webp"></source>
        <source srcset="/static/c644ba05afac5ed217069133ce98f914/3b4aa/jamstack-with-gatsby-and-netlify-9.png 230w,
/static/c644ba05afac5ed217069133ce98f914/e4e5c/jamstack-with-gatsby-and-netlify-9.png 460w,
/static/c644ba05afac5ed217069133ce98f914/61009/jamstack-with-gatsby-and-netlify-9.png 920w,
/static/c644ba05afac5ed217069133ce98f914/8ee63/jamstack-with-gatsby-and-netlify-9.png 1048w" sizes="(max-width: 786px) 100vw, 786px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/c644ba05afac5ed217069133ce98f914/61009/jamstack-with-gatsby-and-netlify-9.png" alt="image of Gatsby default starter" title="">
      </picture>](https://blog.georgi-yanev.com/static/c644ba05afac5ed217069133ce98f914/8ee63/jamstack-with-gatsby-and-netlify-9.png)

### 🚀 #Perfmatters

Here’s where I take a small tangent on a topic I care deeply about - web performance.

There are many reasons to care about performance, but at the end of the day, it’s Your users and Your business on the line.

Performance, speed, user satisfaction all translate to real money. There are also SEO benefits for fast sites as of July 2018 as page speed is now a part of the page ranking algorithm.

Having a fast, performing site is a good way to distinguish yourself from your competition. Users are impatient nowadays, and slow sites lead to increased bounce rates.

Finally, as we welcome the next 1 billion users on the internet, it’s good to be aware that they might be coming online from places where bandwidth is expensive and connections could be flaky.

Now that the Web had its 30th birthday, let’s be nice and build quality experiences!

#### What can Gatsby do about that?

Well, as I mentioned already, Gatsby is engineered for performance from the ground up. There are many things that Gatsby does right and manages for you. From how resources are loaded to optimize for the [critical rendering path (CRP)](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/), to how resources are prefetched and preloaded for routes the user might hit next.

But I’d like to talk about the `gatsby-image` component. Opting-in to use that for your images, is a great way to grab some of those high impact low effort low hanging fruit.

Depending on what your app is like, images could make up for a big portion of all the resources you serve to users. In some cases, it could be up north of 70%. Now, admittedly, byte for byte JavaScript has a higher cost than images, because it also undergoes parsing and execution after downloading, but Gatsby manages that for you, and images are still very important to handle right.

At the very least I suggest you use [squoosh.app](https://squoosh.app/) to resize and optimize your original assets.

What `gatsby-image` does for you is it provides you with a highly optimized lazy loading image component. Images not in the viewport during page load are not going to be downloaded. In their place, you could opt-in for a low-quality base64 encoded image placeholder, that gets replaces with the original high-quality image as soon as the user scrolls that asset in the viewport. Gatsby provides you a blur up effect or a traced SVG effect if that’s what you choose how to handle the low-quality placeholder.

The `gatsby-image` component also has a `srcset` attribute where different size images are specified based on viewport width to avoid serving extra large assets to devices that couldn’t use up the full size of the image.

Finally, the component serves `webp` images to browsers that can handle that. There is always a fallback for `jpeg` or `png`, but serving `webp` can help a lot because the file size is usually significantly smaller with a visibly similar quality as `jpeg` or `png`.

### Try out React and GraphQL for the first time

Whether you are a seasoned veteran or a newcomer to the [React](https://reactjs.org/) and [GraphQL](https://graphql.org/) world, it is easy to get started with those technologies when using Gatsby. I think it’s worth mentioning that because you don’t need a whole lot of prior knowledge to get started here. You can write your first React component or a GraphQL query today with Gatsby.

And because Gatsby is using React under the hood, that means you could pull up any React package from [npm](https://www.npmjs.com/). Yay 🎉!

### How does Gatsby work in a nutshell?

[<picture>
        <source srcset="/static/8626cb70182f831275a076d68b18b807/f3b16/jamstack-with-gatsby-and-netlify-10.webp 230w,
/static/8626cb70182f831275a076d68b18b807/a2dcf/jamstack-with-gatsby-and-netlify-10.webp 460w,
/static/8626cb70182f831275a076d68b18b807/dffcd/jamstack-with-gatsby-and-netlify-10.webp 920w,
/static/8626cb70182f831275a076d68b18b807/ea7e5/jamstack-with-gatsby-and-netlify-10.webp 1380w,
/static/8626cb70182f831275a076d68b18b807/e0ac3/jamstack-with-gatsby-and-netlify-10.webp 1554w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/8626cb70182f831275a076d68b18b807/45504/jamstack-with-gatsby-and-netlify-10.png 230w,
/static/8626cb70182f831275a076d68b18b807/5b68b/jamstack-with-gatsby-and-netlify-10.png 460w,
/static/8626cb70182f831275a076d68b18b807/1bee4/jamstack-with-gatsby-and-netlify-10.png 920w,
/static/8626cb70182f831275a076d68b18b807/33a43/jamstack-with-gatsby-and-netlify-10.png 1380w,
/static/8626cb70182f831275a076d68b18b807/85ea0/jamstack-with-gatsby-and-netlify-10.png 1554w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/8626cb70182f831275a076d68b18b807/1bee4/jamstack-with-gatsby-and-netlify-10.png" alt="image of Gatsby architecture, holistic overview" title="">
      </picture>](https://blog.georgi-yanev.com/static/8626cb70182f831275a076d68b18b807/85ea0/jamstack-with-gatsby-and-netlify-10.png)

> _Image from gatsbyjs.org_

Quite straightforward. We have our data sources at the top. Those could be anything from headless CMS’s to local JSON or YAML files, to 3rd party APIs and others.

Gatsby pulls those in and generates GraphQL types for you that you can query against. `localhost:8000/___graphql` is your friend when you want to explore the data.

Then, bring in the data to your components using GraphQL queries, which makes said data available as a `data` prop on your components. Use it to build your components.

When you run `gatsby build`, Gatsby will create a production build in the `public` directory at the root. Use that to deploy the assets to any static web host (Netlify, AWS, Now, GitHub pages, etc).

### How to get started?

#### CLI

To get started from the command line run:

```
$ npx gatsby new my-site
```

This will set up for you the default Gatsby starter project.

#### [CodeSandbox.io](https://codesandbox.io/)

You can try out Gatsby right in CodeSandbox. Create a new sandbox and select Gatsby from the server templates.

[<picture>
        <source srcset="/static/90ce7e2919fd60ca99acda2e87cd532f/1e1b7/jamstack-with-gatsby-and-netlify-11.webp 230w,
/static/90ce7e2919fd60ca99acda2e87cd532f/bac0a/jamstack-with-gatsby-and-netlify-11.webp 460w,
/static/90ce7e2919fd60ca99acda2e87cd532f/b24f3/jamstack-with-gatsby-and-netlify-11.webp 898w" sizes="(max-width: 898px) 100vw, 898px" type="image/webp"></source>
        <source srcset="/static/90ce7e2919fd60ca99acda2e87cd532f/0ad4d/jamstack-with-gatsby-and-netlify-11.png 230w,
/static/90ce7e2919fd60ca99acda2e87cd532f/f9010/jamstack-with-gatsby-and-netlify-11.png 460w,
/static/90ce7e2919fd60ca99acda2e87cd532f/57193/jamstack-with-gatsby-and-netlify-11.png 898w" sizes="(max-width: 898px) 100vw, 898px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/90ce7e2919fd60ca99acda2e87cd532f/57193/jamstack-with-gatsby-and-netlify-11.png" alt="image of codesandbox starters" title="">
      </picture>](https://blog.georgi-yanev.com/static/90ce7e2919fd60ca99acda2e87cd532f/57193/jamstack-with-gatsby-and-netlify-11.png)

#### By deploying to Netlify

Use the green deploy to Netlify button, available on many starter repositories to instantly deploy a version of that project to Netlify.

[<picture>
        <source srcset="/static/5ca96315f909940022f12568c60eea2f/7ca9a/jamstack-with-gatsby-and-netlify-12.webp 227w" sizes="(max-width: 227px) 100vw, 227px" type="image/webp"></source>
        <source srcset="/static/5ca96315f909940022f12568c60eea2f/cffb5/jamstack-with-gatsby-and-netlify-12.png 227w" sizes="(max-width: 227px) 100vw, 227px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/5ca96315f909940022f12568c60eea2f/cffb5/jamstack-with-gatsby-and-netlify-12.png" alt="image of netlify deploy button" title="">
      </picture>](https://blog.georgi-yanev.com/static/5ca96315f909940022f12568c60eea2f/cffb5/jamstack-with-gatsby-and-netlify-12.png)

Alternatively, pass a Gatsby starter repository to the `repository` parameter as seen below:

`https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default`

### Data Sources

One of the nice things about Gatsby is the fact that you could pipe in data from many different data sources.

[<picture>
        <source srcset="/static/116ec4717227e37c9e915a4162c0f1bb/1b73d/jamstack-with-gatsby-and-netlify-13.webp 230w,
/static/116ec4717227e37c9e915a4162c0f1bb/e8edb/jamstack-with-gatsby-and-netlify-13.webp 460w,
/static/116ec4717227e37c9e915a4162c0f1bb/ccf12/jamstack-with-gatsby-and-netlify-13.webp 920w,
/static/116ec4717227e37c9e915a4162c0f1bb/df4ad/jamstack-with-gatsby-and-netlify-13.webp 1062w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/116ec4717227e37c9e915a4162c0f1bb/f340c/jamstack-with-gatsby-and-netlify-13.jpg 230w,
/static/116ec4717227e37c9e915a4162c0f1bb/17ded/jamstack-with-gatsby-and-netlify-13.jpg 460w,
/static/116ec4717227e37c9e915a4162c0f1bb/913e9/jamstack-with-gatsby-and-netlify-13.jpg 920w,
/static/116ec4717227e37c9e915a4162c0f1bb/6cf75/jamstack-with-gatsby-and-netlify-13.jpg 1062w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/116ec4717227e37c9e915a4162c0f1bb/913e9/jamstack-with-gatsby-and-netlify-13.jpg" alt="image of some data sources you could use with Gatsby" title="">
      </picture>](https://blog.georgi-yanev.com/static/116ec4717227e37c9e915a4162c0f1bb/6cf75/jamstack-with-gatsby-and-netlify-13.jpg)

Whatever the source - local file system or a headless CMS, the data is available to query in GraphiQL. Try it for yourself right now!

In this example project, we have data coming in from JSON files as seen on the image below.

[<picture>
        <source srcset="/static/288e4fd3aad3c6e97beb8ffa78dd83ac/1b73d/jamstack-with-gatsby-and-netlify-14.webp 230w,
/static/288e4fd3aad3c6e97beb8ffa78dd83ac/e8edb/jamstack-with-gatsby-and-netlify-14.webp 460w,
/static/288e4fd3aad3c6e97beb8ffa78dd83ac/ccf12/jamstack-with-gatsby-and-netlify-14.webp 920w,
/static/288e4fd3aad3c6e97beb8ffa78dd83ac/b1df1/jamstack-with-gatsby-and-netlify-14.webp 1322w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/288e4fd3aad3c6e97beb8ffa78dd83ac/f340c/jamstack-with-gatsby-and-netlify-14.jpg 230w,
/static/288e4fd3aad3c6e97beb8ffa78dd83ac/17ded/jamstack-with-gatsby-and-netlify-14.jpg 460w,
/static/288e4fd3aad3c6e97beb8ffa78dd83ac/913e9/jamstack-with-gatsby-and-netlify-14.jpg 920w,
/static/288e4fd3aad3c6e97beb8ffa78dd83ac/d3555/jamstack-with-gatsby-and-netlify-14.jpg 1322w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/288e4fd3aad3c6e97beb8ffa78dd83ac/913e9/jamstack-with-gatsby-and-netlify-14.jpg" alt="image of project structure" title="">
      </picture>](https://blog.georgi-yanev.com/static/288e4fd3aad3c6e97beb8ffa78dd83ac/d3555/jamstack-with-gatsby-and-netlify-14.jpg)

Now, in the editor below type in:

```
{
  allPagesJson
}
```

and press the play button to execute the query. GraphiQL will fill in some extra subfields for you, namely `edges`, `node` and `id`. In the right pane, you see the data that comes back from your query. Try it out!

{% codesandbox k3201jy9jo initialpath=/___graphql %}

Let’s add also `path`, `title` and `body` each on a separate line below `id`. Click play and see how data for those fields come back as well. Awesome! Congrats on trying out your first GraphQL query!

Here is the final query for illustration purposes.

```
{
  allPagesJson {
    edges {
      node {
        id
        path
        title
        body
      }
    }
  }
}
```

Keep in mind, `CTRL` + `Space` is your friend here. It invokes the autocompletion which is handy for remembering what fields you wanted to fetch.

### 🔁 Ecosystem

#### Plugins

There are [more than 700 plugins](https://www.gatsbyjs.org/plugins/) (at least the ones listed on the official site) for Gatsby, which is a lot. Those plugins are chunks of reusable functionality you can bring into your projects by installing them and configuring them in `gatsby-config.js`. I’m not even going to get into the examples, just search for what you have in mind and chances are it exists. If it does not, then maybe that’s a good opportunity to write a plugin yourself and share it with the community. The tutorial on [how to create a source plugin](https://www.gatsbyjs.org/docs/source-plugin-tutorial/) is a great place to start.

Some plugins enable a certain type of functionality, like create a sitemap, RSS feed or add Google Analytics to your site. Others are the so-called **source** plugins that deal with fetching data. Yet another type is the **transformer** plugins that, well… transform data. For instance from JSON or YAML in your local file system to types you can query from within Gatsby.

It’s also worth mentioning that you could also create local plugins, right within your project. This enables you to create custom private plugins if you have a use case for that (for example an internal company API).

#### Starters

While plugins are more about bringing in chunks of functionality as you need it, [starters are a more well-rounded solution](https://www.gatsbyjs.org/starters/?v=2). A starter is a complete project starting boilerplate based on a specific use case, functionality or a data source.

For example, if you’d like to get started very quickly and you know your project will use data from [Contentful](https://www.contentful.com/) and will be deployed to [Netlify](https://www.netlify.com/) you can start right away with a starter configured for that:

```
$ npx gatsby new https://github.com/ryanwiemer/gatsby-starter-gcn
```

There are starters for [blogging](https://www.gatsbyjs.org/starters/?c=Blog&v=2), with [SEO emphasis](https://www.gatsbyjs.org/starters/?c=SEO&v=2), for [PWAs](https://www.gatsbyjs.org/starters/?c=PWA&v=2), depending on your choice of a [styling solution](https://www.gatsbyjs.org/starters/?c=Styling%3ACSS-in-JS&v=2) and more.

Overall starters are great. There is only one minor potential shortcoming. Right now, if you wanted to pull in updates from the starter you are using as it gets improved over time, you can’t really do that, as your project is completely detached from the starter after the initial setup. The Gatsby team is working on a feature that might change that - [THEMES](https://www.youtube.com/watch?v=PS2784YfPpw). That could be really powerful.

#### Showcase

The [showcase page on gatsbyjs.org](https://www.gatsbyjs.org/showcase/) has a lot of interesting examples for you to check out if you need inspiration and ideas. Or why not [submit your own projects to share them with the community](https://www.gatsbyjs.org/contributing/site-showcase-submissions/)!

### So, what can you build with Gatsby?

**Landing pages**

[<picture>
        <source srcset="/static/89579ad7dbbba43f4ab9ee79e0672f06/f3b16/jamstack-with-gatsby-and-netlify-15.webp 230w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/a2dcf/jamstack-with-gatsby-and-netlify-15.webp 460w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/dffcd/jamstack-with-gatsby-and-netlify-15.webp 920w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/ea7e5/jamstack-with-gatsby-and-netlify-15.webp 1380w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/fb278/jamstack-with-gatsby-and-netlify-15.webp 1840w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/f8ff4/jamstack-with-gatsby-and-netlify-15.webp 1898w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/89579ad7dbbba43f4ab9ee79e0672f06/45504/jamstack-with-gatsby-and-netlify-15.png 230w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/5b68b/jamstack-with-gatsby-and-netlify-15.png 460w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/1bee4/jamstack-with-gatsby-and-netlify-15.png 920w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/33a43/jamstack-with-gatsby-and-netlify-15.png 1380w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/e5ca8/jamstack-with-gatsby-and-netlify-15.png 1840w,
/static/89579ad7dbbba43f4ab9ee79e0672f06/c2d0e/jamstack-with-gatsby-and-netlify-15.png 1898w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/89579ad7dbbba43f4ab9ee79e0672f06/1bee4/jamstack-with-gatsby-and-netlify-15.png" alt="image of justdoit.nike.com" title="">
      </picture>](https://blog.georgi-yanev.com/static/89579ad7dbbba43f4ab9ee79e0672f06/c2d0e/jamstack-with-gatsby-and-netlify-15.png)

> _justdoit.nike.com_

**Image heavy sites**

[<picture>
        <source srcset="/static/95cab71ad921451c635084846dab5cad/1b73d/jamstack-with-gatsby-and-netlify-16.webp 230w,
/static/95cab71ad921451c635084846dab5cad/e8edb/jamstack-with-gatsby-and-netlify-16.webp 460w,
/static/95cab71ad921451c635084846dab5cad/ccf12/jamstack-with-gatsby-and-netlify-16.webp 920w,
/static/95cab71ad921451c635084846dab5cad/2d764/jamstack-with-gatsby-and-netlify-16.webp 1380w,
/static/95cab71ad921451c635084846dab5cad/126d9/jamstack-with-gatsby-and-netlify-16.webp 1840w,
/static/95cab71ad921451c635084846dab5cad/afa95/jamstack-with-gatsby-and-netlify-16.webp 1901w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/95cab71ad921451c635084846dab5cad/f340c/jamstack-with-gatsby-and-netlify-16.jpg 230w,
/static/95cab71ad921451c635084846dab5cad/17ded/jamstack-with-gatsby-and-netlify-16.jpg 460w,
/static/95cab71ad921451c635084846dab5cad/913e9/jamstack-with-gatsby-and-netlify-16.jpg 920w,
/static/95cab71ad921451c635084846dab5cad/84a87/jamstack-with-gatsby-and-netlify-16.jpg 1380w,
/static/95cab71ad921451c635084846dab5cad/e97dd/jamstack-with-gatsby-and-netlify-16.jpg 1840w,
/static/95cab71ad921451c635084846dab5cad/a2c09/jamstack-with-gatsby-and-netlify-16.jpg 1901w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/95cab71ad921451c635084846dab5cad/913e9/jamstack-with-gatsby-and-netlify-16.jpg" alt="image of kirstennoelle.com" title="">
      </picture>](https://blog.georgi-yanev.com/static/95cab71ad921451c635084846dab5cad/a2c09/jamstack-with-gatsby-and-netlify-16.jpg)

> _kirstennoelle.com_

You could build gorgeous projects with a lot of “heavy” high-quality images and still be very performant.

**Data visualization heavy apps**

[<picture>
        <source srcset="/static/2a97074c4a36428360e0546d0a6c8b93/1b73d/jamstack-with-gatsby-and-netlify-17.webp 230w,
/static/2a97074c4a36428360e0546d0a6c8b93/e8edb/jamstack-with-gatsby-and-netlify-17.webp 460w,
/static/2a97074c4a36428360e0546d0a6c8b93/ccf12/jamstack-with-gatsby-and-netlify-17.webp 920w,
/static/2a97074c4a36428360e0546d0a6c8b93/2d764/jamstack-with-gatsby-and-netlify-17.webp 1380w,
/static/2a97074c4a36428360e0546d0a6c8b93/126d9/jamstack-with-gatsby-and-netlify-17.webp 1840w,
/static/2a97074c4a36428360e0546d0a6c8b93/afa95/jamstack-with-gatsby-and-netlify-17.webp 1901w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/2a97074c4a36428360e0546d0a6c8b93/f340c/jamstack-with-gatsby-and-netlify-17.jpg 230w,
/static/2a97074c4a36428360e0546d0a6c8b93/17ded/jamstack-with-gatsby-and-netlify-17.jpg 460w,
/static/2a97074c4a36428360e0546d0a6c8b93/913e9/jamstack-with-gatsby-and-netlify-17.jpg 920w,
/static/2a97074c4a36428360e0546d0a6c8b93/84a87/jamstack-with-gatsby-and-netlify-17.jpg 1380w,
/static/2a97074c4a36428360e0546d0a6c8b93/e97dd/jamstack-with-gatsby-and-netlify-17.jpg 1840w,
/static/2a97074c4a36428360e0546d0a6c8b93/a2c09/jamstack-with-gatsby-and-netlify-17.jpg 1901w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/2a97074c4a36428360e0546d0a6c8b93/913e9/jamstack-with-gatsby-and-netlify-17.jpg" alt="image of 2018.stateofjs.com" title="">
      </picture>](https://blog.georgi-yanev.com/static/2a97074c4a36428360e0546d0a6c8b93/a2c09/jamstack-with-gatsby-and-netlify-17.jpg)

> _2018.stateofjs.com_

**E-commerce**

[<picture>
        <source srcset="/static/5ee8d5e0a4ae3c58cd124807409d37f8/1b73d/jamstack-with-gatsby-and-netlify-18.webp 230w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/e8edb/jamstack-with-gatsby-and-netlify-18.webp 460w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/ccf12/jamstack-with-gatsby-and-netlify-18.webp 920w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/2d764/jamstack-with-gatsby-and-netlify-18.webp 1380w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/126d9/jamstack-with-gatsby-and-netlify-18.webp 1840w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/96736/jamstack-with-gatsby-and-netlify-18.webp 1902w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/5ee8d5e0a4ae3c58cd124807409d37f8/f340c/jamstack-with-gatsby-and-netlify-18.jpg 230w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/17ded/jamstack-with-gatsby-and-netlify-18.jpg 460w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/913e9/jamstack-with-gatsby-and-netlify-18.jpg 920w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/84a87/jamstack-with-gatsby-and-netlify-18.jpg 1380w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/e97dd/jamstack-with-gatsby-and-netlify-18.jpg 1840w,
/static/5ee8d5e0a4ae3c58cd124807409d37f8/65025/jamstack-with-gatsby-and-netlify-18.jpg 1902w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/5ee8d5e0a4ae3c58cd124807409d37f8/913e9/jamstack-with-gatsby-and-netlify-18.jpg" alt="image of store.gatsbyjs.org" title="">
      </picture>](https://blog.georgi-yanev.com/static/5ee8d5e0a4ae3c58cd124807409d37f8/65025/jamstack-with-gatsby-and-netlify-18.jpg)

> _store.gatsbyjs.org_

**Blog**

[<picture>
        <source srcset="/static/3d05de4abac1e0801713309aadafd7f6/1b73d/jamstack-with-gatsby-and-netlify-19.webp 230w,
/static/3d05de4abac1e0801713309aadafd7f6/e8edb/jamstack-with-gatsby-and-netlify-19.webp 460w,
/static/3d05de4abac1e0801713309aadafd7f6/ccf12/jamstack-with-gatsby-and-netlify-19.webp 920w,
/static/3d05de4abac1e0801713309aadafd7f6/2d764/jamstack-with-gatsby-and-netlify-19.webp 1380w,
/static/3d05de4abac1e0801713309aadafd7f6/126d9/jamstack-with-gatsby-and-netlify-19.webp 1840w,
/static/3d05de4abac1e0801713309aadafd7f6/62f2e/jamstack-with-gatsby-and-netlify-19.webp 1900w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/3d05de4abac1e0801713309aadafd7f6/f340c/jamstack-with-gatsby-and-netlify-19.jpg 230w,
/static/3d05de4abac1e0801713309aadafd7f6/17ded/jamstack-with-gatsby-and-netlify-19.jpg 460w,
/static/3d05de4abac1e0801713309aadafd7f6/913e9/jamstack-with-gatsby-and-netlify-19.jpg 920w,
/static/3d05de4abac1e0801713309aadafd7f6/84a87/jamstack-with-gatsby-and-netlify-19.jpg 1380w,
/static/3d05de4abac1e0801713309aadafd7f6/e97dd/jamstack-with-gatsby-and-netlify-19.jpg 1840w,
/static/3d05de4abac1e0801713309aadafd7f6/e3a52/jamstack-with-gatsby-and-netlify-19.jpg 1900w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/3d05de4abac1e0801713309aadafd7f6/913e9/jamstack-with-gatsby-and-netlify-19.jpg" alt="image of airbnb.io" title="">
      </picture>](https://blog.georgi-yanev.com/static/3d05de4abac1e0801713309aadafd7f6/e3a52/jamstack-with-gatsby-and-netlify-19.jpg)

> _airbnb.io_

**Documentation sites**

[<picture>
        <source srcset="/static/e0475e7c8bea43f1138de25e388d44ae/f3b16/jamstack-with-gatsby-and-netlify-20.webp 230w,
/static/e0475e7c8bea43f1138de25e388d44ae/a2dcf/jamstack-with-gatsby-and-netlify-20.webp 460w,
/static/e0475e7c8bea43f1138de25e388d44ae/dffcd/jamstack-with-gatsby-and-netlify-20.webp 920w,
/static/e0475e7c8bea43f1138de25e388d44ae/ea7e5/jamstack-with-gatsby-and-netlify-20.webp 1380w,
/static/e0475e7c8bea43f1138de25e388d44ae/fb278/jamstack-with-gatsby-and-netlify-20.webp 1840w,
/static/e0475e7c8bea43f1138de25e388d44ae/4e738/jamstack-with-gatsby-and-netlify-20.webp 1897w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/e0475e7c8bea43f1138de25e388d44ae/45504/jamstack-with-gatsby-and-netlify-20.png 230w,
/static/e0475e7c8bea43f1138de25e388d44ae/5b68b/jamstack-with-gatsby-and-netlify-20.png 460w,
/static/e0475e7c8bea43f1138de25e388d44ae/1bee4/jamstack-with-gatsby-and-netlify-20.png 920w,
/static/e0475e7c8bea43f1138de25e388d44ae/33a43/jamstack-with-gatsby-and-netlify-20.png 1380w,
/static/e0475e7c8bea43f1138de25e388d44ae/e5ca8/jamstack-with-gatsby-and-netlify-20.png 1840w,
/static/e0475e7c8bea43f1138de25e388d44ae/0fbfa/jamstack-with-gatsby-and-netlify-20.png 1897w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/e0475e7c8bea43f1138de25e388d44ae/1bee4/jamstack-with-gatsby-and-netlify-20.png" alt="image of reactjs.org" title="">
      </picture>](https://blog.georgi-yanev.com/static/e0475e7c8bea43f1138de25e388d44ae/0fbfa/jamstack-with-gatsby-and-netlify-20.png)

> _reactjs.org_

### My projects

Some of the things I’ve built with Gatsby are:

**georgiyanev.dev**

[<picture>
        <source srcset="/static/e6a9708eb1dd639351e52783c210e7eb/1b73d/jamstack-with-gatsby-and-netlify-21.webp 230w,
/static/e6a9708eb1dd639351e52783c210e7eb/e8edb/jamstack-with-gatsby-and-netlify-21.webp 460w,
/static/e6a9708eb1dd639351e52783c210e7eb/ccf12/jamstack-with-gatsby-and-netlify-21.webp 920w,
/static/e6a9708eb1dd639351e52783c210e7eb/2d764/jamstack-with-gatsby-and-netlify-21.webp 1380w,
/static/e6a9708eb1dd639351e52783c210e7eb/126d9/jamstack-with-gatsby-and-netlify-21.webp 1840w,
/static/e6a9708eb1dd639351e52783c210e7eb/51bda/jamstack-with-gatsby-and-netlify-21.webp 1897w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/e6a9708eb1dd639351e52783c210e7eb/f340c/jamstack-with-gatsby-and-netlify-21.jpg 230w,
/static/e6a9708eb1dd639351e52783c210e7eb/17ded/jamstack-with-gatsby-and-netlify-21.jpg 460w,
/static/e6a9708eb1dd639351e52783c210e7eb/913e9/jamstack-with-gatsby-and-netlify-21.jpg 920w,
/static/e6a9708eb1dd639351e52783c210e7eb/84a87/jamstack-with-gatsby-and-netlify-21.jpg 1380w,
/static/e6a9708eb1dd639351e52783c210e7eb/e97dd/jamstack-with-gatsby-and-netlify-21.jpg 1840w,
/static/e6a9708eb1dd639351e52783c210e7eb/6cf22/jamstack-with-gatsby-and-netlify-21.jpg 1897w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/e6a9708eb1dd639351e52783c210e7eb/913e9/jamstack-with-gatsby-and-netlify-21.jpg" alt="screenshot of this blog" title="">
      </picture>](https://blog.georgi-yanev.com/static/e6a9708eb1dd639351e52783c210e7eb/6cf22/jamstack-with-gatsby-and-netlify-21.jpg)

_Gatsby, Netlify, Markdown, Styled Components, Sitemap, RSS feed_

**fpvtips.com**

[<picture>
        <source srcset="/static/96ff2075f09ed1119dc211f2cc9c4b6b/1b73d/jamstack-with-gatsby-and-netlify-22.webp 230w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/e8edb/jamstack-with-gatsby-and-netlify-22.webp 460w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/ccf12/jamstack-with-gatsby-and-netlify-22.webp 920w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/2d764/jamstack-with-gatsby-and-netlify-22.webp 1380w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/126d9/jamstack-with-gatsby-and-netlify-22.webp 1840w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/fffad/jamstack-with-gatsby-and-netlify-22.webp 1899w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/96ff2075f09ed1119dc211f2cc9c4b6b/f340c/jamstack-with-gatsby-and-netlify-22.jpg 230w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/17ded/jamstack-with-gatsby-and-netlify-22.jpg 460w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/913e9/jamstack-with-gatsby-and-netlify-22.jpg 920w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/84a87/jamstack-with-gatsby-and-netlify-22.jpg 1380w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/e97dd/jamstack-with-gatsby-and-netlify-22.jpg 1840w,
/static/96ff2075f09ed1119dc211f2cc9c4b6b/350c2/jamstack-with-gatsby-and-netlify-22.jpg 1899w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/96ff2075f09ed1119dc211f2cc9c4b6b/913e9/jamstack-with-gatsby-and-netlify-22.jpg" alt="screenshot of fpvtips.com" title="">
      </picture>](https://blog.georgi-yanev.com/static/96ff2075f09ed1119dc211f2cc9c4b6b/350c2/jamstack-with-gatsby-and-netlify-22.jpg)

_Gatsby, Contentful, Netlify, Google Maps, Open Weather Map, Material UI, Markdown, JSON_

**baehrbg.com**

[<picture>
        <source srcset="/static/1e2a8abc64764ebecf597c7631e26b50/1b73d/jamstack-with-gatsby-and-netlify-23.webp 230w,
/static/1e2a8abc64764ebecf597c7631e26b50/e8edb/jamstack-with-gatsby-and-netlify-23.webp 460w,
/static/1e2a8abc64764ebecf597c7631e26b50/ccf12/jamstack-with-gatsby-and-netlify-23.webp 920w,
/static/1e2a8abc64764ebecf597c7631e26b50/2d764/jamstack-with-gatsby-and-netlify-23.webp 1380w,
/static/1e2a8abc64764ebecf597c7631e26b50/126d9/jamstack-with-gatsby-and-netlify-23.webp 1840w,
/static/1e2a8abc64764ebecf597c7631e26b50/51bda/jamstack-with-gatsby-and-netlify-23.webp 1897w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/1e2a8abc64764ebecf597c7631e26b50/f340c/jamstack-with-gatsby-and-netlify-23.jpg 230w,
/static/1e2a8abc64764ebecf597c7631e26b50/17ded/jamstack-with-gatsby-and-netlify-23.jpg 460w,
/static/1e2a8abc64764ebecf597c7631e26b50/913e9/jamstack-with-gatsby-and-netlify-23.jpg 920w,
/static/1e2a8abc64764ebecf597c7631e26b50/84a87/jamstack-with-gatsby-and-netlify-23.jpg 1380w,
/static/1e2a8abc64764ebecf597c7631e26b50/e97dd/jamstack-with-gatsby-and-netlify-23.jpg 1840w,
/static/1e2a8abc64764ebecf597c7631e26b50/6cf22/jamstack-with-gatsby-and-netlify-23.jpg 1897w" sizes="(max-width: 920px) 100vw, 920px" type="image/jpeg"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/1e2a8abc64764ebecf597c7631e26b50/913e9/jamstack-with-gatsby-and-netlify-23.jpg" alt="screenshot of baehrbg.com" title="">
      </picture>](https://blog.georgi-yanev.com/static/1e2a8abc64764ebecf597c7631e26b50/6cf22/jamstack-with-gatsby-and-netlify-23.jpg)

_Gatsby, Contentful, Netlify, React Reveal, React Icons_

I had a lot of fun building these projects. And the fact that they are deployed from Netlify has saved me a TON of time.

> **In fact, I think there is a direct correlation between the time that has passed since I started using Netlify and the number of projects I have deployed and maintain.**

The former is also very important, as there have been so many times I needed to fix a typo, squash a bug, and all I had to do was commit my fix to the repository. Netlify took care of the rest, deploying my site automatically!

All my projects are open source and available on GitHub at [https://github.com/jumpalottahigh](https://github.com/jumpalottahigh)

[<picture>
        <source srcset="/static/bb0277c53e0c395327fb86b8a9f9b5f9/f3b16/jamstack-with-gatsby-and-netlify-24.webp 230w,
/static/bb0277c53e0c395327fb86b8a9f9b5f9/a2dcf/jamstack-with-gatsby-and-netlify-24.webp 460w,
/static/bb0277c53e0c395327fb86b8a9f9b5f9/dffcd/jamstack-with-gatsby-and-netlify-24.webp 920w,
/static/bb0277c53e0c395327fb86b8a9f9b5f9/7b493/jamstack-with-gatsby-and-netlify-24.webp 1060w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/bb0277c53e0c395327fb86b8a9f9b5f9/45504/jamstack-with-gatsby-and-netlify-24.png 230w,
/static/bb0277c53e0c395327fb86b8a9f9b5f9/5b68b/jamstack-with-gatsby-and-netlify-24.png 460w,
/static/bb0277c53e0c395327fb86b8a9f9b5f9/1bee4/jamstack-with-gatsby-and-netlify-24.png 920w,
/static/bb0277c53e0c395327fb86b8a9f9b5f9/92f32/jamstack-with-gatsby-and-netlify-24.png 1060w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/bb0277c53e0c395327fb86b8a9f9b5f9/1bee4/jamstack-with-gatsby-and-netlify-24.png" alt="image of Georgi's GitHub profile" title="">
      </picture>](https://blog.georgi-yanev.com/static/bb0277c53e0c395327fb86b8a9f9b5f9/92f32/jamstack-with-gatsby-and-netlify-24.png)

### 👩‍🎓 If you want to learn more…

Depending on what works for you, you might prefer to learn by doing, from videos or by reading. Whatever the case, I do recommend doing the official [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/) and peeking in the [documentation](https://www.gatsbyjs.org/docs/) whenever you need to. Additionally, there are many projects out there, including many Gatsby starters, that you can learn from by example.

### Contribute and get swag

Gatsby is open source and as such is happy to [accept your contributions](https://www.gatsbyjs.org/contributing/). This is also a great way to learn and why not grab some sweet, sweet swag while at it.

[<picture>
        <source srcset="/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/f3b16/jamstack-with-gatsby-and-netlify-25.webp 230w,
/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/a2dcf/jamstack-with-gatsby-and-netlify-25.webp 460w,
/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/dffcd/jamstack-with-gatsby-and-netlify-25.webp 920w" sizes="(max-width: 920px) 100vw, 920px" type="image/webp"></source>
        <source srcset="/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/45504/jamstack-with-gatsby-and-netlify-25.png 230w,
/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/5b68b/jamstack-with-gatsby-and-netlify-25.png 460w,
/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/1bee4/jamstack-with-gatsby-and-netlify-25.png 920w" sizes="(max-width: 920px) 100vw, 920px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://blog.georgi-yanev.com/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/1bee4/jamstack-with-gatsby-and-netlify-25.png" alt="image of contributing to Gatsby and get swag" title="">
      </picture>](https://blog.georgi-yanev.com/static/7c6894a382f46f5db1b6a2f4e3d5b9bb/1bee4/jamstack-with-gatsby-and-netlify-25.png)

## 🔚 Conclusion

I hope I managed to get you excited to build something with Gatsby and Netlify. That’s what it boils down to in the end. I had a lot of fun, and I felt very productive using these technologies. They literally helped me SHIP. That’s why I wanted to share my experience and hopefully excite you to build something today too.

Additionally, I hope I managed to drive home the **performance matters** point. It’s up to all of us to build the web for tomorrow today. How we do that matters and shipping fast, high-quality experiences should not be underestimated.

**Go have fun building things with Gatsby and Netlify!**