Discover how to make a website with Statamic CMS, generate a static version and host 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 :
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
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.
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> -Fcontentfirstname.lastname@example.org