How to create a static website with Statamic SSG and publish it on srht.site

Today, we will learn together to create a website with the Statamic CMS, generate a static version of it and publish it on https://srht.site (also called pages.sr.ht). We'll then learn how to publish it on Github Action or Github Pages.

Create a website with Statamic CMS

Before we start, we need a local environment with PHP and Composer.

Then, we can install Statamic CLI :

composer global require statamic/cli

We can check the install is successful by doing :

statamic list

Next, we just have to go in the working directory of our choice and create the website using :

statamic new mysite

I choose the Starter's Creek starter kit as we are just making a little side project.

You can then customize the website as you wish, create content, etc. We will not cover this part here.

On my side, I won't do nothing specific. I will just publish the website as it is to see how it looks like and use git for my content creation management.

Starter's Creek uses node and its own script to generate a production version, so I'll use their system to do it:

npm install
npm run production

Generate the static website with statamic/ssg

We start by adding the dependency.

composer require statamic/ssg

Then, we will use this commande to generate the static version of our website :

php please ssg:generate

The content is automatically generated into storage/app/static.

If the default configuration doesn't fit, we can publish the file and modify it.

php artisan vendor:publish --provider="Statamic\\StaticSite\\ServiceProvider"

Deploy our website on srht.site

In order to us srht.site, we need a paid account on https://sourcehut.org/.

To deploy our static website on srht.site, we will create a .build.yml file that will be automatically recognized by builds.sr.ht. It's the same concept with Gitlab CI for example.

I got inspired by the srhit.site official documentation and a Statamic's linked Dockerfile.

The most important is to have all the necessary PHP extensions relative to Statamic and Glide installed. If you don't have Glide's auto-generated images in your storage/app/static folder, it means you don't have all the required PHP extensions.

image: alpine/latest
packages:
- npm
- composer
- php8-fileinfo
- php8-tokenizer
- php8-dom
- php8-xmlwriter
- php8-xml
- php8-session
- php8-mbstring
- php8-exif
- php8-gd
oauth: pages.sr.ht/PAGES:RW
environment:
  repo_directory: "Warhammer-Fantasy-Jeu-de-Role"
  site: nicolaskempf57.srht.site
tasks:
- install: |
    cd $repo_directory
    composer install
    npm install
- build: |
    cd $repo_directory
    npm run production
    cp .env.example .env
    php8 artisan key:generate
    php8 please ssg:generate
- package: |
    cd $repo_directory
    tar -C storage/app/static -cvz . > ../site.tar.gz
- upload: |
    acurl -f <https://pages.sr.ht/publish/$site> -Fcontent=@site.tar.gz