If you are familiar with our blog you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks: Gatsby old, Gatsby new, React, Next.js, Nuxt, or Angular.

We thought that it would be a good idea to provide the result of these tutorials as starters for those who'd like to bootstrap a simple blog application with Strapi and their favorite frontend framework.

We already released the React Starter, and we keep moving with the Gatsby Starter

gatsby starter blog cover

Why did we make these starters?

Starters allow you to quickly visualize the result of the association between Strapi and your frontend framework.

It's easier and faster to dig into an existing application to get an idea of ​​the product than to start an application from scratch.

As we've made tutorials on how to make a blog with this or that framework, it seemed useful for the Strapi community to use the resulting application in order to create starters.

So to get started with the starter, you have two options:

  • You can start by installing the starter and then following the tutorial to reproduce it and learn on the way.

  • Or you can run the starter to directly test the application.

So, let's see how to run it!

Getting started

Clone the repository and install dependencies

git clone https://github.com/strapi/strapi-starter-gatsby-blog.git  
cd strapi-starter-gatsby-blog

# Using yarn
yarn setup:yarn

# Using npm
npm run setup:npm  

Scaffold your project

This command will launch both of your backend and frontend server and do a data migration in your backend server

# Using yarn
yarn build:yarn  
yarn develop:yarn

# Using npm
npm run build:npm  
npm run develop:npm  

Alternatively, you can still start your servers separately:

Start the backend server

cd backend

# Using yarn
yarn build  
yarn develop

# Using npm
npm run build  
npm run develop  

Start the frontend server

cd frontend

# Using yarn
yarn develop

# Using npm
npm run develop  

Gatsby server is running here => http://localhost:8000
Strapi server is running here => http://localhost:1337


  • 2 Content types: Article, Category
  • Permissions set to true for article and category
  • 2 Created articles
  • 3 Created categories
  • Responsive design using UIkit


  • "/" display every articles
  • "/article/:id" display one article
  • "/category/:id" display articles depending on the category


Gatsby Cloud

You may want to deploy this starter frontend on Gatsby Cloud in order to try the Gatsby Preview maybe!

  • Fork this starter on your own Github account
  • Create a new site by choosing the option "I already have a Gatsby site"

Create a New site

You'll be asked to select the repository you want to use

  • Select your new Strapi Starter Gatsby Blog repository you just forked and specify the Gatsby project folder which is frontend in this starter


  • You can then copy the webhook url and skip this step

Skip step

  • Paste your Strapi API_URL for both of your Builds Environment variables and Preview Environment variables (we consider that you deployed your strapi server)


Now you'll need to create a Webhook on your strapi server in order to tell Gatsby cloud to build your Gatsby project each time your create/update/delete content

  • Open your Strapi admin panel and go to Webhooks
  • Create a new Webhook with following properties:
    • Name: Gatsby Cloud
    • Url: The first Webhook Url Gatsby Cloud provide in your Gatsby Dashboard Sites. It should be something like this: https://webhook.gatsbyjs.com/hooks/data_source/ without the /publish/
    • Check every Events for Entry and Media

That's it! Now Strapi will inform Gatsby Cloud to build your Gatsby project everytime you create/update/delete content


If you liked it, it would be great to share the word 📣 And let me know what you thought of it in the comments below.

Enjoy this starter!

News in your inbox

Did you enjoy this article? Subscribe to get the latest posts and the most important updates!