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

Published: August 10, 2018

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 the site you're reading this blog post on.

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:

git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git newblog

cd newblog

npm install

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. Contently 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 2: Create an empty Contentful 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 3: Get API keys

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.

module.exports = {
  siteTitle: 'xyz',
  siteTitleAlt:
    'xyz', // This allows an alternative site title for SEO schema.
  publisher: 'xyz', // Organization name used for SEO schema
  siteDescription:
    'xyz',
  siteUrl: 'https://xyz.com', // Site domain. Do not include a trailing slash! 
  author: 'xyz', // Author for RSS author segment and SEO schema
  authorUrl: 'https://xyz.com/about', // URL used for author and publisher schema, can be a social profile or other personal site
  userTwitter: '@xyz', // Change for Twitter Cards
  shortTitle: 'xyz', // Used for App manifest e.g. Mobile Home Screen
  shareImage: '/logos/share.jpg', // Open Graph Default Share Image. 1200x1200 is recommended
  shareImageWidth: 900, // Change to the width of your default share image
  shareImageHeight: 600, // Change to the height of your default share image
  siteLogo: '/logos/logo-512.png', // Logo used for SEO, RSS, and App manifest
  backgroundColor: '#e9e9e9', // Used for Offline Manifest
  themeColor: '#121212', // Used for Offline Manifest
  copyright: 'xyz', // Copyright string for the RSS feed
}

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.

ACCESS_TOKEN

SPACE_ID

GOOGLE_ANALYTICS

Build deploy Settings

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.

Contact form notifications

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.

Build webhooks

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:

Contentful settings

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.