This blog uses Gatsby as the static site generator, Contentful as the headless CMS and is hosted on Netlify. This post outlines what is needed to set up a static site that automatically updates whenever a new post is published or unpublished in the CMS. It makes the user experience really fast, secure, cheap and reliable, thanks to the Jamstack architecture standard.

Step 1: Content

Go to Contentful, create an account, and make your first space. This is where we will be creating our blogposts and publish them to our website. First we need to create a content type named Post (Content Model on the top menu and click "New content type").

A Post contains several fields that will be shown on various parts of the website. Create the following fields:

• title - short text - shown in the frontpage and title of each blogpost

• subtitle - short text - shown in the frontpage

• author - short text - whoever wrote the post

• slug - short text - identifier for the post, used in the blogposts url

• image - media - image to be shown on the top of each blogpost

• content - rich text - the content itself of the blogposts. Provides a nice text editor in the contentful website when you're writing a new post

Now save it and go to Content on the top menu and make a few posts using the new Post type. We now have our content ready in the CMS. Let's make a website where we can consume this data.

Step 2: Website

To make our website we're gonna use Gatsby, a static site generator. I've created a starter template for a simple blog which is based on the official gatsby-starter-blog. It has everything preconfigured in order to work with Contentful. Clone the repository and open the gatsby-config.js file. Here you need to make a few changes. Under gatsby-source-contentful, replace the

spaceId: `YOUR_SPACE_ID_GOES_HERE`,

with the space id from the API keys page in the Contentful website. (Settings -> API keys -> Example Key 1 -> Space ID).

The code is now ready to be deployed. You probably want to develop the site further. Follow this guide to setup Gatsby on your machine so you can start developing. You also need to make a few more changes in the gatsby-config.js file:

At the top of the file add:

const dotenv = require("dotenv").config()

Install the dotenv package using npm:

npm install dotenv

Then create a file in the src folder named ".env" with the following content:

CONTENTFUL_ACCESS_TOKEN=<contentful-access-token-from contentful>

You can get the access token from the same location as the SPACE_ID in Contentful. Follow the instructions in the guide to start developing the site locally.

Now let's get this baby online.

Step 3: Hosting

Go to BitBucket and create a user. Create a new repository and copy the clone url (this can be found when clicking Clone on the top right inside the repository). Open a terminal inside your project folder on your machine and run

git remote set-url origin <clone-url-copied-from-bitbucket>

then run

git commit -m "initial commit"

and then

git push origin master

Your code is now online! But its not hosted yet. For this we need to go to Netlify, create an account from BitBucket, and once you're logged in click New site from Git -> BitBucket. Here you should be able to select your project. In the Basic Build Settings enter:

Build command: gatsby build

Publish directory: public

and click Deploy site

The site should be live in a few minutes, woho!! However, there are a few more things we need to configure to make the website fetch the posts properly from Contentful. Copy the ACCESS_TOKEN that you used previously in the steps above. Open your site and go to Site settings -> Build & deploy -> Enviroment -> Environment Variables. Create a new variable with the key CONTENTFUL_ACCESS_TOKEN and your access token as the value.

The last thing we need to do is create a build hook to make the site update when we create/delete posts in Contentful. Click Build & deploy again, scroll down to Build hooks and create a new build hook. Copy that URL and go back to the Contentful website. Here you go to Settings -> Webhooks and create a new webhook. Give it a name and paste the build hook URL from Netlify in the URL field. Click save.

Congratulations! If everything went well, you are now the proud owner of a fresh new blog! Go back to the site overview in Netlify and click the link at the top to see your site live!

Hope this was helpful. Feel free to DM me on twitter if you have any questions/feedback to this guide :)