Sunday, February 4, 2018

Hosting a static site over HTTPS for free

I own the domain brunogarcia.com for over 10 years now. The use I have of it is basically an e-mail address and this blog which for years I didn't post new content to.

Yesterday I decided it was time to add a landing page to it.

With the amazing artistic skills I possess, I sat in front of the PC and spent more time than I'm willing to admit thinking of what to do and messing around with HTML and CSS. After a lot of back and forth I deleted any framework from it and the result was 1 image, a favicon and 5 links (sigh).

I have no intention of making profit from my art so I've published my favicon via Creative Commons.
Feel free to use, redistribute and make lots of money from it.

At that point I had a couple files to publish.
As a .NET guy, I started off considering Microsoft's Azure. I've hosted stuff there for free before. That was when I used it for the first time back in 2011 or 2012 when they had a Silverlight portal. There were not many features (compared to now) but it was straight forward to host a .NET app.
Azure grew to an amazing cloud service with so many options and amazing (and slow) portal to configure everything.

This time though, all I had was just a handful static files. I didn't need an app server!

I couldn't find a way to host at either Azure nor Google Cloud, for free, a static site under my own domain so I could use Let's Encrypt and have a free certificate. There were options only using CNAME but that was not an option since the TLS certificate would invalidate.

After a bit of a research I discovered Firebase. Super simple setup. The portal just walks you through. Free hosting of static files and a nice nodejs deployment tool that you can pull off of npm. It allows you add your own domain with TLS. Easy redirect from HTTP to HTTPS. It just took 5 minutes!

After that I decided to check out Cloudflare. Again super easy to setup. Fast and free and again with a valid certificate and all traffic through HTTPS. With a single rule I was able to enable caching of the HTML file too. To hit the back end directly, bypassing Cloudflare, there's a single button: Enable development mode. That changes the DNS records from Cloudflare servers directly to Firebase. It's virtually instant too.

Another cool thing about Cloudflare is the Overview page. I don't have 24 hours of data yet so part of the analytics is empty but I have some DNS statistics. Including Top Traffic Origins:




The only problem I had was that by default I had an endless redirect! It was quick to find a solution though which was setting via the Crypto menu the Full mode instead of the default Flexible. That means that Cloudflare will contact the backend (Firebase) via HTTPS only instead of hitting the plain HTTP, which returns a redirect to HTTPS and hence the endless redirect.

Finally, I've pushed it to GitHub, which serves as my personal backup.

It's worth noting that at this point another option was to use GitHub pages instead of Cloudflare. Especially since I'm pushing the files there anyway. One limitation GitHub pages have is that you can't use your custom domain with HTTPS. But that's done by Cloudflare unless I enable development mode.

It's nice to have https://brunogarcia.com returning a couple of tiny static files without having to pay for it.

Big Thanks to Firebase, Cloudflare and also Optimizilla which I used to compress the image, Fontastic for creating icons bundle and favicon.cc to allow me showing off my artistic gift.

Looking forward to dive into the paid features they offer with a real application!

No comments:

Post a Comment