Initial Commit: Why I created Hack Cabin

5 minute read Modified:

Welcome to Hack Cabin, a JAMstack site. Learn about the site architecture and why it was built.
Table of Contents

Back in 2008 I started my first blog. Its original incarnation was a WordPress site hosted on Bluehost. I’ll never forget the countless hours I spent wrestling with WordPress plug-in updates, sweating my database back-up process, fighting the content editor to produce valid markup and, on at least one occasion, losing several hours of work as a result of clicking the wrong button somewhere. WordPress was complicated and it sucked.

WordPress was complicated and it sucked.

Since then, we’ve seen tremendous innovation making websites easier than ever to create and maintain, not to mention allowing them scale to the moon for mere pennies. No, I’m not talking about a series of hacks on hacks , but instead solid Web engineering practices which make the Web fun again.

Which is why I built Hack Cabin, which means “a secluded place for one to hack”.

Before I go any further I want to lay down the Hack Cabin architecture for you and explain a little about what makes it a JAMstack site.

Site architecture

Here’s a quick rundown of the stack:

Key Value
Generator Hugo
Theme After Dark
Hosting Amazon S3 + CloudFront and Route 53
Content editor Markdown written with Atom
Source control Gitea
Deployment s3_website
Backend Serverless

That’s the high-level. Now let’s briefly dive into each one to understand the advantages.

Generator

I chose Hugo for one reason alone. Speed and extensibility. Oh wait, that’s two reasons. But you get the point. Hugo is the only static site generator without any dependencies, and capable of generating up to 10,000 pages in 10 seconds.

Why choose a static site generator? Because static sites are the only reliable way to cache content in the browser, allowing pages to load faster than the blink of an eye, worldwide on just about any device imaginable. Just try and do that using a CMS or React site without tearing your eyeballs out, I dare you.

Theme

For years I’ve been using off-the-shelf themes made by someone else. Most have been free or open source, but they always felt foreign and never as close to home as After Dark, which I created and open sourced specifically to create Hack Cabin.

Besides its vaporwave appeal, After Dark allows anyone using it to hit PageSpeed 100 straight out of the box, without requiring tedious grunt work. It has the ability to serve up an entire page (including favicon) using a single HTTP request. And when you’re targeting mobile users, where individual HTTP requests can take upwards of 100 milliseconds, every little bit counts.

Hosting

In the past I hosted my websites on DigitalOcean as I thought $5 a month was cheap . Then I started using AWS S3 and CloudFront and learned, not only did I save the administrative headache of managing a Linux VM in the cloud, I could save nearly 80% on hosting costs using AWS over DigitalOcean. And with AWS I was able to pick up this domain name at a reasonable price using Route 53 in just a few short minutes.

I saved nearly 80% on hosting costs using AWS over DigitalOcean

If you’re not familiar with CloudFront, it’s simply a CDN like CloudFlare, only it gives you significantly more flexibility and power. Not only does CloudFront integrate well with S3, upon moving to it I saw AsiaPac traffic pick up like never before. 你好

Content editor

There’s little need to get into the awesomeness of Markdown and how elegant it makes writing for the Web, but I would like to touch on why I chose Atom over SublimeText. After using Sublime for five years it took a few pairing sessions with a younger developer earlier this year to help me see the light and make the switch. What with its stellar GitHub integration and sexy interface, Atom is just a damn pleasure to use—something I could never say about SublimeText.

Source control

One of the benefits of working with static websites over a traditional CMS is that content doesn’t get buried in some hard-to-reach database table. Instead, content is stored in plain text along with your code, allowing it to be version controlled – making post authoring, revising and editing much easier, and also helps prevent accidental deletion of content.

For several years I was using GitHub for source control, but I’ve decided to switch to Gitea after recently becoming aware of it . The immediate benefit I see to using Gitea is that it allows me to host my source code privately without paying the $7 monthly fee GitHub charges for hosting private repos.

Deployment

I learned about s3_website after reading a blog post from one of the founders of CloudCannon, a cloud-based content editor for Jekyll. I tried it out of need at the time, but holy shit I’m glad I did. Using s3_website makes setting up a website using S3 and CloudFront a command line affair. Once set-up, and combined with Hugo, I can generate the code for an entire website and deploy it to S3 and CloudFront in only a few seconds. Done and dusted.

Backend

I’ve never been comfortable managing backends. They’re complicated, they’re wasteful and they require a lot of maintenance. Whats worse, backends are typically decoupled from the front-end, giving you a chimera of a site to maintain and a major coordination headache due to the coupling. However, with Serverless and BaaS offerings like AWS Lambda the backend code can be checked in right alongside a static website and deployed with relative ease using Serverless. And I like easy.

Time to fly

Welcome to Hack Cabin, one of the fastest and most accessible websites on the planet. It is the 8th example to be added to JAMstack.org. I will use Hack Cabin to share technology articles, and dating and travel advice as I take to the skies as a Digital Nomad.


Want to create your own Hack Cabin? I’ve written a step-by-step tutorial on how to recreate this JAMstack architecture on habd.as. Enjoy!