From the idea, to the blog, to live without leaving your IDE


Content management is a very opinionated subject, and everyone has their favorite platform that they like to use. Statamic is a fantastic content management package that you can add to your Laravel applications.

In this tutorial, I’ll show you how to get started with a new Statamic website and take it from a blog idea to deploying it as a static site on Digital Ocean using infrastructure as code. So you can sit back, relax and roll out easily.

I’ll walk you through how to create a new statistics website, but you can add it to any Laravel application you already have.

The best way to install a Statamic website is to use their CLI tool, so run the following command to install this global CLI tool:

1composer global require statamic/cli

Once installed, you can run statamic to make sure it is working properly. We’re going to create a basic blog using one of the starter kits because it speeds up the whole process. To get started, open your terminal and navigate to the directory where you want this project to reside. Run the following console command to create your new static blog:

1statamic new blog

You will be asked at this point if you want to start with a blank site or if you want to use a starter kit. I highly recommend considering using a starter kit here – as the statamic community has created some fantastic resources for you to use. I will be using Starter’s Creek for this tutorial, a blog starter using tailwindcss.

Once installed, you will be asked to create an administrator user. This will be a user you want to be able to access the control panel and manage the site itself. These credentials are stored in YAML on your project disk, but the password itself will be hashed.

Depending on what you use locally to run your PHP applications, you can now run the website and browse the sample content that comes with your starter kit.

If we look at the directory structure, we can see that we have a few directories that we are unfamiliar with. At the root of our project, we will see a directory called content, where the configuration options and the actual content of our website will live. Statamic is a flat CMS that uses flat files to store your content. There are options for moving this to a database-based CMS – and the documentation is very helpful in showing you the steps.

However, we won’t because we want to focus on deploying a static site on the Digital Oceans Application Platform.

Inside of content We have collections, and this is our content. With Statamic, we have content collections organized by type – the pages and blog come with my starter kit. If you open sample entries that came with your starter kit, you’ll see some marked content, but not like you’re used to. Statamic uses its editors to create and save your data in something you might find difficult to understand at first. However, if you inspect this content, you will notice that it breaks down each dom element created and defines the type and content. So when rendered, it can be easily updated and changed type to update a title paragraph, for example.

If we look inside the resource/views directory, we will see files with different file extensions than what we are used to in Laravel. Statamic has its templating engine called antlers, which is relatively easy to learn – but since version 3, using Blade in Statamic is supported. You can either read the documentation to understand how to achieve this, or Spatie has created a Blade starter kit that you can use.

You can modify just about any of the views here, but be careful not to delete any items until you understand their uses. Woodland modeling takes a bit of getting used to, but once you get the hang of it, you’ll learn to love its simplicity.

For this to work effectively, we will need to install an additional package to turn our Statamic website into a static site. Run the following command to install the package:

1composer require statamic/ssg

This will install the package and publish the configuration file. You can customize the static site build a bit in this configuration file. However, the default will work for this project. Our website will now be able to be built as a static site, which means we can consider deployments.

Not that we have a “website” that we want to deploy, we can start thinking about how we would like to put it on Digital Ocean. The best choice for hosting a static site like this on Digital Ocean would be to use their app platform. It will let you connect a repository, provide any environment variables you might need, and describe the build steps required to create the static site.

Consider this a useful way to automate your CI/CD pipeline. We will have automatic deployments as we use App Platform. But at the same time, we will also build our infrastructure using code. So if we ever get to a point where we want to switch to a database driver for our content, we change the configuration – rerun the install process and deploy again. We don’t need to connect to our cloud provider. All we have to do is reconfigure and run.

Let’s first look at the infrastructure-as-code options. Terraform is perhaps the best known and has excellent support for most cloud providers. The biggest problem is learning how to write terraform scripts. Then there’s Ansible, traditionally more of an IT automation tool with the added ability to manage infrastructure. There are many, each with its pros and cons. This tutorial will focus on Pulumi, allowing us to work with most cloud providers and write our infrastructure in a language we may be more comfortable with.

So far we have a relatively standard Laravel application structure, with a few additional elements for managing content in Statamic. We will create a new directory at the root of our project called devopswhere all our Pulumi code will live.

Open this new devops directory in your terminal, because that’s where we’ll be spending a lot of our time now. You’ll need to install Pulumi at this point, which if you’re on a mac is a simple brew command:

1brew install pulumi

However, the documentation has great instructions for installing it on your machine if you’re not a Mac user.

Once you have installed Pulumi and are in your devops directory, we can initialize this project as a pulumi project. For this we will use TypeScript as our framework configuration language – as there is currently no support for PHP. Run the following console command to start this project.

1pulumi new typescript

The command will then ask you to enter your API token for Pulumi, as you need an account to use it. They have an excellent free tier and you’re unlikely to miss free deployments for most sites like this.

The command will then ask you to enter the name and description of your project and name this stack. A stack is a cohesive way to design your infrastructure. Therefore, if you are using similar configurations for many projects, you can use a predefined stack to deploy to.

Once that’s done, it will install the required dependencies and you’re good to go.

let’s open it index.ts that Pulumi created for us:

1import * as pulumi from "@pulumi/pulumi";

A great starting point to start designing our infrastructure, so let’s get started.

First we need to install a node module that will allow us to use Pulumi with Digital Ocean. You can install it using:

1npm install @pulumi/digitalocean

We can now return to reviewing 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 name: "statamic-website",

7 region: "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 create a new Digital Ocean app and explain how we want to build it and store it on their platform. Including build command and output directory. We also give them the repository URL so it can be easily cloned and redeployed if we push updates through GitHub.

Let’s see what it might look like if we deploy it, because Pulumi has a great command to preview the infrastructure we’re about to build and use.

1pulumi preview

This should give you output like this:

1Previewing update (do-static)

2 

3View Live: https://app.pulumi.com/JustSteveKing/devops/do-static/previews/5a4fc21d-ac2c-484a-9e35-bbaf527a9975

4 

5 Type Name Plan

6 + pulumi:pulumi:Stack devops-do-static create

7 + └─ digitalocean:index:App statamic-website create

8 

9Resources:

10 + 2 to create

We know from this output that we will be creating two resources, a stack on Oulumi and a static website on Digital Ocean. To allow us to do this, we will need to access our Digital Ocean account and generate an API token so that Pulumi can create and configure our infrastructure.

Set this with the Pulumi CLI:

1pulumi config set digitalocean:token api-token-here --secret

The next step is to ensure that Digital Ocean has access to our GitHub repository. You can do this from the Digital Ocean App Platform console.

Finally, once all the services are connected, you can run a command, and your infrastructure – with a git connection, will be up and running.

1pulumi up

This will check what changes need to be applied, which you can then confirm if you want to create the new resources. Then, once approved, your resources will be created – and your website will be live!

This is how you go from idea to blog to live without leaving your IDE.

Previous Frieze Art Fair makes Asian debut in Seoul, tapping into hot South Korean market
Next Mumbai Police set to remove senior officers' phone numbers from website