Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapTry live demo
      OverviewContent Types BuilderMedia LibraryIntegrations
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideos GuidesWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      Getting StartedContent APIConfigurationInstallationDeploymentMigration
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPlugins
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Media Library
    • Integrations
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos Guides
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Getting Started
    • Content API
    • Configuration
    • Installation
    • Deployment
    • Migration

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
Back to articles

Strapi Starter Gatsby Blog v2

strapi-starter-gatsby-blog-v2
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

Maxime Castres

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.

Gif excited

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.

He's right

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

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

Deploy with Vercel

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

Root directory

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

Root directory

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"

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

Repository

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

Env

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

Role base access control permissions

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:

Role base access control edition

  • Go to settings/permissions/users.

Role base access control 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.

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.

Confirmation link

Editor sign in

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

Main page editor

  • Now let's create an article!

Article from editor

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

Articles

Articles

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!

  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

Unleash content.

Read the docs
Get Started

Strapi is the most popular open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

Product

  • Why Strapi?
  • Content Architecture
  • Features
  • Enterprise Edition
  • Partner Program
  • Roadmap
  • Support
  • Integrations
  • Try live demo

Resources

  • How to get started
  • Meet the community
  • Tutorials
  • API documentation
  • GitHub repository
  • Starters
  • Strapi vs Wordpress
  • The Guide to headless CMS

Integrations

  • Gatsby CMS
  • React CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Next.js CMS
  • Angular CMS
  • Gridsome CMS
  • Jekyll CMS
  • 11ty CMS
  • Svelte CMS
  • Sapper CMS
  • Ruby CMS
  • Python CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy