My first foray into Statamic: a glimpse of the alternative
Statamic
Over the last few weeks I've been looking at options to rebuild my website. I wanted something simple and familiar and not overly complex. I've used Drupal in the past, which is a great option, but, can be quite complex and time consuming to build small websites, the same goes for WordPress. Yes I could have used (or bought) a simple theme, but most of these come with a bunch of features that I'd never use. I wanted this site to be simple and easy to manage, so I decided to look at Statamic.
Licensing
Statamic, like most products in the Laravel eco-system uses a licensing model. They have several pricing models, including:
- Free (solo) for small hobby websites, like this site
- Pro - that includes a few more bells and whistles from the free version
- Enterprise - this offers an improved SLA
- Master - this provides 5 websites which offers a discount from just using 5 Pro licenses
Laravel
Statamic is built using the Laravel PHP Framework. For those familiar with Laravel, buildig sites using Statamic will feel very familiar.
Unlike most CMS's, Statamic is a "flat-file" CMS. Drupal, WordPress etc are powered by a database (usually MySQL) whereby content is stored and retrieved in templates.
Statamic stores the content stores the content it creates in Markdown files (.md), in the codebase itself. Storing data in files, instead of a database is what is commonly known as "flat-file".
Collections
A Collection are containers and can be used group related content, such as blog posts, pages etc. You create each container for each type of content you want to group together.
When creating a Collection, you can:
- Enable Publish dates - this will can be used to schedule or expire content
- Order - you can order by date or via drag 'n' drop
- Content Model - includes the related Blueprint (content-type) to be used when creating content in a collection
- Template and Layout - the template used to render the content in a Collection (e.g. a blog post "show" template) and the layout used (you could have different layouts for different Collections)
- Routing - the default route that the content can be accessed (e.g. /blog/{slug}
Blueprints
A Blueprint in Statamic is like a content-type in Drupal. It is a collection of fields, such as text, images etc that are configured to allow CMS users to create content within an associated Collection.
Blueprints can be configured to have multiple "Sections", which when editing content will automatically be added to a tab (more on this later).
As mentioned earlier, a when saving content in a Collection, the content will be saved based on the fields in the Blueprint. An example can be seen below:
---
id: af43e0fb-a338-4433-b60a-3bed773be341
blueprint: article
title: 'An article example'
topics:
- demo-blog-post
excerpt: 'This is an introduction to Statamic'
author:
- b96570bd-9284-492b-93bb-67077b72324a
updated_by: b96570bd-9284-492b-93bb-67077b72324a
updated_at: 1680542411
template: articles/show
listing_image:
- content/surge.jpg
hero_image:
- content/lagoa.jpg
---
You can see above, we are setting the blueprint:article, which means we're using the 'Article' Blueprint. We have a title along with some more fields for when the content was updated (and by who). The template field shows we are using the articles/show template, which will be the articles/show.antlers.html template.
Layouts
When building a site in Statamic, rather than copying/pasting the CSS and JS in each template, we can simply extend from a base layout. A layout file contains placeholders whereby you can add "partials". A partial is a file designated with an underscore and can be used as "global sections". For example if you want to use the same menu and footer, can simply create a partial, such as _nav.antlers.html and place this in your layout file. An example can be seen below:
<!doctype html>
<html lang="{{ site:short_locale }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }} — {{ settings:site_name }}</title>
<meta name="description" content="{{ excerpt ?? title }}">
<meta name="theme-color" content="00908F">
<link rel="stylesheet" href="{{ mix src='css/tailwind.css' }}">
<script src="{{ mix src='/js/site.js' }}" defer></script>
</head>
<body class="bg-white font-sans" x-data="{ showMobileNav: false }">
{{ partial:top }}
{{ partial:nav }}
{{ template_content }}
{{ partial:footer }}
</body>
</html>
In the above layout file, you can see it uses some global settings, including the site_name and also the JS and CSS files used.
Within the <body> we have 3 partials: top, nav and footer that will be used on every single page/blueprint that the Collection has been configured to use. We also then have the template_content that will simply display all of the data from the created content (i.e. a blog post).
The above file is named layout.antlers.html. When selecting a Layout in a Collection, Statamic uses the name of the file as the layout to use. You can also choose which layout file you want, as seen in the image below:
Templates
By default, Statamic uses the Antlers templating engine. You can create a template by simply using the following notation: <template>.antlers.html, e.g index.antlers.html
Antlers is a good start when building Statamic applications. If you have experience using Blade (more on this in a bit) or something like Twig, then Antlers will feel very similar.
As per any templating engine, you can wrap HTML and dynamic content in a template. Going back to our article Blueprint from earlier, we configured the Blueprint to fields such as title. In a template, we can simply use the following to display the title:
<h1>{{ title }}</h1>
As you can see, displaying content, can be done using {{ and }} with the field that you want to display inside the braces.
When creating a Collection, we need to choose whcih template we will use to display the content (e.g. a blog post). We do this in the Collection in Template section, as seen below:
Above, we're using a file named show.antlers.html which is stored in the articles folder. Templates are stored in the resources/views folder, including all templates and layouts.
For this blog, a snippet of template to display the Blog article could be:
<div>
<article>
<h1>{{ title }}</h1>
...............
<div>
{{ hero_image }}
<img src="{{ glide:url quality="100" }}" alt="{{ alt }}" />
{{ /hero_image }}
</div>
<div>
{{ content }}
</div>
</article>
</div>
Marketplace
Like all good CMS's, Statamic has a plethora of addons. An addon is a composer package that can easily installed and be used to extend Statamic. It can be seen as a plugin or module, which contains configuration that integrates with Statamic.
To install an add-on, you can simply type:
composer require <package-name>
The addons on the Statamic website contain both official addons created by the Statamic team and also third-party developer created addons.
There is a handy filter on the addons page that help you narrow down the addon that you are looking for.
As the addons are a marketplace, most of these are paid for options, so when building a web application using Statamic, you need to be aware that you may have to pay for one or more addons.
If you have an idea on an addon and want to start making money on it, you can also sign-up and open up shop, which means you can sell via Statamic market-place and earn 75% for each sale
Starter Kits
Similar to addons, there is a small amount of free and paid for starter-kits that gives a user the ability to start a brand new Statamic site using a theme. When installing the start-kit, it will give you all Collections and Blueprints required, pre-configured and ready to go!
Conclusion
To conclude, my first foray into Statamic has been very positive. It is a simple CMS, that doesn't pretend to be anything. If you want fast and simple CMS-based website, then Statamic is a great choice!