A beginner's guide to creating a static site using React, Gatsby, Contentful and Netlify

For the past decade, my go to choice of CMS for client and personal projects has been Wordpress. In fact, apart from one embarassing and short-lived design forum called Lethal GFX which used PHPBB, almost everything I've built has used it.

Recently, I've been teaching myself React and wanted to rebuild my personal Wordpress site using my newfound React skills.

There are a lot of React frameworks for creating static sites and blogs. After a bit of research I landed on Gatsby, which is what the React core team use to manage their own blog. I can hardly think of a better qualifier.

Below is a beginner's guide to how I spun up my personal site.

Before you get started

1. Install Node and Node Package Manager (NPM) if you haven't already.

2. Grab a text editor – I use Atom, but Sublime is another good choice. Both are free.

3. A git service to version control your code. It'll also trigger your site to automatically deploy anytime you make code changes. I use Github, but you can also use GitLab and BitBucket.

Install Gatsby-Starter-GCN

We'll be using Ryan Wiemer's excellent gatsby-starter-gcn project to get the ball rolling quickly.

Out of the box, the gatsby-starter-gcn project has a lot of useful features for a blog project:

• Contact forms

• Responsive design

• Built-in SEO tools

• RSS feed

• Google Analytics

• Sitemaps

• OpenGraph sharing and social card snippets

• Integration with Contentful CMS

It also has a lot of handy resources for React developers:

• Gatsby static site

• GraphQL for querying the Contentful database

• Styled components

• JSON-LD Schema

• Progressive Web App

• Offline support and dev

• Netlify deployment and hosting

First thing's first, let's clone Ryan's repository into a new folder called newblog. We'll be doing this through the terminal, one line at a time:

Copy

Create Contentful account

Contentful is what we'll use to write and publish our blog posts. It's a headless CMS, which lets us create content and send it to where we need using an API. Contentful has a Content Delivery Network (CDN), which will make loading pages and images quicker for your readers.

Step 1: Sign up for a Contentful account.

Step 2: Contentful will automatically create a space in your new account with demo content. Ignore this for now, and create a new empty space.

Step 3: Go to Space settings -> API keys -> Add API Key and grab the following details. You'll need this info so your static website can post and pages from Contentful's API.

Step 4: Go to Space settings -> API keys -> Content management tokens -> Generate personal token. Grab the details from here and put it somewhere safe like a password manager, because you won't be able to see the same personal token again.

Local dev

Step 5: Now let's set up the development environment. Head to your terminal and put in npm run setup. Fill in the details with the Contentful keys you grabbed from Step 3 and Step 4.

Once it finishes setting up you'll see a bunch of demo posts, pages and tags inside your Contentful space. Make sure to keep at least one of each type, otherwise the site will fail to build. Instead of deleting these posts, I just repurposed them with content I already have.

Step 6: Go back to your terminal and type in gatsby develop. You'll be able to see what your site looks like by going to localhost:8000 in your browser.

Note: When you update your blog in Contentful it won't automatically appear in your development environment. You'll need to run gatsby develop to update your local version each time. Don't worry though, the live version of the site will update automatically.

Customizing

Step 7: Update the details in /src/utils/siteConfig.js with your own info.

Copy

Adding Embedly

Unfortunately, the gatsby-starter-gcn doesn't support embedded social content out of the box. You can use Embedly to share social content such as Twitter cards and YouTube videos.

Step 8: Open /src/layouts/index.js in your text editor and paste <script src="https://cdn.embedly.com/widgets/platform.js" type="text/javascript"/> somewhere inside of the <Helmet> tag.

Deploying to Netlify

Step 9: Once you've replaced the Doggy Ipsum content, and you're ready to publish your website, go to Netlify and create an account.

Note: Make sure you've pushed all your changes to your git repo, because Netlify will use that to build your site.

Step 10: Go to Settings -> Build & deploy -> Build environment variables. Put in the following values, using the Contentful keys from Step 3 and Step 4. You can also add your Google Analytics tracking ID.

Copy

Step 11: Let's get the contact form working. In Netlify, go to Settings -> Forms -> Form notifications. Pick how you want to be notified when someone uses the contact form, I've just picked emails for now but you can also set up webhooks for tools like Zapier.

Right now, anytime you commit a new change to master, Netlify will build and publish your site. We're going to set things up so that anytime you publish a new post or page on Contentful, it'll also trigger a build and deploy.

Step 12: In Netlify, head to Settings -> Build & deploy -> Build hooks. Create a webhook and copy the webhook URL Netlify provides.

Step 13: Head back to Contentful, and go to Space settings -> Webhooks -> Add webhook. Give the webhook a name, and paste the URL next to Post. You'll want pick "Select specific triggering events" and put in the settings below:

Step 14: Let's deploy! You've got 3 options:

1. Publish a new post on Contentful

2. Commit changes to master in your git repo

3. Trigger a manual deploy in Netlify

There you have it! Your brand new website.

Let me know if you found this tutorial useful, I'll write some more about how I customized my site using React.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.