We're live-coding on Twitch! Join us! FREE Webinar: Should I use React or Vue?

Getting Started with Prismic - A Great Headless CMS

Prismic is a Headless CMS that provides a clean user interface. By using Prismic, we can avoid having to build out our own dashboard and CMS for our sites.

The power of using a Headless CMS is that we can have a solution out-of-the-box in a matter of minutes. We can then focus on what makes our product special, like our UI/UX, content, and more.

Prismic pricing

Prismic is generous with their pricing for people starting out their new sites. I'm running this tutorial on the free tier. They are also generous with their API usage; it's unlimited!

For alternatives to Prismic, you can look at hosted solutions like Contentful, WordPress, Ghost, Strapi, CosmicJS, Statamic, and more.

We can even self-host some of these solutions like WordPress, Ghost, Strapi, and Statamic on DigitalOcean and manage our entire infrastructure and servers.

Prismic workflow

The overall workflow for using Prismic and let's say Gatsby would be:

  • Model your data: Create content types and their fields in the dashboard
  • Create content: Add content through the dashboard
  • Generate your site: Use Prismic's API to grab your content. Use Gatsby to generate your static site
  • Deploy: Deploy your site to Netlify, DigitalOcean, and many others

Pre-built themes

Prismic has pre-built themes that we can use to quickly spin up examples. For this tutorial, we'll create things from scratch, but be aware you can use these to get a little faster startup time:

React LogoReact Logo
Upgrade Your JS
Go from vanilla JavaScript 👉 React

Let's take a deeper dive into each of above sections.

Start With Your Data Models and Content Types

Prismic is a Headless CMS. This means that they provide the backend and dashboard where you can edit and update your content. Then they provide you an API. You can use that API to generate your site with tools like Gatsby, Next.js, Nuxt.js, and more.

Create your content types and their fields in the dashboard. For instance, if we were creating a Blog, we would create a Post content type with the following fields:

  • Title
  • Content
  • Image
  • Status
  • Published At
  • Author

Let's create that now!

We'll call or custom type a Post.

From here we can start dragging and dropping the fields we want! Very cool! When I built Scotch.io on Laravel, I had to create the database migrations, schema, and do a little work for each of these fields. Here in Prismic and Headless CMS-land, we can just drag and drop them!

I've added the fields and our Post now has the correct fields.

  • id: UID
  • Title: Title (Only allow h1 in this one)
  • Image: Image (Size 1500x750)
  • Content: Rich Text

There are fields like status and published_at that Prismic automatically gives us. We don't need to worry about creating those.

There's a Slice zone where you can give your content creators more flexibility when creating their content. We'll keep that off for now since we're just getting familiar with Prismic.

Hit Save and we have our Post custom type all ready to go!

Creating Content

Now that we have our custom type ready, we can start creating content. Go to the Content section on the left sidebar.

I've created my first Post and filled in some of the fields!

Prismic's UI is straightforward and could be used by non-coders if you have any people on your team that you want to be able to edit content.

You can see the Publish button in the top right. Go ahead and click Publish and we have our first post published! Prismic gives us a few options to Publish also.

You can use the same workflow to create more custom types and content.

Creating Pages

In addition to custom post types, we can create pages like a Home, About, or Contact page. By creating pages in Prismic, we can let all members of our team update it.

Back in the Custom types section, we can create a Single Type instead of the Repeatable Type.

We get the custom type creator again. We'll add a few fields like Id, Title, Image, and Content.

For pages like this, Slice zone would come in very handy. Each page can have its own flow and content, but still keep the overall design. Here are some of the pre-built slices:

We'll skip the Slice zones again and stick to the standard fields. Create your home page content.

We can see our new Post and our Home page in our dashboard.

Viewing Content via API

Prismic comes with a convenient API browser that we can use to see what our API will return. This is a good way to get accustomed to how our data is returned so that we can use it in tools like Gatsby.

Visit your Prismic site followed by /api and you can see the API browser.

Click Search documents and you'll be able to see your info come back as HTML. We can even filter for types and order a certain way.

We can also see this data in JSON format, which is what we'll most likely use when pulling from this API.

Now we can use this data with Gatsby and create a blog!

Conclusion

We didn't have to write a single line of code to get a robust backend, a CMS, and an API. We also have a tried and tested solution to let all of our writers create content. Headless CMSs are a great addition to a modern workflow.

Let me know if you like Prismic. Would you like to see any other Headless CMS walkthroughs?

Like this article? Follow @chrisoncode on Twitter