Gatsby

What Is Gatsby?

Gatsby creates fast websites by combining React with GraphQL to pull data from various sources like Strapi. It pre-renders pages during build time, delivering static HTML files that load quickly while maintaining security through Jamstack principles.

Gatsby's plugin ecosystem extends functionality while preserving performance. It automatically handles technical optimizations like code splitting, image optimization, and resource prefetching to improve Core Web Vitals.

Want to dive deeper? Check out the official Gatsby documentation.

Why Integrate Gatsby With Strapi?

The Strapi-Gatsby combination delivers exceptional value for developers seeking performance and flexibility. Integrating Gatsby with Strapi continues to gain popularity for good reason.

• Optimized performance: Strapi powers Gatsby’s static site generation with dynamic content, delivering lightning-fast load times.
• Flexible content modeling: Build exactly the data structures your site needs using Strapi’s customizable content types.
• Seamless GraphQL integration: Strapi’s GraphQL API fits naturally into Gatsby’s data layer for clean, efficient querying.
• Secure by design: With no runtime backend connection, your site surface area for attacks is drastically reduced.
• Real-time content updates: Use Strapi webhooks to trigger Gatsby rebuilds automatically when content changes.
• Scalable architecture: Serve static files globally through CDNs to handle massive spikes in traffic with zero backend strain.
• Cost-effective hosting: Static sites are cheaper to host, especially for media-rich, high-traffic projects.
• Powerful plugin ecosystem: Extend Strapi’s functionality with plugins, including tools tailored for Gatsby workflows.
• Modern authoring experience: Strapi’s admin panel is intuitive for editors while giving developers full control.
• Future-ready with Strapi Cloud & Strapi v5: Skip DevOps setup and leverage the latest performance, security, and Gatsby-friendly upgrades.

This isn't just theoretical.

ESC Nasa built a lightning-fast platform for showcasing projects with this combo.

How to Integrate Gatsby With Strapi

Combining Strapi with Gatsby gives you speed and flexibility without the headaches. Here's how to integrate these powerful tools.

Prerequisites and Setup

Before diving in, you'll need:

• Node.js (LTS version recommended)
• npm or yarn
• Git

Setting Up a Strapi Project

1. Create a new Strapi project:

npx create-strapi-app my-strapi-project

2. Navigate to your project directory and start the Strapi server:

cd my-strapi-project
npm run develop

3. Access the Strapi admin panel at http://localhost:1337/admin and create your content types and sample content.

Setting Up a Gatsby Project

1. Create a new Gatsby project:

npx gatsby new my-gatsby-site

2. Navigate to your Gatsby project directory:

cd my-gatsby-site

3. Install necessary plugins:

npm install gatsby-source-strapi gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-remark gatsby-transformer-sharp

Connecting Gatsby to Strapi

1. Create a .env.development file in your Gatsby project root:

STRAPI_TOKEN=<YOUR_STRAPI_API_TOKEN>
GATSBY_STRAPI_API_URL=http://localhost:1337

2. Replace <YOUR_STRAPI_API_TOKEN> with the API token generated in Strapi.
3. Configure the gatsby-source-strapi plugin in your gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: process.env.GATSBY_STRAPI_API_URL,
        accessToken: process.env.STRAPI_TOKEN,
        collectionTypes: ['article', 'category'],
        singleTypes: ['homepage'],
      },
    },
    // Other plugins...
  ],
}

Querying and Displaying Content

1. Start your Gatsby development server:

gatsby develop

2. Access the GraphiQL explorer at http://localhost:8000/___graphql to test your queries. For example:

{
  allStrapiArticle {
    nodes {
      title
      content
      category {
        name
      }
    }
  }
}

3. Create a new page in your Gatsby project to display the content. For example, src/pages/articles.js:

import React from "react"
import { graphql } from "gatsby"

