Hey Mike

Build a Static Blog with Next.js and Contentful — Part One: Contentful

Published:

Static site generators are all the rage right now, and with good reason. They produce sites that are fast, optimized, and deployable on the simplest of hosting environments since they compile down to static files with very little required in the way of server configuration. Frameworks like Gatsby, Hugo, and Jekyll have been around for a while and have helped to push static site generators into the mainstream over recent years.

Next.JS

My framework of choice for almost all of my React development these days is Next.JS. Previously you would have to decide between server-side rendered JavaScript with Next.JS or a static website built with a framework like Gatsby. With the recent release of Next 9.3, Next can handle both, even within the same project. There are some very attractive new data fetching methods that enable next-gen static site generation capabilities on par with frameworks like Gatsby that are otherwise the Gold Standard in this field. In fact, this very blog is built using the techniques I'm going to describe in this series of articles.

Content Management for Static Sites

There are many ways to manage the content of static sites, from Markdown files to private REST APIs, and Headless Content Management Systems. In this exercise we're going to explore a headless CMS called Contentful. They have a decent free tier that will suit most small websites.

Getting Started with Contentful

Let's start by setting up a space in Contentful and modeling our content. Head over to Contentful and create an account. Once you're logged in to your new account, Contentful is going to try to create a sample Space for you. We're not going to use that one, so pick whatever options you want, skip the tutorial, and get to the point where you can create a second, empty Space.

Enter new space details

The Blog Post Model

With your new empty Space created, head over to the Content Model tab. Create a new Content Type and call it "Blog Post". The form will auto-fill the API Identifier field with "blogPost". I recommend not changing it, but if you do, you'll need to substitute your chosen value in the code later.

Follow the menus and promps in order to create the following fields on your Blog Post model:

  • Title - Text. Short text, exact search. Enable the setting "This field represents the Entry title". Enable the "Required field" validation.
  • Slug - Text. Short text, exact search. Enable the "Required field" and "Unique Field" validations. Set the "Appearance" option to "Slug".
  • Description - Text. Long text, full-text search.
  • Body - Text. Long text, full-text search. Set the "Appearance" option to "Markdown".
  • Author - Reference. One reference. Enable the "Required field" validation.
  • Published Date - Date & time. Enable the "Required field" validation.

Here's how it should look in the editor when you're done.

Blog Post Fields

The Author Model

After you've created the Blog Post model, create another model for the Author. This is of course what the Blog Post is going to reference in the Author field.

Create a model called "Author" with the following fields:

  • Name - Text. Short text, exact search. Enable the "Required Field" validation. Enable the setting "This field represents the Entry Title."
  • Bio - Text. Long text, full-text search.
  • Avatar - Media. One file.

It'll look like this in the editor when you're done.

Screen Shot 2020-04-26 at 3.15.15 PM

You've likely noticed that there a lot of other validations and options available throughout the various fields you've created up to this point. Many of them would help you tighten up the data and media items that get entered into the CMS, but for the sake of this example, the minimal configuration will do.

Adding Content

With the content models defined, the next step is to create some actual content to work with. Go to the "Content" tab in Contentful and add a new Blog Post entry. Unless you're feeling inspired and want to write some actual content, just fill it up with your favourite lorem ipsum content for now. I'm using Hipster Ipsum. Try to add some variations in text formatting. Use different headings, bold text, italic text, block quotes, ordered and unordered lists, and pepper in some images too. This post will serve as a Style Guide when we start writing the CSS to style the blog post content.

When it's time to populate the Author field, select "Create new entry and link". Fill out the details of your Author entry and don't forget to upload a photo for the avatar.

When all fields for the blog post have been sufficiently populated, publish the post.

Wrapping Up

That's it for the first part of this article series. Stay tuned for part two, where I will go over setting up a Next.JS project, coding the data fetching functions, and deploying the blog app to Vercel.

Part two is available now!

Mike Robinson
Mike RobinsonI build apps and stuff for the web.