Deploying a Statamic v3 site to Netlify using Statamic's SSG addon.
I've written a blog post about deploying a Statamic v2 site to Netlify before, now that my site is updated to Statamic v3, I've written a small guide on how to do this in v3.
For context, and why I want my site hosted on Netlify, you can read the previous blog post.
Statamic now has a first-party Addon called Statamic Static Site Generator, that basically does everything you need to generate a static version of your site, including storing your Glide generated images along your site, adding additional routes that Statamic doesn't know about and defining additional folders to copy.
After installing SSG, you can publish the configuration file using php artisan vendor:publish --provider="Statamic\StaticSite\ServiceProvider"
Make sure the base_url is set to where your site will eventually be hosted, as Statamic uses this to generate urls to all your assets and pages.
If you use the default destination make sure that this is also the folder that Netlify looks for when deploying your site.
In the copy array, you can put all additional assets that you need to get your site to run, like css and js files. Below is an example of this site, these are mostly static files.
'copy' => [ public_path('css') => 'css', public_path('js') => 'js', public_path('assets') => 'assets', public_path('robots.txt') => 'robots.txt', public_path('favicon.ico') => 'favicon.ico', public_path('manifest.json') => 'manifest.json', public_path('sw.js') => 'sw.js', ],
For the full file of this site, check out https://github.com/riasvdv/rias.be/blob/master/config/statamic/ssg.php
Netlify has a simple way to define its build commands, you can do this through their UI or by using a netlify.toml file in the root of your project. This is the configuration I'm using:
[build]
publish = "storage/app/static"
command = "composer build"
[context.production.environment]
PHP_VERSION="7.4"
[[headers]]
for = "/feed"
[headers.values]
Content-Type = "application/rss+xml"
[[headers]]
for = "/sitemap.xml"
[headers.values]
Content-Type = "application/xml"
[[headers]]
for = "css/site.css"
[headers.values]
Cache-Control = "max-age=31536000"
[[headers]]
for = "js/site.js"
[headers.values]
Cache-Control = "max-age=31536000"
As the command, Netlify will run composer build, this contains all the necessary build steps to prepare my assets and application, including running the Statamic Static Site Generator command:
"scripts": { "build": [ "yarn production", "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"", "@php artisan key:generate", "@php please ssg:generate", "@php artisan sitemap" ] }
Netlify automatically installs NPM and composer dependencies, so you don't need to worry about that. This script first generates my assets, sets up the env file and generates an application key (needed for additional routes to work) and generates the static site and a sitemap.
Now I can edit my blog and site locally, commit it to my repository and Netlify builds and distributes it globally in about a minute.
I've open sourced the code of my website here: https://github.com/riasvdv/rias.be