Set Up a New Site using Statamic, Laravel Forge And DigitalOcean

This is how I set up my blog (the one you are reading right now).

I use a flat-file CMS called Statamic. This has the advantage that I can version control all of my changes (content included!). Deploying it to forge will be even easier than before!
Statamic has an amazing starter kit called Peak that I use to get rollin'. It has some great defaults set up so I can start right away and worry about the design later. Since this will only be a simple blog I don't need any advanced functionality to get started.

I will also be using my personal DigitalOcean Droplet along with my Laravel-Forge setup.

So, let's get started.

Create a new Site locally

info:Depending on your local setup these steps may be different for you. I Recommend Laravel Homestead or Laravel Valet. Personally, I use Homestead.

First, I installed the Statamic CLI globally on my development VM with composer global require statamic/cli and create a new project in your project folder:

$ statamic new devblog.adriangoldner.com

I also needed to make some adjustments to my Homestead.yaml:

sites:
  - map: devblog.adriangoldner.local
    to: /home/vagrant/Projekte/devblog.adriangoldner.com/public

... aswell as to my /etc/hosts file:

# this needs to be your local VM-IP Address (The one in the first line of your Homestead.yaml
192.168.10.10  devblog.adriangoldner.local

Now, when hitting devblog.adriangoldner.local in our browser we should be greeted with a neat sample page. 🎉

Connecting Forge With Your DigitalOcean Account

If you don't have an account at DigitalOcean or Forge, go ahead and create one. For the sake of this article, I'll stick to those two services but you are welcome to switch between a vast variety of different services.

Then, create a new server in Forge:

Example of the server-creation page in Laravel Forge.

The crucial parts:

Type: Fortunately the description below this field is pretty clear. We need an App Server since we want to host the whole Laravel site, including a caching layer.
Region: Here you should pick a server location that is nearest to you or your client.
Server Size: Depending on how big your project is or how many sites you want to host your technical server setup is crucial. Because this CMS is a flat-file system I chose a basic server with a faster NVME SSD. You can get an overview of all the pricing differences in their droplet calculator.
PHP Version: Here I chose PHP 8 because I like to live dangerously at the bleeding edge ;)

Everything else I left pretty much the same. For this project I technically won't need a MySQL Database but who knows what the future holds and I just tend to set one up so I won't have to do it manually in the future if I hat to use one.

That's it. Now hit "Create Server" and wait until Forge sets everything up for you. It usually takes a few minutes but you'll be notified via mail if everything is ready.

DNS Setup

If we visit the domain we want to set up the site (in this case devblog.adriangoldner.com) we will be greeted with some sort of browser Error. The browser doesn't know yet where to look if we type in the address. That's where we have to configure our DNS-Records.

Unfortunately, DigitalOcean can't register domains so you need a third company who does it for you. I've had a good experience with Namecheap but you can choose whichever you like.

One optional step could be to change the nameservers of your domain to the ones that DigitalOcean can use to manage your domain so you don't have to switch services each time you create a new subdomain for this project. At this time of writing you need to add these three custom nameservers where you registered your domain:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

Then, head over to DigitalOcean and create a new Domain at the "Networking" tab:

With that done the only thing left to do is to create an A-Record and connect it to your newly created server. DNS-Changes might take a few hours so give it a bit of time until you type in the address to your new sit in the browser's address bar.

If we are greeted with Forge's default page it worked 🎉. Now it's time to...

Create a new Site in Laravel Forge

After our Server is set up correctly and connected between Laravel Forge and DigitalOcean it's about time to create a new site and deploy the repository.

Creating a new site in Laravel Forge is as simple as entering the domain name and clicking a button...

Creating a new site with the click of a button in Laravel Forge.

... and entering the name of our repository.

Connect our repository with our newly created site in Laravel Forge.

Hit "Install Repository" and wait until Forge finishes cloning the repository.

Deploy 'n' Enjoy™

Before we can finally deploy our site we still need to change one thing: our deployment script.

Statamic-Peak has some great defaults. Head over to Forge, pick a site and enter the following lines into the "Deploy-Script" field:

# don't deploy if we just changed something on production itself
if [[ $FORGE_DEPLOY_MESSAGE =~ "[BOT]" ]]; then
    echo "Automatically committed on production. Nothing to deploy."
    exit 0
fi

# change dir, reset, pull & install composer dependencies
cd $FORGE_SITE_PATH
git reset --hard && git clean -df
git pull origin $FORGE_SITE_BRANCH
$FORGE_COMPOSER install --no-interaction --prefer-dist --optimize-autoloader

# Build them assets!
yarn
yarn production

# And finally clear & warm the caches
$FORGE_PHP artisan cache:clear # Clear the Laravel application cache.
$FORGE_PHP artisan config:cache # Clear and refresh the Laravel config cache.
$FORGE_PHP artisan route:cache # Clear and refresh the Laravel route cache.
$FORGE_PHP artisan statamic:stache:warm # Warm the Statamic stache.

# restart php if necessary
( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock

Now, click "Deploy Now" and wait for the magic to finish.

Congratulations! You did it! You just deployed a new site using Statamic, Forge & DigitalOcean!

Thanks for reading and until next time!