Statamic Headless Tied to a Gatsby Blog [Tutorial & Live Demo]

It’s hard to mention any other languages than JavaScript when writing about the Jamstack.

As with most modern web trends, JavaScript is everywhere.

However, it would be false to say that this paradigm can’t open its arms to “traditional” programming language like, say, PHP.

Case in point: the Laravel-powered CMS, Statamic. Changes made in its latest version now allow developers to use it as a headless CMS, making it a perfect fit for Jamstack projects.

And that’s exactly what I’m going to do today. In this tutorial, I’ll use Statamic headless to manage and feed data to a Gatsby frontend, resulting in a neat little blog.

Here’s what I’ll cover:

• Installing Statamic as headless
• Creating a new Gatsby project
• Setting up the Statamic GUI
• Adding new collections
• Using Statamic to feed the Gatsby blog
• Handling Statamic’s data
• Creating a blog post layout

I’m no PHP expert, so I’ll certainly learn a thing or two along the way as well. Let’s dive right in!

What is Statamic?

Statamic (and its latest version, v3) is many things:

• It's a Content Management System (CMS) where data can be pulled via an API endpoint. You can use it as a headless CMS (as I’ll do in the tutorial below.)
• It's a Static Site Generator (SSG) that can be deployed to any Content Delivery Network (CDN) known to man.
• It's a content creation tool, enabling content creators to write posts and store and distribute videos.
• It's an open-source, PHP-based, Laravel package designed to scale and be used as both a front and backend.

Phew, that was a lot of joy to be throwing Statamic’s way. As a first time user, I found the experience of setting it up and grabbing data rather painless. Of course, I stumbled a few times; we’ll go over those together so that you don't have to do it alone.

But all in all, I'd have to say that I'm mightily impressed! Also, the site and docs are just super cool to look at. Reading the copy feels like chatting with a mate down at the pub on a Sunday.

With the release of v3, Statamic introduced a formal way of grabbing the data stored and making it headless: the content API. In v2, there was the possibility to use an addon called Fetch, which would supply JSON endpoints, but with the introduction of the content API, getting your hands on that lovely data has become a first-class citizen. It's now fully supported with a read-only endpoint.

→ Read the full post here