DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Charles Ouellet
Charles Ouellet

Posted on • Originally published at snipcart.com on

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

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-tutorial

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!