If you follow the Strapi news, you probably noticed last February the Strapi Starter for a Gatsby Blog which allows you to get started with a blog template running on Gatsby and Strapi. It's not up-to-date with the latest version of Strapi anymore, this is why we are excited to announce the release of a brand new Strapi Starter Gatsby Blog including way more features than the former one.

Let me explain why.

We noticed that many of you are building blogs with Strapi. Last year, I made a series of blog starters fitting the needs of many developers by offering a total of 6 frontend frameworks including Gatsby, React, Next, Vue, Nuxt and Angular.

However, we had the feeling this could send the message that Strapi can only be used for making blog websites. And you can do much more with Strapi.

It is with a new approach that we offer you this new starters series. The idea is to showcase that any application can be built with Strapi. For this new series, you will learn to create a broad range of applications.

For our first starter release in this series, we improved the former Gatsby blog starter by adding requested features from the community. Remi will soon release another starter for a corporate website based on Next.js, with a content architecture similar to the one used for our very own strapi.io website.

We are only at the beginning and we promise to expand the frontend stack for all other types of applications. The next one will be for Vue.js developers ;)

Strapi Starter Gatsby Blog v2

Deploy the backend

To deploy the Strapi instance you'll need:

• An Heroku account for free
• A Cloudinary account for saving images for free

Once you have created these accounts you can deploy your instance by clicking on this button.

Deploy the frontend

On Vercel

To deploy the Gatsby blog you'll need:

• A Vercel account for free
• Wait for your Heroku instance to be up and running before deploying your Gatsby Blog

• Select the repository you want to deploy, here it's the strapi-starter-gatsby-blog-v2
• Select the root directory of your frontend

• Paste the url of your running Strapi instance on Heroku without the trailing slash

On 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"

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

• 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 you create/update/delete content:

• Open your Strapi admin panel and go to /admin/settings/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 event for Entry and Media

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

Features in Strapi

• 1 Single type
• 4 Components
• 3 Collection types: Article, Category, User
• 6 Created articles
• 5 Created categories
• Permissions set to true for article, category and user
• Responsive design using UIkit
• Slug system
• Publication system (draft & published)
• Role-based access control

Features in Gatsby

• gatsby-image
• Seo friendly

Getting started

Clone the repository

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

Backend

Install dependencies, insert the data and run your server

# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop

Frontend

# Using yarn
yarn install
yarn develop

# Using npm
npm install
npm run develop

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

How to use the Administrator Roles & Permissions feature

This starter allows you to use the Administrator Roles & Permissions feature. Let's see what you can do with it!

• Go to settings/permissions/roles

You can see all the Roles in your Strapi application. Only 3 Roles are available in the Community Edition. You can have an unlimited number of roles by upgrading your plan to the Enterprise Edition. You can edit the permission of these roles:

• Go to settings/permissions/users.

Here you can see all your users. For now, you only have your administrator! Let's create an editor user!

• Click on the Create New User button and fill the form.

You'll be asked to send the confirmation link to the editor, but since you are the editor just copy it in a new tab.

Great! Now you are logged in as an editor in your Strapi application. Depending on what the editor can access, the UI of the admin can change, here you can see that you only see the collections types, single types and the Media Library. Feel free to change the permissions of this role :)

• Now let's create an article!

• Save it, rebuild your frontend app if needed and check out your new article

If you liked this starter and want to develop a version of it with another frontend framework (Vue.js, Next.js or 11ty for example). Feel free to submit a Topic idea here!

Thank you for taking the time to read this blog post, I'll see you soon with a new starter ;) Enjoy this starter!