Forem: Charles Ouellet

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

Charles Ouellet — Thu, 10 Dec 2020 09:15:54 +0000

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

11ty Tutorial: Cranking Your Jamstack Blog Up to 11!

Charles Ouellet — Thu, 12 Nov 2020 18:45:42 +0000

We first wrote an 11ty tutorial on this blog back in 2018.

At the time, there was a brewing hype about this JavaScript-powered static site generator, but it was still relatively unknown.

Things change, though. Rapidly. As web developers, we all know too well about that.

Today, Eleventy is one of the most beloved SSG in the Jamstack community. The old version of this post didn’t do it justice anymore.

So we invited our friend Raymond Camden, who already had personal experiences with 11ty, to refresh this piece.

Following is Raymond’s tutorial to build a functional 11ty blog. Here’s what he’ll cover:

Installing 11ty
Building a homepage
Generating blog posts
Dating posts
Making the 11ty blog good-looking
Adding page archives
Sprinkling in some data

Alright, the mic is yours, Mr. Camden.

What is Eleventy (or 11ty)?

Put bluntly, 11ty is a simple static site generator written in JavaScript.

How does this little wonder work? Simply by transforming a directory of templates of varying types into HTML. Eleventy doesn't take the words "varying types" lightly—one of its main features is its templating system's flexibility. I’ll discuss this more in the tutorial below.

You can think of it as an alternative to something like Jekyll. Personally, I really like Jekyll, but one aspect I found troublesome was its use of Ruby.

I'm primarily a Windows user (although I'm normally using Ubuntu with WSL) and in the past, getting it up and running was problematic. The first few times I did it, I can remember it taking a few hours. It was always quite dreadful.

Eleventy is based on Node, a platform I'm much more comfortable with. It makes the configuration part way smoother.

Want to learn more about Jekyll? The Snipcart team crafted this tutorial for it.

I've been a proponent of the Jamstack for a few years now, going back before it was even a term and was just basically "static sites". In that time, I've gone through multiple favorite SSGs, but I've never fallen quite in love with another one as much as I have with Eleventy.

It's flexible, easy to use, and powerful. I'm totally ready to recommend it to both new and seasoned Jamstack developers.

11ty tutorial: cranking your Jamstack blog up to 11!

Let’s have a laugh before getting technical

I'm going to give you a quick introduction to the product and walk you through creating a blog.

And not just any blog, mind you, but a Super Awesome Cat blog!

Ok, that's not the prettiest blog, but you can fix that later on.

Let's get started!

→ Read the full tutorial here

Craft Better Looking Vue Apps Using Tailwind CSS

Charles Ouellet — Fri, 11 Sep 2020 08:43:01 +0000

How do you feel about CSS?

It has always been a love-hate relationship for me.

I mean, I like to experiment with it. However, my teammates at Snipcart have laughed at my demos’ design more than once (not that I agree with them.)

That’s why I’m so glad that we now have tools like Tailwind CSS to smooth devs’ relations with CSS.

On the other hand, I can confidently say that Vue.js is more part of my expertise. Today, let’s bundle these two tools while learning how to set up Tailwind CSS with Vue.

Here’s what this tutorial includes:

Generating a Vue 3 app
Setting up Tailwind CSS
Defining data to play with Tailwind
Pushing the configuration further

I’ll also cover the naming convention in Tailwind at the end of the tutorial. It should be fun. Let’s go!

What is Tailwind CSS?

In a nutshell, Tailwind CSS is a utility-first CSS framework for rapidly building custom designs.

Don’t worry if you’re not familiar with it. I’ll debunk that definition in a moment.

But let’s start at the beginning.

Tailwind came on the scene as an answer to CSS frameworks that “were doing too much”. The most popular of these frameworks that came before it being Bootstrap, I’ll use it as a point of comparison here.

Bootstrap came with a bunch of predefined styles for components such as buttons, icons, or cards. While it enabled fast shipping times, it didn’t do much in terms of offering custom designs. With time, the problem is that you can start to easily identify Bootstrap projects because they have similar looks.

That’s not how Tailwind CSS works. Instead of giving you pre-styled components, it “provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.”

That’s what utility-first means in that first definition. If it still sounds nebulous to you, the tutorial below will make it more concrete.

→ Read the full tutorial here

Gridsome Tutorial: Go Live with E-Commerce Fast

Charles Ouellet — Thu, 27 Aug 2020 10:24:28 +0000

As the latest dev hire for Snipcart, I was put to the test quickly.

My mission? Craft an e-commerce side-project using our shopping cart with an imposed technology, in a limited amount of time.

The technology in question? Gridsome, the Jamstack framework for Vue.js.

