Building a Cost-Effective Cloud Stack for Personal Websites

Running your own website doesn't have to drain your wallet. After nearly a decade of tinkering with blogs and various web projects, I've landed on a cloud service combination that balances speed and affordability pretty well.

If you're looking to build your own site without breaking the bank while maintaining decent performance, this setup might give you some ideas worth considering.

Understanding What Your Website Actually Needs

When you strip away the complexity, running a website comes down to two main components: domain management with DNS resolution, and servers that handle browser requests. The domain and DNS part is relatively straightforward, but the server side gets more interesting when you break it down by function:

Traffic handling and routing - Your gateway receives user traffic and forwards it to the right services. Think of it as the receptionist directing visitors.

Static pages - The HTML files and server-side rendering for your Jamstack applications form the backbone of your site.

Scripts and stylesheets - JavaScript and CSS files typically get distributed through CDNs on separate domains, which speeds up page loads and reduces dependency on your main server.

Media files - Images, videos, and other heavy assets usually consume the most bandwidth. These work best when stored in object storage and distributed via CDN.

Dynamic services - When your site needs interactivity, you need servers running API endpoints to handle those requests.

Dynamic services generally fall into two camps: stateless services that can spin up and down as needed, and stateful services that require persistent data storage. Some services also need database and cache support like MySQL, PostgreSQL, or Redis backing them up.

The cloud computing landscape has matured enough that you can find a service for practically any need. The trick is matching your site's requirements with the right combination of providers.

DNS and Gateway Layer: Keeping Connections Fast and Stable

For DNS, I went with DNSPod mainly because it maintains resolution nodes within mainland China and supports global server resolution in its professional tier at a reasonable price. The real advantage is its granular geo-routing capability. When you're running a site hosted overseas but want to optimize for mainland Chinese users, this flexibility beats what Cloudflare or ClouDNS typically offers.

For the gateway layer, the goal is simple: get as close to users as possible. This means using different routing for different regions to minimize network uncertainty and maintain stable connections. Your options include CDN services with dynamic request optimization, cloud servers with solid network conditions, or edge computing platforms like Vercel and Fly.io that optimize routing between their nodes.

I combine two approaches here. An Alibaba Cloud Hong Kong lightweight server handles mainland traffic, while Fly.io picks up everything else, with DNSPod managing the geographic split. The Alibaba Cloud HK server performs impressively well as of late 2023, keeping latency under 50ms across mainland China. Fly.io brings its global edge computing network to the table, letting me deploy services in specific regions while other areas get served through edge nodes that forward requests internally.

👉 Looking for a reliable CDN with global edge coverage and straightforward pricing?

For the reverse proxy itself, Caddy Server does the job beautifully. Whether on the lightweight server or Fly.io, simple configuration gets traffic forwarding working with automatic HTTPS certificate management.

Static Pages: The Foundation of Your Site

Most websites and web apps boil down to static HTML pages combined with scripts, styles, images, and audio resources. Hosting these static assets is pretty much the most basic requirement for any site.

Honestly, there's no shortage of good options here. Whether you choose Vercel, Fly.io, GitHub Pages, Cloudflare Pages, or just run your own HTTP server, they all work fine. Some services even provide edge nodes optimized for static page rendering.

I lean toward Vercel these days for both this blog and 0xFFFF Wiki. It's straightforward and convenient - push your code and deployment happens automatically. Hard to beat that for simplicity.

Static Resources and CDN: Spreading the Load

After browsers download HTML, they need to fetch scripts, styles, and images, which creates additional traffic. Gateway bandwidth tends to be expensive with less predictable access speeds, so it makes sense to separately cache these resources based on access patterns. This is where CDNs shine - they use high bandwidth and low costs to offload traffic from your origin server while improving user experience.

My main choices here are Bunny CDN for international traffic and Tencent Cloud CDN for mainland China acceleration with ICP-registered domains. The former offers excellent pricing and speed, while the latter provides better access experience within China. Speed improvement is really the driving factor for both decisions.

Media Storage: Handling User-Generated Content

Website static resources typically split into two categories. First, there's content that's part of your site's core logic, which you can prepare in advance and hand off to hosting services. Second, there's user-generated content like uploads and backend-processed images that accumulate during operations. This second type fits perfectly in object storage.

Personal webmasters don't have tons of great options. Amazon S3 pioneered this space but carries a reputation for being expensive. Chinese cloud providers offer COS and OSS, and there's Cloudflare R2 and Backblaze B2 among others.

Cloudflare R2 would be ideal with its zero egress fees, perfect for newcomers experimenting. But R2 requires pointing your domain's nameservers to Cloudflare's DNS servers, which conflicts with DNSPod's geo-routing strategy. Had to pass on that one.

After testing several options, Backblaze B2 stood out for its cost advantages. While it can't match Cloudflare's free bandwidth offering, pairing it with Bunny CDN works remarkably well. After two weeks of heavy use on the 0xFFFF main site, traffic only hit around 2GB, costing about $0.04.

👉 Bunny CDN integrates seamlessly with Backblaze B2 to optimize your media delivery

Bunny CDN actually partners with Backblaze B2, which streamlines the integration experience. B2's documentation includes helpful tutorials and articles comparing different CDN options, showing they really care about user experience.

Dynamic Services: Adding Interactivity

More sophisticated websites need backend services beyond static files. These backend services typically provide capabilities like dynamically generating HTML, responding to API requests that drive business logic, and creating resources on demand like images or downloadable files.

As mentioned earlier, dynamic services come in two flavors:

Stateless services work great on Fly.io, which deploys Docker images as Firecracker virtual machines across appropriate regions to minimize network latency.

Stateful services work better on dedicated VPS instances. I continue using the Alibaba Cloud Hong Kong lightweight server here since one machine handles modest business scales just fine. You've got plenty of alternatives - Tencent Cloud, AWS LightSail, Vultr, and Linode all offer solid, reliable options.

A worthwhile direction is making services as stateless as possible. Edge node deployment offers speed advantages, though you'll need to handle state sharing across regions.

Databases: Learning from Mistakes

I originally preferred running databases locally, but after accidentally losing forum data in one incident, I've become much more cautious. While improving regular backups is essential, I'm also considering handing database maintenance to professional managed services.

These services typically cost a fortune, but thankfully the internet provides low-cost serverless hosted database options. TiDB Cloud and PlanetScale offer free tiers that cover basic needs. The main drawback is higher latency from accessing databases over public internet, requiring solid caching strategies. Currently only Singapore and Tokyo data centers serve the Asia-Pacific region, so moving compute instances to Singapore might make sense while keeping gateway layers in place.

Sites depending on Redis for caching or databases also need backup and hosting plans. Upstash Redis looks promising, especially with Fly.io's integrated solution through their partnership.

If your site involves heavy SQL queries like blogs or forums, you'll still need local database deployment, making backups critical. My approach involves adding scheduled tasks to database containers that regularly dump MySQL data, compress it with gzip, and save it to dedicated object storage buckets. Duplicati works well for backup software, and I use Tencent Cloud COS for storage.

Wrapping Up

Finding the right cloud service combination takes experimentation, but focusing on what actually matters - speed, reliability, and cost - helps narrow down choices. Start with your core needs, test different providers, and adjust based on real performance data. Your users will appreciate the fast loading times, and your wallet will appreciate the reasonable monthly bills.