Strapi Starter Gatsby Blog v2

Gatsby starter for creating an great blog with Strapi.

This starter allows you to try Strapi with Gatsby with the example of a simple blog. It is fully customizable and due to the fact that it is open source, fully open to contributions. Do not hesitate to add new features etc ...

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
• Vercel will ask you the root directory of the project to deploy which is frontend

• 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 your 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 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

Automatic build on Vercel

We're using Gatsby which is a static site generator (SSG). This means we need to trigger new builds when the content changes in Strapi. We'll use webhooks to do this automatically.

We first need to create a Deploy Hook in Vercel. In your project's settings, go to the end of the Git Integration tab. Name your hook however you want, but make sure you link it to your master branch.

Then copy the generated URL and open your Strapi admin in production. In the settings tab, open Webhooks and paste the hook URL. Make sure you check all events to trigger build after every change.

Now everytime we make a change in Strapi, Vercel creates a new build!

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

Enjoy this starter