So, I rolled up my sleeves and got to work.

My efforts resulted in a Gridsome e-commerce demo. I documented my process in a step-by-step tutorial ready for you to follow along.

This tutorial explores how to:

Create a Gridsome project
Enable e-commerce functionalities with Snipcart
Craft product listings & pages
Configure the template routing
Leverage GraphQL with Gridsome

I think I did a decent job. Let’s see, shall we?

What’s up with Gridsome?

In case you don’t know about it, Gridsome is a modern website generator for Vue.js.

What does “modern” mean here? As a tool, it falls under the trending Jamstack umbrella and can be used to generate static websites, progressive web apps (PWA), or single-page apps (SPA). Whatever the type of frontend platform you want to create, Gridsome makes it easy to connect to any CMS or data source using GraphQL.

This first post we wrote about Gridsome explained how to use the GraphQL API to fetch data from an Airtable database.

Familiar with the React-powered Gatsby? Well, Gridsome can be considered the equivalent for Vue.

→ Read the full tutorial here

Bundling Strapi & Nuxt: E-Commerce Tutorial with Snipcart

Charles Ouellet — Thu, 13 Aug 2020 15:35:27 +0000

It feels like we haven’t explored a headless CMS for ages on the blog.

Strapi sounds like an excellent choice to come back to it 👌

It was already a solid product when we first wrote about it back in 2018. However, the team at Strapi didn’t stop the great work there. I can’t wait to see what it has to offer as of today.

In this tutorial, I’ll mix it up with two other powerful tools from the Jamstack ecosystem. The result? A Strapi-powered e-commerce website.

The frontend will be built using the neat Vue framework that is Nuxt.

The e-commerce functionalities will be provided by Snipcart, our JS/HTML shopping cart.

Here are the specific steps:

Generating a Strapi app & creating products
Consuming products with Nuxt.js
Adding e-commerce functionalities with Snipcart
Handling custom fields in the cart
Integrating a GraphQL plugin
Deploying the Strapi & Nuxt e-commerce app

Let’s start by meeting our players.

What’s up with Strapi?

Strapi is an open-source Node.js-based headless CMS. It’s 100% JavaScript, fully-customizable and developer-first.

It has made its way to the top of the most popular headless CMSs thanks to the flexibility it gives to devs to work with any tools they love.

Using Vue, React, or plain JS on the frontend? It doesn’t matter. Consuming the API with REST or GraphQL? Both options work seamlessly. Connecting PostgreSQL, MongoDB, SQLite, MySQL as database? All the same to Strapi.

In our last Strapi post, we highlighted another huge benefit a Node.js headless CMS brings: building apps that are entirely JavaScript—on the frontend and the backend alike. Welcome code universality, performance & easy npm install at every level!

This tutorial will showcase both the flexibility of Strapi and the power of Universal JS apps.

On another note, we’re big fans of the whole redesign the Strapi team did for their branding and marketing website lately. Looking sharp!

→ Read the full tutorial here

Introducing TinaCMS: Inline Content Editing for React

Charles Ouellet — Thu, 30 Jul 2020 11:11:56 +0000

“Jamstack is great for developers, but it’s too tech-savvy to get my clients on board.”

I can’t count the number of times we’ve heard this comment from devs.

In all fairness, it was true of the Jamstack in 2015. However, many solutions to get around this issue have popped up since then.

Take the multiple competent headless CMSs or static site builders such as Stackbit, for instance. They’ve paved the way for a user-friendly modern web development experience.

Another relatively new player, TinaCMS, is pushing static website editing to a whole new accessibility level.

In this post, I’ll try out this editing toolkit by integrating it on a Next.js app and showcasing its main features.

The steps to build the live demo are as follow:

Creating a Next.js project
Adding markdown content
Generating markdown helpers
Integrating TinaCMS & the inline editing feature

Ready to do this?

What is TinaCMS?

The team at Tina has made it pretty clear that it isn’t a CMS. Not in the traditional sense anyway.

What is it then? The definition you’ll find on their site is that Tina is an open-source site editing toolkit for React-based sites.

It allows users to manage content directly on their website instead of working from another platform. It exposes an editing interface to handle and update content in real-time.

Once installed, users get an edit icon that reveals the editing screen containing the CMS fields. The content you input in there is then written to external data sources such as Markdown or JSON files.

TinaCMS opens the Jamstack door to teams who need non-technical folks to work on content & site editing seamlessly.

→ Read the full post here

Getting Started with WordPress Static Site Generators

Charles Ouellet — Thu, 02 Jul 2020 11:03:04 +0000

You’ve heard the saying: “opposites attract.”

It certainly is true of the two concepts explored in this post.

