Content material administration is a really opinionated matter, and everybody has their favourite platform they like to make use of. Statamic is a unbelievable content material administration bundle you possibly can add to your Laravel functions.
On this tutorial, I’ll present you tips on how to begin with a brand new Statamic web site and take this from an concept for a weblog to deploying this as a static web site to Digital Ocean utilizing infrastructure as code. So you possibly can sit again, loosen up, and deploy with ease.
I’ll stroll by way of how one can create a brand new statamic web site, however you possibly can add this to any Laravel software chances are you’ll have already got.
One of the best ways to put in a Statamic web site is to make use of their CLI software, so run the next command to put in this international CLI software:
1composer international require statamic/cli
As soon as put in, you possibly can run statamic to make sure it really works appropriately. We are going to construct a fundamental weblog utilizing one of many starter kits, because it hurries up the complete course of. To begin, open your terminal and navigate to the listing the place you need this mission to stay. Run the next console command to create your new statamic weblog:
1statamic new weblog
You’ll be requested at this level if you wish to begin with a clean web site or if you wish to use a starter package. I extremely advocate contemplating utilizing a starter package right here – because the statamic neighborhood has created some unbelievable assets that you should utilize. I’ll use Starter’s Creek for this tutorial, a weblog starter utilizing tailwindcss.
As soon as put in, you may be requested to create an admin consumer. This can be a consumer that you really want to have the ability to entry the management panel and handle the positioning itself. These credentials are saved in YAML on disk inside your mission, however the password itself can be hashed.
Relying on what you utilize regionally to run your PHP functions, now you can run the web site and navigate across the instance content material that comes along with your starter package.
If we have a look at the listing construction, we are able to see that we’ve got just a few directories we’re unfamiliar with. On the root of our mission, we are going to see a listing known as content material, the place the configuration choices and precise content material for our web site will stay. Statamic is a flat-first CMS that makes use of flat recordsdata to retailer your content material. There are alternatives to maneuver this over to a database-driven CMS – and the documentation is superb for displaying you what steps it is advisable to take.
Nevertheless, we is not going to do that as we wish to give attention to deploying a static web site to Digital Oceans App Platform.
Within content material we’ve got collections, and that is our content material. With Statamic, we’ve got collections of content material organized by kind – pages and weblog include my starter package. Should you open any instance entries that got here along with your starter package, you will notice markdown content material, however not like you might be used to seeing it. Statamic makes use of its editors to create and save your knowledge into one thing chances are you’ll at first battle to grasp. Nevertheless, when you examine this content material, you’ll discover that it breaks down every dom component created and units the sort and content material. In order that when it’s rendered, it may be simply up to date and altered sorts to replace a paragraph to a heading, for instance.
If we glance contained in the useful resource/views listing, we are going to see recordsdata with totally different file extensions from what we’re used to in Laravel. Statamic has its templating engine known as antlers, which is comparatively straightforward to study – however since model 3, there was assist for utilizing Blade in Statamic. You possibly can both learn the documentation to grasp tips on how to obtain this, or Spatie has created a Blade starter package you should utilize.
You possibly can edit just about any of the views right here, however watch out you don’t take away issues till you perceive their makes use of. It takes a short while to get used to the antlers templating, however as soon as you might be used to it – you’ll study to like its simplicity.
For this to work successfully, we might want to set up yet another bundle to show our Statamic web site right into a static web site. Run the next command to put in the bundle:
1composer require statamic/ssg
This may set up the bundle and publish the configuration file. You possibly can customise the constructing of the static web site somewhat inside this config file. Nevertheless, the default will work for this mission. Our web site will now be capable of be constructed as a static web site, that means we are able to look into deployments.
Not that we’ve got a “web site” that we wish to deploy, we are able to begin excited about how we want to get this onto Digital Ocean. The only option for internet hosting a static web site like this on Digital Ocean can be to make use of their App Platform. It is going to can help you join a repo, present any surroundings variables you may want, and describe the construct steps required to create the static web site.
Consider this as a useful approach of automating your CI/CD pipeline. We may have automated deployments as a result of we’re utilizing App Platform. However on the similar time, we may even be constructing our infrastructure utilizing code. So if we ever get to some extent the place we wish to change to a database driver for our content material, we modify the configuration – rerun the setup course of, and deploy once more. We do not have to log in to our cloud supplier. All we’ve got to do is reconfigure and run.
Let’s first take a look on the choices in the case of infrastructure as code. Terraform is presumably probably the most well-known and has wonderful assist for many cloud suppliers. The most important concern is studying tips on how to write terraform scripts. Subsequent up, there’s Ansible, historically extra of an IT automation software with the added potential to handle infrastructure. There are numerous on the market, every with its advantages and downsides. This tutorial will give attention to Pulumi, permitting us to work with most cloud suppliers and write our infrastructure in a language we’re maybe extra snug with.
Thus far, we’ve got a comparatively normal Laravel software construction, with just a few added bits for managing content material inside Statamic. We are going to create a brand new listing within the root of our mission known as devops, the place all of our Pulumi code will stay.
Open this new devops listing inside your terminal, as that is the place we are going to spend a lot of our time now. You will have to put in Pulumi at this level, which, if you’re on a mac, is an easy brew command:
1brew set up pulumi
Nevertheless, the documentation has wonderful directions on getting this put in in your machine if you’re not a mac consumer.
After you have put in Pulumi and are inside your devops listing, we are able to initialize this mission as a pulumi mission. For this, we are going to use TypeScript because the language for configuring our infrastructure – as there’s at the moment no assist for PHP. Run the next console command to start out this mission.
1pulumi new typescript
The command will then ask you to enter your API token for Pulumi, as you want an account to make use of it. They’ve an awesome free tier, and you might be unlikely to expire of free deployments for many websites like this.
The command will then ask you to enter your mission identify and outline and identify this stack. A stack is a constant technique to design your infrastructure, so when you use comparable setups for a lot of initiatives, you should utilize a predefined stack to deploy onto.
As soon as this has run, it is going to set up the required dependencies, and you might be all set to start out.
Allow us to open the index.ts that Pulumi created for us:
1import * as pulumi from "@pulumi/pulumi";
A fantastic place to begin for us to start out designing our infrastructure, so allow us to get began.
We first want to put in a node module that can permit us to make use of pulumi with Digital Ocean. You possibly can set up this utilizing:
1npm set up @pulumi/digitalocean
Now we are able to get again to our infrastructure.
1import * as pulumi from "@pulumi/pulumi";
2import * as digitalocean from "@pulumi/digitalocean";
3
4const statamic = new digitalocean.App("statamic-website", {
5 spec: {
6 identify: "statamic-website",
7 area: "lon1",
8 staticSites: [{
9 buildCommand: "composer install --prefer-dist --optimize-autoloader && php please cach:clear && npm ci && npm run production && php please ssg:generate",
10 git: {
11 branch: "main",
12 repoCloneUrl: "https://github.com/juststeveking/website.git",
13 },
14 name: "statamic-website",
15 outputDir: "storage/app/static",
16 }],
17 }
18});
We’re creating a brand new Digital Ocean App and telling it the specs of how we wish to construct and retailer this on their platform. Together with the construct command and output listing. We additionally allow them to know the repo URL in order that it will probably simply be cloned and redeployed if we push updates by way of GitHub.
Allow us to have a look at what this may appear to be if we deploy this, as Pulumi has a superb command to preview what infrastructure we’re about to construct and use.
1pulumi preview
This could offer you an output like the next:
1Previewing replace (do-static)
2
3View Stay: https://app.pulumi.com/JustSteveKing/devops/do-static/previews/5a4fc21d-ac2c-484a-9e35-bbaf527a9975
4
5 Kind Title Plan
6 + pulumi:pulumi:Stack devops-do-static create
7 + └─ digitalocean:index:App statamic-website create
8
9Assets:
10 + 2 to create
We all know from this output that we’ll create two assets, one stack on Oulumi and one static web site on Digital Ocean. To permit us to do that, we might want to go to our Digital Ocean account and generate an API token so Pulumi can create and arrange our infrastructure.
Set this with the Pulumi CLI:
1pulumi config set digitalocean:token api-token-here --secret
The subsequent step is to make sure that Digital Ocean has entry to our GitHub repository. You are able to do this from contained in the Digital Ocean App Platform console.
Lastly, as soon as all companies are linked, you possibly can run one command, and your infrastructure – with a git connection, can be up and operating.
1pulumi up
This may verify to see what adjustments must be utilized, which you’ll be able to then affirm if you wish to create the brand new assets. Then as soon as authorised, your assets can be created – and your web site can be stay!
That’s the way you go from concept to weblog to stay with out leaving your IDE.
