Free static hosting with server stats

Published:
Tags:
dns GasPumpr html jamstack
Reading time:
About 4 min

On my migration from Github Pages to Cloudflare for free static hosting that includes some minimal server-side analytics

Backstory

For some time now (narrator: apparently 11 years, wow!) I've run a small side project at gaspumpr.com to help calculate the cheapest gas to buy for my car that accepts up to E85. It is a super lite "app" (github source), just some html + css + a tiny sprinkle of javascript to do some minor calculations, published to a Github Pages free static site.

gaspumpr.com screenshot

I enjoy minorly tracking the page hits just to get a feeling for how much usage it gets (not much) but also to see occasional spikes and go figure out why. (Like that time the governor of Nebraska used it to promote their agenda without realizing the calculations kind of defeated their own idea, but hey any publicity is good publicity! Or when the NE Corn Board published it without reaching out)

Tweets about the NE Corn Board and Governor sharing gaspumpr.com

Static Site Options

Until recently, I used Google Analytics to collect the hit counts. Back 11 years ago it seemed pretty great to get in depth stats so easily, even if they were client-side collected. Jump ahead though and I don't like the client-side tracking piece for reasons.

So I went out looking for free Static Site (aka HTML/CSS/JS, aka Jamstack, aka boring website) hosting solutions that provided minimal serverside analytics.

Github Pages

For years it has worked like a charm, but after a quick search, Github Pages does not provide any server-side hit counting stats. Any solution would require a 3rd party client-side library.

Surge.sh

My goto testing/demo site publishing mechanism is surge.sh. It is great -- seriously check it out! npm publish a site in seconds. But nothing to track server-side stats, so the search continued.

Other options

I stumbled upon this great Free static hosting with server-side analytics blog post from Val in 2021 that includes a few other options in the category, including Netlify, Render, Google Cloud, and Vercel. Val gives a great description of using a combination of Vercel + Google Cloud VMs logging integrations. This approach seems to fit well, however being my lazy self I was looking for an even simpler solution...

Cloudflare

To think I'd end up at Cloudflare is more than surprising to me. I think of Cloudflare as the "enterprise" CDN solution, which they definitely are. But somehow I never noticed their solo developer solutions and free pricing tier!

Cloudflare Pages -- is basically their Github Pages clone. Point it at your github repo and it'll build and deploy. Worked easily for my gaspumpr HTML site. They also handle minor build steps for the various popular javascript frameworks.

Cloudflare CDN (DNS + ReverseProxy) -- this is what you normally think of for Cloudflare. The CDN fronts your site as a caching layer, and as such can provide minimal stat analytics from the server-side, exactly what I was looking for! And surprisingly free for small projects!

24 hour Stat graphs from Cloudflare for gaspumpr.com 

Migration from Github Pages to Cloudflare

This was broken down to a few steps for me. Your journey would be similar though each setup is so unique I'm sure there could be small differences and side quests along the way.

  • Publish to Cloudflare Pages
    • Setup/cleanup the git repo
      • I wanted to publish from a `main` branch instead of the `gh-pages` branch, so did a little branch reconfiguring here.
      • Remove the CNAME file. I think I had the cname file to get the custom domain name working on github pages. After some trial and error I realized it was causing cloudflare deploy to not show up.
    • Link Github in Cloudflare pages dashboard
      • Just a couple clicks to point at the github branch, and a build and deploy kicks off and publishes!
    • Setup custom domain in cloudflare dashboard
      • It listed the small steps needed to update my domain name provider with DNS entries for Cloudflare
      • Took a few minutes for DNS caches to reset then gaspumpr.com was back up and live
  • Setup Cloudflare CDN
    • In the Websites section of the Cloudflare dashboard, setup a few config things to point to gaspumpr.com. 
    • This was pretty simple since Cloudflare Pages was already hosting the site.
    • Note: I could have kept everything on Github Pages and simply pointed the CDN in front. However it seemed so easy to just move over to Cloudflare pages that I didn't even look into it much.

Wrap

That's it! 15 minutes of setup and now I have beautiful server-side non-intrusive stats to view whenever I please, and no client-side JS library was needed in the process.

Cloudflare CDN + Pages for the win