const ArticlesPage = ({ data }) => (
  <div>
    <h1>Articles</h1>
    {data.allStrapiArticle.nodes.map(article => (
      <div key={article.id}>
        <h2>{article.title}</h2>
        <p>{article.content}</p>
      </div>
    ))}
  </div>
)

export const query = graphql`
  query ArticlesQuery {
    allStrapiArticle {
      nodes {
        id
        title
        content
      }
    }
  }
`

export default ArticlesPage

Handling Media and Images

To optimize images from Strapi, use gatsby-plugin-image with gatsby-plugin-sharp. Here's how to display an image from Strapi:

import React from "react"
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

const ArticlePage = ({ data }) => {
  const article = data.strapiArticle
  const image = getImage(article.cover.localFile)

  return (
    <div>
      <h1>{article.title}</h1>
      <GatsbyImage image={image} alt={article.title} />
      <p>{article.content}</p>
    </div>
  )
}

export const query = graphql`
  query ArticleQuery($id: String!) {
    strapiArticle(id: { eq: $id }) {
      title
      content
      cover {
        localFile {
          childImageSharp {
            gatsbyImageData(width: 800)
          }
        }
      }
    }
  }
`

export default ArticlePage

Build and Deploy

When ready to deploy your Gatsby site:

1. Build your Gatsby project:

gatsby build

2. Deploy the contents of the public directory to your hosting platform (Netlify, Vercel, GitHub Pages, etc.).

Remember to set up environment variables on your hosting platform to match those in your .env.development file.

This setup gives you the best of both worlds—flexible content management through Strapi with Gatsby's static site generation for blazing speed and SEO benefits.

Want your site to update automatically when content changes? Set up webhooks to trigger Gatsby builds when Strapi content updates. Find details on setting up webhooks in the Strapi documentation.

Project Example: Build a Portfolio Website with Gatsby and Strapi

Let's look at something real—a portfolio website built with Gatsby and Strapi by coding educator John Smilga. It's the perfect jumping-off point if you're building your own developer or freelancer portfolio.

Project Overview

This portfolio project shows how integrating Gatsby with Strapi creates a dynamic, high-performance website that's also dead simple to manage. It's like having your cake and eating it too.

What makes it special:

• Responsive Design: Makes your work shine on any device.
• Easy Content Management: Update content without needing a CS degree.
• Lightning-Fast Pages: Pages load before visitors finish blinking.
• Customizable Options: Personalize without pulling your hair out.

Technical Implementation

Under the hood, this project runs on Gatsby v3 and Strapi with some clever implementation choices:

1. Content Modeling in Strapi: Custom content types for portfolio items, skills, and blog posts let you update content without bugging a developer.
2. Gatsby Data Fetching: The GraphQL data layer pulls exactly what's needed—no bloat, no waste.
3. Dynamic Page Generation: Each portfolio item and blog post gets its own page, created automatically from your Strapi content.
4. Image Optimization: Images load fast and look great on every device—from phones to giant monitors.

Benefits and Outcomes

What makes this combo so powerful?

• Ease of Use: Non-tech team members can update content without breaking things.
• Performance: Visitors don't bounce because they're waiting for slow pages.
• SEO Optimization: Search engines love fast, well-structured sites like this.
• Scalability: Add hundreds of portfolio items without slowing down your site.

Developer Quote

"Integrating Gatsby with Strapi allows developers to quickly build very fast static websites and apps. Both use JavaScript and integrate smoothly. This combination empowers developers to create high-performance sites while giving content creators an easy-to-use interface for updates."

Getting Started

Want to build something similar?

1. Clone the repository (when available) or start with a basic Gatsby project.
2. Set up a Strapi instance for your content management.
3. Configure the Gatsby source plugin for Strapi.
4. Customize the design and content to fit your personal brand.

This approach lets you focus on what matters—showcasing your work, not fighting with your website.

For step-by-step guidance, check out the official Strapi documentation.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and Gatsby documentation.