Use Strapi to maintain and manage your Gatsby static site
Blazing fast combination: Strapi is powered by a modern technology stack using Node.js – it's fast. Really fast. Plus, it can deliver your content with GraphQL.
Gatsby automates code-splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast.
Being a static site generator brings a lot of advantages: Performance, security, lower cost of scaling but also an excellent developer experience.
Gatsby brings huge benefits to content creators and developers by helping to solve many of the challenges with the headless approach.
Strapi provides a perfect solution as a source for Gatsby’s static markup generation. Whether building a static site, or a more dynamic app/website Strapi has you covered with its flexibility of content types, plugins, and customization.
Chris, GatsbyJS developer.
Take advantage of the built-in webhook feature that will allow you to automatically build your Gatsby project upon the update of your data.
Instants after you made modifications in Strapi, your new content is live.
Follow the integration guide from our documentation to see how to consume Strapi's Content Type's API from Gatsby. As a Static Site Generator, Gatsby will fetch your content from Strapi at build time. Therefore, you need to configure Gatsby to communicate with your Strapi application using the following CLI command.
1
yarn add gatsby-source-strapi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
plugins: [
{
resolve: "gatsby-source-strapi",
options: {
apiURL: process.env.STRAPI_API_URL || "http://localhost:1337",
accessToken: process.env.STRAPI_TOKEN,
collectionTypes: [
{
singularName: "restaurant",
queryParams: {
publicationState:
process.env.GATSBY_IS_PREVIEW === "true" ? "preview" : "live",
populate: {
cover: "*",
blocks: {
populate: "*",
},
},
},
},
{
singularName: "category
}
],
},
},
],
}
Here is an example of the GraphQL API query ./src/pages/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
const query = graphql`
query {
allStrapiRestaurant {
edges {
node {
strapiId
name
description
}
}
}
}
`;
const IndexPage = () => (
<StaticQuery
query={query}
render={data => (
<ul>
{data.allStrapiRestaurant.edges.map(restaurant => (
<li key={restaurant.node.strapiId}>{restaurant.node.name}</li>
))}
</ul>
)}
/>
);
export default IndexPage;
You can use the Gatsby Source Strapi plugin for pulling documents into Gatsby from a Strapi API.
Developers today often choose between open-source and cloud headless CMSs. Strapi combines the best of both. It's low-cost, customizable, and portable; it also has a great API, is scalable, and easy to set up.
I had zero Gatsby knowledge - within a day of reading their docs, I seamlessly integrated it with Strapi using the gatsby-source-strapi plugin. After providing my Strapi API URL and registering content-types, I was able to make an awesome personal website within a few days of work.