Blog tech stack

If anyone is curious, here's an explanation of the tech behind this blog. FYI, It's long and it's probably really boring to almost everyone reading this. But here it is if you enjoy that kind of stuff.

The Stack

The stack implemented for this site is the JAM stack.

I used a React framework to create this website - specifially a Gatsby template.

Gatsby has been attracting a lot of developers into its community. Traditionally, in Create React App projects, you build your HTML pages which is uploaded to a CDN and is distributed to the browser. API calls are made on the fly at run-time in the browser. Gatsby, on the other hand, is a static site generator which means your html pages are pre-built with API calls and are then uploaded to the CDN. This video does a nice job explaining how pages are built and delivered with Gatsby/Next.js/CRA.

Gatsby's documentation is quite solid and I appreciate the massive ecosystem of available plugins. However, I found the build times to be rather slow. Its use of GraphQL as the data layer seemed really complicated for what it needed to be and it just made debugging a cumbersome experience. I came across one person's post on their experience using Gatsby and I share a lot of the same feelings.

Overall, React/Gatsby is probably overkill for such a small blog. I just wanted to see what Gatsby was all about and (honest confession) I just really liked this template a lot (shoutout to the original author). So while I have my hesistations on Gatsby, it will do for now.

Web Hosting

For web hosting, I used Netlify in the beginning which was actually great to use. It handled CI/CD from git commits flawlessly and the free tier is pretty generous with really nice features like forms and analytics.

Only until recently I switched to Cloudfare Pages for image hosting reasons explained below. The sad thing is, while it looked really promising with all the great features from Netlify plus more, it has some serious problems with deployment builds. My builds constantly fail when picked up from my git commands and I have to re-build 4-5 times again and again for it to successfully build. (Yep, so even uploading this post will probably involve me re-clicking the "try re-building" button repeatedly). It seems to be a common issue reading through their discord channel. I raised the issue again so hopefully someone will reach out.

Cloudfare Pages is a pretty recent product (launced Dec 2020) so I will have some patience and give them some time to make it better. I do have other sites hosted on netlify but I won't be moving over until they fix their build issues.

Image Hosting

Now for the interesting part - image hosting.

I learned a great deal about hosting and serving assets through standing up this blog. In the end, like all things nothing is free and someone is paying for all the free things you get over the internet.

For this blog I plan on posting a good amount of photos/media on here so I needed a cheap and scalable way to host my images.

The very first thing I thought of was actually just storing all my images in my git repository (yep.. lol). This would actually work if I rarely posted images but after seeing myself trying to deliver 10-20 photos per post, this wasn't going to be manageable. The git repo would just massive and I think github's maximum repo size is 10GB (and 100MB single file size limit).

Ok.. next, I considered using existing photo services like Google Photos and Flickr to host my images. This could also work, but it's kind of a pain trying to get the actual endpoint of your image in these services. A lot of times they just provide a share link that directs you back to their service. Also for most of these services using them for image hosting for your applications is pretty much discouraged (and actually may be a violation of usage). Lastly, it's pretty common for these services to change their storage limits - google photos used to have unlimited storage and flickr's limit used to be 1TB. But now google limits storage for each account to 15GB and Flickr limits their free storage to 1,000 photos. (Yes, the classic "free, unlimited!" now, but we're going to sell you subscriptions once you're locked in - which.. i mean, their job is to collect data and make money right?)

Imgur? lol. Can you sense the desperation

Ok, at this point I knew I had to find a proper cloud storage provider.

First up, Cloudinary

I actually started out with Cloudinary to host images for the first couple posts under their free tier - which they provide you with 25 monthly credits (on rolling basis). One credit is worth (1k transformations or 1GB of storage or 1GB of bandwidth). This actually worked out nicely. The really nice part of Cloudinary is all the on-demand image transformations and optimizations that you can do aka "programmable media". So for example, if I ran a online clothing store selling 50 different colored t-shirts, I don't have to have a stock image of all the 50 different colored t-shirts in the cloud storage. Instead, I would store just a single stock image of the t-shirt in the Cloudinary database and apply their API to dynamically generate different colored t-shirts to serve to users.

Cloudinary is actually pretty cool. Under the hood, I think they actually use AWS S3 served with Fastly. But the actual product is of course their API - the ability to transform images on the fly.

The reason I decided to step away from Cloudinary and look for an alternative was I just wanted more bandwith. I also didn't really utilize their API - since after all all my images are going to be static.

Enter Backblaze.

After going down a rabbit hole, I found the Backblaze + Cloudinary combo.

Ok, so Backblaze is a cloud storage provider that gives you 10GB of free storage. Anything past that, it's $.005 (half a penny) per GB/month. AWS S3 charges $0.021 per GB/month. That makes Backblaze more than 4 times cheaper than S3.

But that's not the best part. Backblaze announced a few years ago that downloads to Cloudfare is free. As far as I can tell, that means as long as I'm serving from Cloudfare's CDN, I'm not paying for any bandwidth. All I have to pay is $0.005/GB past the initial free 10GB of storage.

Wait. What..? That is insane. So people can spin start spinning up Backblaze B2 buckets and start hosting media for their services through cloudfare for basically nothing? This seemed way too good to be true so after a lot of seraching I found this reddit thread. TL;DR: Cloudfare has updated their terms of service earlier this year to stating "limitations on serving non-html content". Section 2.8 says "Use of the Services for serving video or a disproportionate percentage of pictures, audio files, or other non-HTML content is prohibited, unless purchased separately". If they determine a user has breached this section, they will restrict/suspend the account.

Ok.. so.. it seems like for my use case it's fine. I'm not serving video nor am I serving huge amounts of images on a website not many people are going to visit. Yay.

For the short amount of time I've used it, the Backblaze/Cloudfare setup has been working fine for me. I noticed just a tad bit more latency than Cloudinary, but it sounds like I don't have to worry about bandwidth anymore and I probably will never have to pay for storage.

Would I recommend it for small projects? Yes. If you're just making a small website for personal stuff, you don't even need a CDN. Backblaze storage is also still a lot cheaper than S3 or other counterparts.

Thoughts

So yeah, that's the basics of this blog's behind-the-scenes. I learned quite a lot about content delivery and media hosting - which I don't really think about much in my day-to-day software dev job. The whole experience of starting from having nothing to building somewhat of a scalable solution (although not perfect) also gives me confidence to build more things.

If you have any questions on any of this, let me know and I'd be happy to help. (I would assume you know how to contact me if you're reading this lol)

...maybe I will try to integrate a contact form on here.. hm...