Deploying Statamic 3 to the DigitalOcean App Platform

Published in

SmallWorld

6 min readOct 9, 2021

I’ve been a fan of Statamic for quite some time ever since being recommended by a friend.

It’s elegant, built on Laravel, easily configurable, and just makes sense. The community continues to grow with the newly released Statamic Marketplace. All in all, exactly what you look for when building on emerging platforms.

I never really joined the WordPress community (perhaps worse…I used to build our static websites via Ruby on Rails). But, a large portion of the Statamic community comes from burned WordPress developers. Scalability concerns? Statamic is used by Asana.

Regardless of your particular reasons for launching a Statamic site, let’s get going.

Prologue: Upgrading from Statamic 2 to Statamic 3

Recently, I upgraded our websites — SmallWorld and Baseline — from Statamic 2 to Statamic 3. Here’s the guide on how to upgrade.

Read the docs: Read the new docs. Statamic 3 is very different from Statamic 2. A number of bugs during the site upgrades would have been avoided by simply reading that guide, first. No matter how many years I develop, I always overlook the docs.

Other than that, the upgrade process is pretty straightforward. I used their migrator package. The only hiccup was the missing assets folder — for this, use the Asset container migrator.

Then came the headache…deploying these sites to Laravel Forge was not working. At all. No matter how many configuration changes. I dove into re-writing the build scripts, updating Nginx configs, contacting support…No luck.

For Statamic 2, deploying to Laravel Forge even came in the Statamic docs. For Statamic 3, the approach is all about the static site generator (SSG).

SSG deployments: If all you need is a static site, and you’re comfortable managing content from Github. Use the static site generator! You can make whatever site edits you need, locally. Or — if you’re lucky enough to have a Github-friendly marketing team — use Github. This is how Asana managed its workflow.

Enter, the new DigitalOcean App Platform. $5/mo for a basic site? Brilliant. It’s an entry point I always believed DigitalOcean would head — being one of the few none-AWS/SalesForce solutions left in the market.

1. Getting Started with Statamic

Let’s create a dummy site sing the Statamic CLI.

statamic new crazy-eights
cd crazy-eights
npm install

I chose the default starter kit [0].

Up & running 👍

Create your first user.

php please make:user

Then go ahead and log in at your URL. In this case, crazy-eights.test/cp. The dev URL is dependent on how you configure your Laravel sites.

Go ahead and add a{{content}} to the home.antlers.html. This will come in handy when we need to demonstrate content changes in the production environment.

home.antlers.html...
<p>{{content}}</p>
...

If that’s good to go, initialize your git repository.

git init
git add .
git commit -am "initial commit"
git branch -M main
git remote add origin {YOUR_GITHUB_REPO)
git push -u origin main

Let’s move on to DigitalOcean. If you don’t have an account, create one. Then navigate back to the App Platform.

2. Getting Started with the DigitalOcean App Platform
You should see something similar to this screen (without a live app).

Don’t worry about DigitalOcean charging your card during development. Despite having a $5 barrier for entry, they’re really good about not charging what isn’t used. If you want to prevent any charges, just delete your app when you’re done.

Create a new app. If your Github account is not linked, do so now. Confirm “Autodeploy code changes” is checked.

Select Next.

Here we’re going to edit a couple of configurations.

1 — HTTP Routes
We won’t change this, but this is a pretty neat feature of the App Platform. Let’s say you were launching a separate API-only app. You could set this to /api and have a different website running under the root domain.

2 — Environment Variables
This is new in Statamic 3. If you look at your source code, you’ll see a .env.example and a .env. The .example is used to generate a default .env file on a server (for example, if you attempted to deploy on Laravel Forge, it would create a default .env on the server).

All we need to get up and running is APP_NAME, APP_KEY, and APP_URL. Since we don’t yet have the temporary URL, leave that blank for now.

3 — Build/Run Command
Since we’re not doing anything special, let's just use:

composer install --no-interaction --prefer-dist --optimize-autoloader

The run command works as-is. You can configure these to whatever jobs you need to run at launch (e.g. clearing cache).

4 — Port
Leave as :8080.

5 — Database
If you have a configured database, link that here. Out of the box, you will not need to set this. You can always set this later.

Bonus — Configuring an Email Adapter
If you’re using an email adapter such as Mailgun, you will want to set the following environment variables: MAIL_MAILER , MAILGUN_DOMAIN , and MAILGUN_SECRET. To make use of these variables, follow the Sending Email // Statamic guide.

Select Next.

You can leave all of this as default.

And finally…set your droplet options (I use “Basic” for all of our websites). Set your container size to match your traffic. This can always be upgraded later.

Select Build the App.

The first deployment will take some time. This is usually around 5 to 10 minutes.

We need to update the APP_URLfrom earlier. Go into your Settings > Domains. Copy this domain.

Navigate back to your app component and set the APP_URL. This will trigger another deployment.

Once that’s all wrapped up, our app is now live 💥

Navigate to the Control Panel.

If you check your console logs, it’s an HTTPS routing error. As of the time of writing, the best solution is to add the following to the bottom of your routes/web.php .