Maintenance mode for Statamic sites

We’ve done a few smaller projects with the relatively new flat-file CMS, Statamic. While it certainly has a few flaws and growing pains, it’s a promising system. I’m using it for this site.

One thing missing out of the box is the ability to put a site into “Offline mode”. ExpressionEngine, another CMS we have experience with, has this. It’s a nice little switch you can flip if you’re not wanting the public to see your site while in disarray during an update or something similar.

Here’s a relatively simple method we used recently to accomplish this. Basically, you’ll use a combination of environments (and environment variables) and redirects.

Set your dev and live environments your main settings.yaml file

_environments:
  dev:
    - 'http://localhost*'
    - 'http://example:2222*' // adjust to your local port
    - '*.dev'
    - 'http://dev.example.com*'
  live:
    - 'http://example.com*'
    - 'http://www.example.com*'

In _config/environments/, add a file for each environment you setup in the previous step (if they don’t already exist)

_config
    environments
        dev.yaml
        live.yaml

Add a variable to each of these files, starting with dev.yaml

# Show the offline page template?
offline_mode: false

Same variable, different value for live.yaml

# Show the offline page template?
offline_mode: true

You now have a variable that can be used in your templates. So, let’s go ahead and use it in a simple redirect.

In your layout files (_themes/theme-name/layouts/default.html), add a redirect

{ { if offline_mode && segment_1 != "offline" } }
    { { redirect url="/offline" } }
{ { endif } }

Remove extra spaces between curly braces

Create an “offline” or maintenance mode template in your _content folder

Now you can deploy your site to the live server without worrying about things looking all busted. When you’re ready to flip the switch and make the site live, simply change the offline_mode variable to false in your live.yaml environment file.


Bonus!

Use this same redirect concept to see the live site during the build out using the logged_in global variable as the redirect if statement:

{ { if !logged_in && segment_1 != "offline" } }
    { { redirect url="/offline" } }
{ { endif } }

That will show guests the offline template while signed in users (content creators, clients, and developers) can see real content.


Notice anything all busted with this? Let me know.