Gatsby starter for Webiny Headless CMS

Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.

🚀 Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud:

Getting started with Webiny

1. Create a Webiny instance.

   Follow the Webiny docs to install a Webiny project on your cloud hosting provider. Because Webiny is a distributed system we don't run it locally. This also means you don't need to worry about setting up Docker, or installing databases and drivers on your local machine for Postgres, MongoDB or similar. The cloud takes care of that for you.

   If you get stuck or have any questions, please join the community and reach out for some help.

2. Add content models.

   Once you have an app up and running click into the "HeadlessCMS" app in the sidebar, click on models and add the following models and fields:

   Authors

• text field with the value "name"

• text field with the value "slug" (optionally add a validator using this regex which will make sure you have valid urls: ^(?!.*--)[a-z0-9\-]+$)

• files field with the value "picture"

• text field with the value "description"

• text field with the value "twitterHandle"

  Posts

• text field with the value "title"

• text field with the value "slug" (optionally use the regex above as a validator)

• files field with the value "featured image"

• rich text field with the value "body"

• reference field with the value "Author"

• text field with the value "description"

  Next, choose API Keys in the sidebar. Add an API key with any name and description. Select "Headless CMS" and choose a Custom access level for all content model groups with the values read and preview. Save the API token and the token itself will be revealed.

  Copy this token and keep it somewhere private

1. Connect Gatsby to your Webiny install!

   Add a new file called .env and add the following:

   WEBINY_API_TOKEN=<token goes here>
   WEBINY_API_URL=<your Headless CMS API (to find out run `yarn webiny info from the root of your local Webiny project`)>

   When you run Gatsby you should now be sourcing data from your Webiny API. Visit http://localhost:8000/___graphql and click on the "webiny" data source to see your content.

Getting started with Gatsby

1. Create a Gatsby site.

   Use the Gatsby CLI (install instructions) to create a new site, specifying the blog starter.

   # create a new Gatsby site using the blog starter
   gatsby new gatsby-frontend-webiny https://github.com/webiny/gatsby-starter-webiny

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd gatsby-frontend-webiny/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby Tutorial.

   Open the atsby-frontend-webiny directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

💫 Deploy

Build, Deploy, and Host On The Only Cloud Built For Gatsby

Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.

Deploy now with one click: