Efficiently create websites for clients with Statamic Peak

Published on by

Efficiently create websites for clients with Statamic Peak image

Statamic is a flat-file CMS powered by Laravel. When I started using it a few years ago, I was immediately sold. Statamic made me faster and better at creating custom made client websites as it has the tools I need on a daily basis. With its flexibility and a gorgeous interface, it's far above the competition for me.

I found myself creating and having fun. I started reusing code, templates, and methodologies that worked on all my Statamic projects. Even when being custom made, most websites share similar principles. When the anticipated v3 came out, I decided to rewrite and bundle my bag of tricks for v3 and release it as a Starter Kit called Peak.

The Starter Kit

Peak is an opinionated starter kit for all your Statamic sites. The kit is design agnostic but comes bundled with tools like Tailwind and AlpineJS. It enforces a workflow in which you can build anything you want as DRY as possible.

Highlights include a page builder, full-blown professional SEO integration, a customizable implementation of Tailwinds configuration, and a whole lot more. The aim is to get you started on your clients' site straight away, as Peak is easy to extend or edit to fit your clients' website needs. The ultimate goal is to get us to share and work together to make our websites and tools better. The kit is getting more popular and often receives PRs.

If you use Tailwind and AlpineJS this is your way into the wonderful world of Statamic.

Blueprints, fieldsets, and the power it brings

Statamic comes with a rich selection of fieldtypes. When starting out, however, it can be overwhelming. This is where Peak comes in. The majority of its features are made using those native fields and templating options. This means you can skip the mundane task of setting up the same stuff for each of your websites.

Page builder

While you could make different templates for all your page types, the idea is to make your pages as modular as possible without giving your customer that much freedom to ruin the design. Every unique element of your website could be a partial (a Statamic template part) and a dedicated button in the page builder. This way, you can add forms, link blocks, collection entries (for example, recent news or highlighted portfolio items), or long-form content to your pages.

All blocks you add to the page builder are spaced out evenly in a single column grid, so you don't have to think about top or bottom margins. As with everything, the grid is customizable in the tailwind config files.

It's important to note that this is not a page builder you might know from a CMS like WordPress. This page builder gives you structure and semantically valid markup. The design is all up to you.

One of the blocks in the page builder is the Bard field. I call it Article in the page builder as it's intended for long form content. The Bard field features restricted text editing and has its own fieldsets. Peak ships with default sets like responsive images, buttons, video embeds, pull quotes, or a content table. Since the text and sets you add to your long-form content is laid out in its own grid you can let images break out of the content and add this pattern to your own bard sets.

SEO

While the Statamic ecosystem has multiple fantastic paid options for SEO plugins, it's not that hard to accomplish full SEO support with native fields and templating. This is what you get with Peak. Global site options for features like JSON-ld, an auto-generated XML-sitemap, default OG images, and tracker integration for Fathom, Google, and Cloudflare. On top of that, you can enable a cookie banner with the flick of a button. You no longer have to fear a marketeer asking you to integrate Google Tag Manager. Since we use Tailwinds configurable design system, the design of the cookie banner, and all other templates, will respect your sites brand by default.

On entry pages, you get support for all the basics like OG tags, a meta description, a no-index toggle, custom JSON-ld and canonical URLs. When you use multisite Peak will automatically add the correct hreflang tags. Using Pagination? It automatically adds pagination links to the document head.

Tailwind

Peak heavily uses Tailwind and configuration files to set up your site. I've split up the configuration into multiple files:

  • tailwind.config.js is the base file in which you import all your other config files and define configurations like purge, darkmode, and the variants you wish to use.
  • tailwind.config.peak.js contains all utilities for Peak like the outer site grid and the grid and sizing utilities for your long form content.
  • tailwind.config.typography.js here you customize the optional tailwind typography plugin; by default, it uses all your currently defined site colors from:
  • tailwind.config.site.js is the config file you'll spend most of your time in. As here you define the colors and typography for your current project. Since Peak uses color naming like neutral, primary, secondary, error, warning, and red, all partials will auto-update their styling to your configuration. This makes it a breeze to get started while maintaining the option to go custom.

Personally, I define 100% of my custom CSS in those config files as it makes sense to me to do this as centralized as possible, preferably in one language. If you however, prefer to use @apply, there's a CSS file supporting PurgeCSS layers ready to use out of the box.

Other highlights

Before winding up, I think there are a few more things worth mentioning:

  • One of the things I don't enjoy is making forms and form e-mails. Using the native tools, Statamic offers, Peak gives you autogenerated forms and e-mails with a nice default styling. Forms in Peak use AJAX, so you can utilize full static caching to keep your website as fast as possible. The mails are fully localizable and take all their site-specific variables from your .env or localized strings.
  • While I'm not an accessibility expert, I do try to keep up and implement best practices in all partials. Peak implements focus-visible and respects reduced motion preferences. The same goes for semantics. The way the page builder is set up, you don't have to worry much about screen readers and reader modes. Follow along with the tags used in the default templates, and your long form content should work beautifully in Safari's reader mode, for example.
  • Peak automatically generates the favicons for modern browsers based on one SVG image.
  • You can add redirects for non-existing URLs via one of the global config pages.
  • There's a whole bunch more helpful stuff in this kit like typography partials, Tailwind helpers, default scripts for Ploi and Forge, and an example project readme. Go and find out for yourself.

Winding-up

It's a joy to work with Statamic on a daily basis, and it's fantastic to work on this starter kit. Not just because I use it, but because others use it as well. It's great to give something back to the Statamic community I've come to love.

I hope this post makes you curious about Statamic and how you can create custom made websites with it. While having fun! I urge you to check it out and see how productive it makes you. They have multiple price tiers, including a free plan.

Feel free to reach out to me on Twitter or e-mail if you have any questions.

statamic.com
Peak

Rob de Kort photo

Rob is a freelancer with over 15 years of experience in teaching, usability, design, and web development.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Visit Paragraph
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Generate Code Coverage in Laravel With PCOV image

Generate Code Coverage in Laravel With PCOV

Read article
Non-backed Enums in Database Queries and a withSchedule() bootstrap method in Laravel 11.1 image

Non-backed Enums in Database Queries and a withSchedule() bootstrap method in Laravel 11.1

Read article
Laravel Pint --bail Flag image

Laravel Pint --bail Flag

Read article
Laravel Herd for Windows is now released! image

Laravel Herd for Windows is now released!

Read article
The Laravel Worldwide Meetup is Today image

The Laravel Worldwide Meetup is Today

Read article
Cache Routes with Cloudflare in Laravel image

Cache Routes with Cloudflare in Laravel

Read article