Website Development with Statamic CMS
Statamic is a PHP CMS built on Laravel that stores content in flat files (YAML/Markdown) or a database. It differs from WordPress and Craft by taking a "git-first" approach: the entire structure and content live in the repository, and deployment is simply a git push.
Flat-file vs. Eloquent
Flat-file (default) — content in the content/ directory as YAML/Markdown. No database needed for hosting. Ideal for small websites, blogs, documentation, where content changes rarely and is deployed via git.
Eloquent — content in MySQL/PostgreSQL database. Needed for: thousands of records, complex searches, frequent edits without deployment, multi-user environments with conflicts.
Statamic Architecture
my-site/
├── content/
│ ├── collections/
│ │ ├── pages/ # Collection: pages
│ │ └── blog/ # Collection: blog
│ ├── trees/
│ │ └── pages.yaml # Navigation tree structure
│ └── globals/
│ └── site.yaml # Global variables
├── resources/
│ ├── blueprints/
│ │ ├── collections/
│ │ │ ├── pages/article.yaml
│ │ │ └── blog/post.yaml
│ │ └── globals/site.yaml
│ ├── views/ # Antlers templates
│ └── fieldsets/ # Reusable field groups
├── config/statamic/
└── public/
Blueprint — content structure description
# resources/blueprints/collections/blog/post.yaml
title: Blog Post
sections:
main:
display: Main
fields:
- handle: title
field:
type: text
required: true
display: Title
- handle: slug
field:
type: slug
generate: true
display: Slug
- handle: content
field:
type: bard
buttons: [h2, h3, bold, italic, link, anchor, image, blockquote, quote, table, code]
display: Content
- handle: featured_image
field:
type: assets
container: assets
max_files: 1
display: Featured Image
- handle: categories
field:
type: terms
taxonomies: [categories]
display: Categories
seo:
display: SEO
fields:
- import: seo
Antlers — Statamic's template engine
{{# layouts/default.antlers.html #}}
<!DOCTYPE html>
<html lang="{{ site:locale }}">
<head>
<meta charset="utf-8">
<title>{{ title ?? site:name }} | {{ site:name }}</title>
{{ partial:meta }}
{{ vite src="resources/js/app.js|resources/css/app.css" }}
</head>
<body>
{{ partial:navigation }}
<main>{{ template_content }}</main>
{{ partial:footer }}
</body>
</html>
{{# resources/views/blog/index.antlers.html #}}
{{ collection:blog
sort="date:desc"
paginate="12"
status:is="published"
}}
{{ if no_results }}
<p>No posts yet.</p>
{{ /if }}
<div class="posts-grid">
{{ results }}
<article class="post-card">
{{ if featured_image }}
<img src="{{ featured_image | glide:width=800:height=400:fit=crop }}" alt="{{ title }}">
{{ /if }}
<h2><a href="{{ url }}">{{ title }}</a></h2>
<time datetime="{{ date format='Y-m-d' }}">{{ date format="d F Y" }}</time>
{{ if excerpt }}<p>{{ excerpt }}</p>{{ /if }}
<a href="{{ url }}">Read more →</a>
</article>
{{ /results }}
</div>
{{ paginate }}
<nav class="pagination">
{{ if prev_page_url }}<a href="{{ prev_page_url }}">← Previous</a>{{ /if }}
{{ if next_page_url }}<a href="{{ next_page_url }}">Next →</a>{{ /if }}
</nav>
{{ /paginate }}
{{ /collection:blog }}
Glide — image transformation
Statamic uses League/Glide for on-the-fly image resizing:
{{# Simple resize #}}
{{ featured_image | glide:width=1200:height=630:fit=crop }}
{{# Preset transformations (config/statamic/assets.php) #}}
{{ featured_image | glide:preset=hero }}
{{# Responsive srcset #}}
{{ responsive:featured_image
sizes="(max-width: 768px) 100vw, 50vw"
webp="true"
}}
E-commerce: Statamic + Simple Commerce
Official plugin doublethreedigital/simple-commerce:
composer require doublethreedigital/simple-commerce
php artisan simple-commerce:install
Adds: Products Collection, Orders Collection, Stripe/PayPal gateway, taxes, coupons.
Development Timeline
| Phase | Time |
|---|---|
| Installation + collection setup | 1 day |
| Blueprints (5–8 types) | 1–2 days |
| Antlers templates | 3–7 days |
| Navigation and structure | 0.5 day |
| Add-ons (SEO, forms, search) | 1–2 days |
| Corporate website | 8–14 days |