Tech Stack Retro (2021)
Also, hello (again)!
It’s been almost 4 years since I last touched anything to do with my personal site, with the good old excuse of laziness, work, other stuff to do, no stuff to do, and trying to figure out how to be a (barely) functional adult in this world.
Since that time, tech has marched on, and I thought I might do a bit of a
retrospective on how my chosen tech stack’s held up in terms of achieving my
original goal of creating an online presence in the most penny-pinching
cost-efficient manner.
Goal recap (optimizing for laziness and my wallet)
As a reminder, the original goal of mine 4 years ago
was to hustle leverage as many existing free services as humanly possible due
to me being a lazy cheapskate efficient and frugal uni student.
- Maintenance burden should be 0- if I do absolutely nothing to maintain this, everything should continue to Just Work™
- Everything must be free, or as close to 0 as humanly possible
- Optimizations and extensions should be simple, easy, and intuitive
Constraints
- I do want the ability to have the site versioned, so if I ever need to, I can revert back to an older version of a site easily
- I do want my content to be automatically optimized, so it can be shared correctly on Facebook and show up as a rich snippet on Google
- I do want solving for scale to be trivial, ideally in a way where it’s simple to add in the ability to deal with theoretical spikes in traffic
- I do want custom domain emails, so I can send and receive emails from [email protected] in Gmail without having to think about it
As everybody knows, your solution to a problem is informed just as equally by what you’re not solving for, as much as it is by the problem itself.
- I don’t need full CMS capabilities, or the ability to have dynamic backend functionality for my online presence (though if I do in the future I’d like for it to be easy to add in)
- I don’t need commerce or shopping capabilities
- I don’t want to have to muck about and style my site from scratch- using and customizing a pre-built theme is fine, but CSS without guide rails hurts my very smooth brain
Tech Stack Architecture
Here’s what the network request looks like from a user
The thing to note here is that there’s nothing backing the webhost here- there’s no database or microservice backing it up, since the entire website is statically created at build time, and simply uses Github Pages to serve its content.
To actually update the content, the developer user flow used to look like this (note that everything in this diagram is automated):
Now in 2021, it’s been consolidated a bit but the general approach is still the same
Tech Stack Comparison
Service | Service Provider (2017) | Service Provider (2021) | Cost Per Annum (2017) | Cost Per Annum (2021) |
---|---|---|---|---|
Custom domain | Cloudflare Registrar | $10.87 USD | $8.03 USD | |
Custom domain email | Mailgun | - | $0.00 USD | $0.00 USD |
Website hosting & Continuous Deployment (CD) | Github Pages | - | $0.00 USD | $0.00 USD |
Continuous Integration (CI) | Github Actions | $0.00 USD | $0.00 USD | |
Static site generator | Hugo | $0.00 USD | $0.00 USD | |
Content Delivery Network (CDN) | Cloudflare | - | $0.00 USD | $0.00 USD |
Tech Stack | Total Cost Per Annum |
---|---|
2017 Tech Stack | $10.87 USD |
2021 Tech Stack | $8.03 USD |
- In both the 2017 and the new 2021 system, the general format is still the same, wherein we generate a static site and use GitHub Pages for deployment
- In both systems, we gain a lot of benefits from this architecture:
- There’s no server or services that I need to manage
- Scaling horizontally is as simple as fronting the static content with 1 or more CDN or any other edge server
- Things are fast since everything is pre-computed, and the only bottleneck to painting content for users is literally just the network.
- Development cycle for new content is trivial, since it’s just “fire and forget” (or in this case “push and forget”).
- Therefore, in our new 2021 system, we still retain all of our benefits from
the previous 2017 system, with three major benefits:
- Modernizing the tech stack: By using Hugo to template our site, and gain a huge speed boost in both developer productivity and in site generation times (previous times were around 30s, I’m now generating this site in ~150ms)
- Lowering ongoing costs: By using Cloudflare Registrar, we can avoid having to pay any additional costs every year to the domain name registrar, since Cloudflare has gotten rid of adding in a margin for their DNR system.
- Keeping to our principles: I used to love TravisCI, before they were acquired by a private equity firm. Ever since they drove out all of their best talent, I knew the writing was on the wall for them. With their recent large-scale security breach in which Travis has followed none of the proper disclosures for, I took this tech stack overhaul as an opportunity to migrate from TravisCI over to GitHub Actions, which has the additional benefit of also modernizing the tech stack a bit.
At the end of the day, thanks to our tech stack selection and architecture, we have a publicly-accessible website that is functionally free, except for the annual domain cost.
Going more in depth on swapping out tech stacks
If anybody reading this would like more details on what the process of migrating my tech stack over looked like, I go into more depth over in my 2021 tech stack migration guide.
Conclusion
- With this setup, I’m now primed for being able to write a lot more frequently than before. Or fall into the trap of never writing a blog post again until I feel guilty enough 4 years down the line, only time will tell.