Automatically Create a Blog on Gatsby Cloud with Contentful CMS

Obinna Ekwuno: [0:01] The first step is to head over to www.gatsbyjs.com and log in with your Github account. When that is over, move over to the Create new Gatsby site button on the top right and select the option of, "I do not have a Gatsby site yet."

[0:27] Proceed by clicking the Next button on the lower right and choosing the CMS of your choice. We shall go ahead to choose the "Blog with Contentful" starter, as that is what this demo is about.

[0:43] Click the Next button on your lower right in order to proceed. Then we shall name this repository. Note that the name given to this repository shall reflect on your GitHub account, and also on your Contentful workspace. We shall name it gatsby-contentful-demo-two. Click on the Next button on the lower right to proceed.

[1:10] When that is over, we will now connect our Contentful CMS to Gatsby Cloud by hitting the Connect button. This will prompt you to Authorize with Contentful so that Gatsby Cloud can access your Contentful workspace.

[1:27] The name of your Contentful organization should show on your screen. By clicking Continue, you'll have successfully connected your workspace to Gatsby Cloud. Then we'll click on Start My Site on the lower right. You can see now that your sites has been successfully set up.

[1:51] Doing this automatically creates a Contentful workspace for you with a space ID and the name that you set up in the beginning of this tutorial. It also sets up a GitHub repository with the same name that you gave your projects at the beginning of this tutorial.

[2:10] Now, we'd head over to Contentful in order to view the workspace. When we click on the Content model of the new workspace that has been created, we can notice two existing types automatically generated.

[2:29] When you go back to your Gatsby workspace, you can see that a GitHub repository has been automatically created in your account. This repository comes with a fully detailed README.md file, that you can see relevant commands to run this site locally.

[2:48] Clicking on the Finish button on the lower right automatically triggers a build on Gatsby Cloud. You can see that the site has been built in 27 seconds. If we head over to the preview URL that Gatsby Cloud provides, we can see the finished product.

[3:18] If we click around these blog sites, we can see that the images leverage on Gatsby image feature called twist SVG and it also works on every image on this site.

[3:37] If we make a change to a blog post content type say by adding a few text, let's say, "Hey there," and we publish this change, if we head over to Gatsby Dashboard, we would see that an incremental build has been triggered.

[3:59] This build will only take two seconds compared to the 27 seconds that it took the whole site to build.

[4:09] If you click on the Site Settings and head over to the Build option, you'd see the options Enable Incremental Builds.