Créer un site statique avec Statamic SSG et le publier

Aujourd’hui, on va voir ensemble comment créer un site avec le CMS Statamic, générer une version statique et le publier sur https://srht.site (également appelé pages.sr.ht). On verra par la suite pour faire la publication avec Github Action ou sur Github Pages.

Créer un site avec le CMS Statamic

Avant de commencer, vous devez avoir un environnement local avec PHP et composer d’installés.

Ensuite, on peut commencer en installant la CLI Statamic :

composer global require statamic/cli

Pour vérifier que l’installation a fonctionné, on peut faire :

statamic list

Ensuite, il suffit de se placer dans le répertoire parent de son choix et créer le site à partir d’un starter kit ou de zéro :

statamic new mysite

J’ai choisi le start kit Starter's Creek comme il s’agit d’un petit projet perso.

Il vous reste ensuite à customiser le site comme vous voulez, créer du contenu, etc. Cette partie n’est pas couverte ici.

Dans mon cas, je ne vais rien faire de particulier, juste publier le site tel quel pour voir à quoi il ressemble et utiliser git pour gérer ma création de contenu.

Starter’s Creek embarque node et son propre script pour générer une version de production, donc j’utilise leur système pour tout faire :

npm install
npm run production

Générer le site statique avec statamic/ssg

On commence en ajoutant la dépendance.

composer require statamic/ssg

Ensuite, on peut utiliser une commande pour générer une version statique de notre site.

php please ssg:generate

Le contenu est automatiquement généré dans storage/app/static.

Si la configuration par défaut ne nous convient pas, on peut publier le fichier et le modifier.

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

Déployer son site sur srht.site

Pour utiliser srht.site, il est nécessaire de disposer d’un compte payant sur https://sourcehut.org/.

Pour déployer son site statique sur srht.site, on va créer un fichier .build.yml qui sera reconnu automatiquement par builds.sr.ht. C’est le même principe avec Gitlab CI par exemple.

Je me suis inspiré de la documentation officielle de srht.site et d’un Dockerfile en rapport avec Statamic.

Le plus important est d’avoir toutes les extensions PHP nécessaires au fonctionnement de Statamic et de Glide. Si vous n’avez pas les images auto-générées avec Glide dans votre dossier storage/app/static, c'est que vous n'avez pas toutes les extensions PHP requises.

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