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
Install Node and Node Package Manager (NPM) if you haven't already.
Grab a text editor – I use Atom, but Sublime is another good choice. Both are free.
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:
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.
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.
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:
Publish a new post on Contentful
Commit changes to master in your git repo
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.
