Clarity Squared
  • Home
  • Services
  • Portfolio
  • Resources
  • Our Story
  • Contact
Home Services Portfolio Resources Our Story Contact

May 17, 2020

Statamic 3 Resources & Tips

We love using Statamic as the Content Management System for websites we build. As we began working with Statamic 3, we wanted to document what we learned and share it publicly to help out the community.

By Andrew Gregory

Last Updated 9/23/2020.

Statamic 3 has now been released and is even more fantastic than the beta (this website runs on Statamic 3 and has sine the beta).

Helpful Links

  1. Mike Martin put together a super handy Trello board with the status of add-ons for Statamic 3.

  2. During Beta there was a Spock replacement from Duncan McClean... but now the git integration should do what you need.

  3. Temporary SEO plugin until Aardvark SEO for Statamic 3 is released.

Hosting and Deployment

We use Laravel Forge to spin up our servers on Digital Ocean and deploy code to them from GitHub. Then we point the domain name through Cloudflare which gives use free SSL and some other benefits. We’re not overly excited about dev ops, so we’re happy to keep this straightforward and consistent.

Forge Deploy Script

cd /home/forge/www.claritysquared.com
git pull origin master
echo "" | sudo -S service php7.4-fpm reload

php please glide:clear
php please stache:clear
php please static:clear

Redirects

While there are some redirects that can be done within Statamic (Laravel), we found it was simpler to just do them through Forge since we had simple needs.

Making it Ridiculously Fast

Website performance is super important (we have written about how to make fast websites before). Here are a few Statamic 3 things to make your website blazing fast.

Responsive Images & Image Resizing

You can use the built-in Glide Tag to resize images. Or better yet, use this Responsive Images add-on to take care of this while also generating responsive versions of the images.

We opted for the Responsive Images add-on and are pleased to say it was super simple to set up. Here's the antlers code:


Static Caching

Using the built-in Static Caching will definitely make a big difference in your website's performance. Here are some hints on how to set this up (mainly just follow what is in the Statamic documentation).

We wanted to control the static caching in our .env file, so we updated the .env to include:

# Production
APP_CACHE_STRATEGY=full

# Dev
APP_CACHE_STRATEGY=null

Then we updated the config/statamic/static_caching.php file to use this to control if Static Caching was enabled or not. Change it from:

'strategy' => null,

to:

'strategy' => env('APP_CACHE_STRATEGY', null),

In our Forge Nginx Configuration we changed the location / (as is recommended in the Statamic documentation) to:

location / {
  try_files /static${uri}_${args}.html $uri /index.php?$args;
}

Lastly, be sure to check your website's performance (we recommend webpagetest.org and Google Page Speed Insights). This site is sub 2 seconds.

SEO

Statamic has officially released their SEO Pro add-on for Statamic 3.

The Aardvark SEO add-on is not yet released for Statamic 3, but it has been stated that they have this update planned.

For this website we built our own fields for SEO (title tags, meta descriptions, opengraph images, etc.). However, I came across this plugin and this gist that both offer basic SEO fields and may be worth checking out if you want to DIY.

Clarity Squred

© 2021 Clarity Squared, LLC
All rights reserved.
Privacy Policy and Terms of Use

Contact

[email protected]
412.357.1456

Come Visit Us

4302 Old William Penn Hwy
Suite 500
Murrysville, PA 15668

Connect

  • Instagram
  • LinkedIn