On one side, WordPress. On the other, static sites.

The first represents the old guard of monolithic CMS; the second, the new frontend wave.

Despite their apparent differences, we hear more and more about WordPress static websites, WordPress static site generators, and so on.

It might sound counterintuitive, but when you think about it, why wouldn’t you want the best of both worlds?

That’s exactly the question I’ll explore today. More precisely, I’ll have a look at:

Why you should use WordPress to generate static sites
The benefits & limits of this approach
The many existing WP static site generators

The rising interest for Jamstack in the WordPress community is quite exciting to observe.

Let’s jump into it right away!

Why use WordPress to generate static sites?

Pairing WP and static sites doesn’t strip away power from the site editors. WordPress users can still use the popular CMS to create and edit content.

So where does the process differ? After an editor hits “Publish”, the site content is exported to HTML, pre-compiled static files ready to be served, instead of the usual PHP-generated views.

There are many available tools & plugins to accomplish this. I’ll list them later on.

However, if terms like Jamstack, static websites, or headless CMS are unfamiliar to you, there are a few things we need to clarify before going further.

This section will lay out the differences with a standard WordPress setup and a Jamtack-inspired one. I’ll then highlight the benefits & limitations of the latter.

→ Read the full post here

Gatsby E-Commerce Recipe: Integrate a Cart in a Few Steps

Charles Ouellet — Fri, 19 Jun 2020 09:56:23 +0000

No tool in the Jamstack ecosystem has made more steps towards an optimal developer experience than Gatsby.

What started as a simple, albeit performant, static site generator is today so much more than that.

One recent example of this ongoing progress was the release of Gatsby Recipes, which allow even more automation in the site-building process.

When we stumbled upon this, we automatically thought: “Here’s the perfect occasion to ease up an e-commerce integration for Gatsby projects!”

So today, we’re glad to present to you our new Gatsby e-commerce recipe.

This post will explain how we’ve built it and how you can use it for your own Gatsby e-commerce website.

Let’s start by clearing up what are Gatsby recipes exactly.

What are Gatsby recipes?

A Gatsby recipe is scripted as a series of steps taken to configure your site to the desired state, or to quickly add new things to your site.

It enables the automation of multiple tasks such as creating pages and layouts, setting up TypeScript, run npm installs, adding data to GraphQL, etc. Or, in our case, installing and setting up a plugin.

Oh, and Recipes are run directly from Gatsby’s CLI!

Under the hood, these “steps” are defined in a single MDX file—a combination of Markdown and React components. Using Markdown allows the steps to complete a task to be listed in a human-readable way. That will undoubtedly simplify the process for many users.

Out of the box, Gatsby offers many official recipes. Find out which tasks you can already use recipes for by running gatsby recipes in your terminal.

If you don’t find something you’d like to automate for your Gatsby projects, it’s quite easy to create your own recipe. The tutorial below will show you how to do so. Our example allows the installation of a Snipcart plugin that enables e-commerce on Gatsby websites quickly.

→ Read the full post here

Stackbit: Friendly Jamstack Websites & CMS Management

Charles Ouellet — Wed, 13 May 2020 10:38:45 +0000

One of the most significant challenges the Jamstack faces going forward is gaining a wider adoption and boosting accessibility.

Many indicators suggest that 2020 is the year where the community reaches this goal.

Take, for example, what Stackbit is currently developing to bring the management of Jamstack websites built with a static site generator and CMS to a whole new level.

In this post, I want to highlight the new features the Stackbit team has been rolling out lately:

Inline editing
Viewing & sharing site previews
Realtime site status

If it sounds like what’s been missing in your Jamstack setup and CMS, the following demo should be helpful.

Oh, and for team collaboration, these are game-changers. Jamstack projects that are user-friendly for developers and non-technical folks alike? Bring it on!

Let’s see what it’s all about.

What is Stackbit?

If you’re an avid reader of our blog, you might be asking yourself: “Haven’t you already introduced Stackbit as a building tool for Jamstack websites?”

You would be absolutely right.

The site builder still is up and running. However, the team behind Stackbit has been focusing on new features for its product in the last few months. The end goal of easing the access to the Jamstack to non-technical users still persists, though.

Going the Jamstack route and using a headless CMS offers many benefits in aspects like security and performance. However, the decoupled architecture means that users often struggle with simple tasks like updating text on pages or previewing edits they’re making.

Stackbit solves this by offering them a quick and easy means of editing content directly on the page and the ability to preview and share edits being made.

This kind of offering is pretty unique in the Jamstack space. For the moment, at least. Alternatively, TinaCMS is building something similar for the on-page editing experience.

