New Blog! - Creating & hosting a static site for FREE on Vercel with Statamic

Long time no chat! Personally, I've been quite busy. My wife and I immigrated to the Netherlands earlier this year and it's been a lot of work getting used to everything and settling in. I won't bore you with those details in this post, but needless to say, not a lot of time for blogging. Until now that is!

As a consequence of the move, I took a pretty big pay cut. The economy is also not doing so hot around the world so I was looking at our budget and trying to see where I could save a few bucks. While it's not a lot of money, I do have a few Digital Ocean droplets that are hosting pretty static-y stuff; mostly WordPress, where the only real dynamic part was accessing the admin panel to write new content. To save some money, I decided to start transitioning these over to static sites that could be hosted somewhere for free/cheap, with Github Pages as a last resort. I also used this as an opportunity to learn some new tools.

Enter Statamic

I've known about Statamic for a long time. I explored using it as a CMS for a marketing agency job I had about 5 years ago, but it just didn't work out. At the time, I wasn't too familiar with Laravel, and client projects needed to get done and out the door so time was limited. That said, the seed was planted. I casually kept an eye on the project. I remember the excitement around the Bard editor announcement, and I even installed Statamic locally to test it out. The promise of a fluid writing experience with structured data to back it up was magical for me as an ACF zealot. However, I was working on other things and didn't really have a chance to dive in, until now!

Getting the project installed locally with Valet was super easy. I used the Statamic CLI to scaffold out a new site using the fantastic Peak starter kit from Studio1902. With a few minutes, I had a project with Tailwind and Vue that I could experiment and play with.

Now, for those of you active in the Statamic scene, you'll notice I didn't experiment much visually. Tweaked a color mostly! But I'm excited for the flexibility I have moving forward. Editing my old WordPress blog wasn't too hard, but the inertia of nothing had caused stagnation in my motivation to tweak and play. Not to mention, I was using a default theme with an existing design, so making modifications would have required a child theme and blah blah blah. I own all the frontend code now, and that feels good!

Migrating Content

Admittedly, this part is pretty boring. I only had about 40~ posts on my old blog, so in the end it made more sense to manually copy and paste them one at a time into Statamic. It took me about an hour to migrate all of them, including images. Some of the features, like nice code block highlighting and oEmbeds didn't carry over, but I'm confident I can bring those back myself with a little effort.

Luckily, the copy/paste experience from Gutenberg worked pretty well with the Bard based blueprint of my new Posts collection, and for that I'm grateful.

Free Statamic Hosting with Vercel

Now, like I mentioned earlier, my goal was to save some money and shut down some dormant DO droplets, but my original plan was really to move the sites to Statamic and host them myself on a different VPS that I actively use for Laravel-type projects and experiments. The reason I didn't just migrate the WordPress instances was due to the relatively higher resources required from WP. Automatic plugin updates, emails, etc was just too much for something that only I ever use and hardly changed.

As part of the move to self host, I was reading the deployment docs for Statamic and noticed the Static Site Generation (SSG) option. I already knew that services like Vercel and Netlify can host static sites and even push them to "the edge" so it seemed like a cool way to dip my feet into that ecosystem, try it out, AND host my blog! Win win win! After a little tinkering, here's what I ended up doing.

First, I downloaded the Vercel CLI tool to access my account from my local machine. Essentially, this allows you to link a directory on your computer to a site within your Vercel account and deploy the directory at your convenience. Next, I have a small bash script that runs the Artisan SSG command, compiles my production assets, and then syncs with Vercel. In the future, I think I'm going to see if I can get this working with a Github Action instead. This means I will still write new posts locally, but publishing will only require a git commit instead of waiting on compilation and a deploy from my machine.

To get this working smoothly, I did have to tweak a few things.

First, I needed to modify the SSG config for Statamic. Besides changing the base_url, I also added the Vite build folder from the public_path() directory to the copy section in the ssg.php config file. Since I am essentially the CI pipeline, this needed to be added to files that the Vercel CLI was going to copy. Originally, I tried having Vercel build the assets, but I was having issues and decided this wasn't too much extra effort. Thankfully, Vite is BLAZING FAST 🔥 at generating assets, especially for my tiny site with almost no dependencies.

Next, I had to tweak the Vercel config for my project. Below you'll find the settings key from my .vercel/project.json file.

"settings": {
    "createdAt": 1668468740906,
    "framework": null,
    "devCommand": null,
    "installCommand": null,
    "buildCommand": null,
    "outputDirectory": "storage/app/static",
    "rootDirectory": null,
    "directoryListing": false,
    "nodeVersion": "16.x"
  }

Notice the storage/app/static output directory. That is the default location for the SSG package, so if you tweak something, that value will need to be changed first. I also set the install and build commands to null to prevent Vercel from trying to build the Vite assets again.

I mentioned earlier that I had a build script. Here is that for your convenience!

#!/bin/sh

# ./build.sh in the root directory of the project

# BUILD STATIC SITE
php please ssg:generate

# Build assets
npm run build
vercel build --prod

# Deploy to Vercel
vercel deploy --prebuilt --prod

After writing a new post, I open a terminal and run ./build and everything magically just works*.

Caveats

There are a couple downsides that I might address. Some I've mentioned already, like needing to run the build command at all rather than have it deployed from a git commit. I am a little bummed that I can't login to the write new posts remotely and publish them without my laptop, but I can live with that one I think.

I put an asterisk at the end of the previous section. For some reason, the Vercel CLI is a bit buggy on my machine and doesn't properly stop running after uploading the site. I think something happens at the end of the process right before the command terminates and it keeps running in a loop. I know this because my Vercel dashboard shows 5-8 different deployment actions every time I run it. Luckily, it times out on its own at some point and the extra queued deploys don't break anything. So instead of the command running for ~15 seconds, it runs for about 2 minutes until the timeout is triggered. At that point, I'm off reading Hacker News or Reddit so I don't care much. Hopefully it's a bug that will get ironed out in the future.

UPDATE: I've updated the deploy script to "prebuild" the required files and use tgz compression during the build step which seems to fix the weird hangup error. I'm not sure why it works but after some digging, I found a closed Github issue with more information. https://github.com/vercel/vercel/issues/6979

I'm also now at the whims of Vercel and their free tier. Recognizing that, I think their track record is proven well enough for now and if I do need to migrate, I can either host the files myself or use Github Pages for another free option.

Conclusion

Overall, I had a lot of fun learning about Statamic. I'm excited to build some other small projects with it over the coming months and dive deeper into the ecosystem. It could be a nice way to make a few extra bucks while I'm sitting at home not actively learning Dutch! 😉

I want to give a special thanks to Rob de Kort, the developer behind Peak, the starter theme I'm using. When I mentioned trying out Statamic, he was encouraging and offered his to answer any questions I had. As a bonus, he's also a Dutchie, so I owe him a beer in person now! 🍻

If you have any questions about my setup or the process, feel free to reach out on Twitter (if it site still exists when you are reading this!) @DaronSpence or you can find my email address on the Contact Page of this site.

✌️