Run Statamic on Vercel

When Tailwindcss 2 was released I decided to give my blog a new update and also write about some more topics I had in mind. The blog ran on Hugo hosted on Netlify. While I never had issues with Netlify for some reasons Hugo wasn't just not made for me. It took me a fair amount of time to get Tailwindcss 2 up and running there, then I found some issues with generating my content,... all in all not a refreshing experience when you just want to write some new blog posts.

In the meantime I feel in love with Statamic as I used it in another freelance project, so I thought why not give it a try for my own blog. There are some very good blog post by Rias about running Statamic 2 and 3 on Netlify that I took as a base.

Why not Netlify

When converting my blog from Hugo to Statamic and changing settings on Netlify I ran into bigger problems getting all the php composer packages installed in Netlify. The Circular call to script handler 'post-package-install' detected error gave me a bad day and I eventually found others had issues (Github issue) with this as well. While it seemed to be a problem with Composer 2 in my case I just wasn't able to get this fixed. Even an update from Composer 2.0.7 to 2.0.8 did not help. Unfortunately you cannot specify the version of Composer running when Netlify builds your blog.

Use Vercel

Vercel, which is the former ZEIT, is an equally opponent to Netlify build JAMSTACK application. There are already huge comparisons between these two (Google) so I won't bother you with this.

Statamic SSG & Vercel settings

You need to use Statamic SSG package to publish your site on Vercel. There is a separate section describing which steps to take, including a build script, and what settings you need. Just fantastic. Additionally I found some more settings can be set using a vercel.json (see mine) in your root project folder:

  • Setting the correct headers for your sitemap and feed
  • Deny any iframe embedding of your content
  • Set cache controls for your assets
  • Disable the now bot comments on Github for your commits

Things you might want to add to Statamic

When switching to Statamic I found a couple of things missing:

  • a sitemap
  • an atom feed
  • a 404 page.

Create a feed

Create a new route in your routes/web.php under which your feed should be reachable. In my case the feed can be found under /feed:

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::statamic('feed', 'layouts/feed', [
    'layout' => 'layouts/feed',
    'content_type' => 'atom'
]);

Next you need to set up a template in which the feed is generated. So I created a file at resource/views/layout/feed.antlers.html (see on Github). To let the SSG package of Statamic know, that it needs to generate your feed route, specify this in config/ssg.php in the urls section.

Create a sitemap

For generating a sitemap I use Spaties laravel-sitemap package. All you need to do is setting up a command that is run when deploying your site. The let the sitemap build on deployment create a script in your composer.json

"scripts": {
    "build": [
        "yarn production",
        "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
        "@php artisan key:generate",
        "@php please ssg:generate",
        "@php artisan sitemap"
    ]
}

and let composer run build run when deploying to Vercel. This should already be included in the build script from Statamics SSG package.

The 404 page

Vercel, by default, checks for 404.html inside the output folder of the application.

So the easiest solution is to just create a 404.html in your public folder and let this file being copied to the final static folder by setting it in your config/ssg.php config file. 

'copy' => [
        public_path('css') => 'css',
        public_path('js') => 'js',
        // Other files and folders
        public_path('404.html') => '404.html', // <-- we need this
],

The bad thing with this is, you cannot use the already existing layout as it just skips the whole Statamic magic. I hope the open issue in the SSG repository gets fixed more or less soon, so that Statamic is automatically emitting a 404.html.