On a broader scope, though, Stackbit sees itself competing more with the likes of Webflow or Squarespace. Even there, Stackbit distinguishes itself by integrating with the variety of services and open source tools that comprise the Jamstack rather than being a walled garden.

→ Read the full post here

Snipcart vs. Gumroad Review: Comparing E-Commerce Alternatives

Charles Ouellet — Thu, 23 Apr 2020 12:32:37 +0000

Gumroad has been around for almost ten years, serving creators around the world. Initially focused on selling digital goods, it has now evolved and improved.

Since there is a significant overlap in features when it comes to our own product, we decided to craft this Snipcart vs. Gumroad review.

We’ve explored both solutions’ pricing, features, and benefits to see if Snipcart is a decent Gumroad alternative.

We did our best to review both products and highlight their best sides fairly. Hopefully, it should settle which one of the two is best for your next e-commerce venture.

Let’s start by introducing our options.

→ Read the full post here

Scully Tutorial: A Static Site Generator for Angular Websites

Charles Ouellet — Thu, 09 Apr 2020 11:22:47 +0000

No matter how many content pieces I’ve written on the subject, not often have I mentioned the words JAMstack and Angular next to each other.

That’s kind of shocking, yet understandable.

I mean, when it comes to the JAMstack, Angular’s community is undeniably late to the party. But hey, there’s still well enough cake for everyone to enjoy!

Good news is devs have started to build the tools necessary to bridge the empty gap between Angular and static websites.

Case in point: Scully.io, the first Angular static site generator.

In this tutorial, I’m going to use Scully to craft an Angular static website. While I’m at it, I’ll push the demo further by integrating our shopping cart, thus creating a simple e-commerce app in no time.

Tutorial steps 🛠

Create a new Angular app
Install external dependencies
Write an Angular service
Create the necessary components
Add Scully to generate an Angular static website

First, let’s see what Scully is and what new opportunities it brings to the Angular community.

→ Read the full post here

How Vue Components Work (& How They Simplify Frontend Dev)

Charles Ouellet — Thu, 28 Nov 2019 12:42:55 +0000

With the latest version of our shopping cart built on top of Vue.js, I think it’s fair to say we’ve mastered this framework in the last few months.

And we still love it as much as the first day.

But we had to work our asses off to learn the ins and outs of Vue. Not that it’s a very complex beast. The learning curve is actually quite smooth. It’s simply that doing things the right way takes time.

That’s why we pride ourselves in crafting content that might help devs going down the same road we did.

We’ve written about state management, render functions, and PWA development (amongst other Vue-related matters).

Today, it’s all about Vue components. Starting from the basics, here’s what I’ll cover:

What is a component?
What are the building blocks of a Vue component?
How to use them?

And I’ll finish it off with examples of Vue components in the wild!

No more time to waste, let’s dive right in!

What is a Vue component?

A component is a self-contained, reusable, most often single-responsibility, piece of UI logic.

Even though I’m using the wording “Vue component” here, it’s important to know that components aren’t specific to Vue.

Yes, Vue.js is what we call a “component framework”. But so is React, as well as the new kid on the block, Svelte.

The “component” approach is a way of structuring frontend development in a way that doesn't bloat the development experience. Most component frameworks have reactivity at their core, which benefits user experience, without sacrificing ease of use by developers.

Each component can have its own state, markup and style. The real magic lies in the fact that you can reuse a component as many times as you want. It then allows developers to build app organized into a tree of nested components:

Image taken from Vue.js official docs

You can probably imagine the amount of time saved by using this approach.

There are already hundreds of existent components out there that you can quickly import to your projects to perform simple to more complex tasks. You can find a comprehensive list on vuecomponents.com.

I’m over-simplifying the concept for now. You need to know that there are different types of components, which we’ll explore with examples further down.

First, let’s see what’s hiding inside these components.

The building blocks of a Vue.js component

When coding a component in a .vue file at the most basic level, you’ll find three sections available to put code in:

Template. Written in an augmented version of the templated language (HTML), it serves as a directive to the framework on how to produce the final markup of the component based on its internal state.
Script. Where the logic of the app resides. In that section are input low-level concepts such as:
Properties: A set of input variables used to configure a component's behavior. Properties are provided by the host application, or by a parent component. They can be data filters, sort orders, labels, visibility switches, etc.
State: This one’s optional, but often present. This is a data structure that provides the state of a component at a given time. The state of a component will change over time based on occurring events (clicks, scroll, DOM mutations).
Style. Where the CSS is placed.

Pretty simple right? A component in itself is indeed very straightforward. However, components then become building blocks for your whole app themselves. That’s where it can get a bit more complicated.

But don’t worry, I’ve got you covered.

→ Read the full post here