"as simple as possible but no simpler" - (not Albert Einstein, probably)
Pure HTML + CSS, with the CSS in the <head> or inline in each html tag... this is a fine way to get something going. And then when you have two pages, you pull the CSS out to a separate file.
But once you start making any site which has multiple pages of the same format, you want some kind of template system with includes and a (static page) generator.
If your pages are data-driven, then you might want a programmable site generator which can ingest the data and spit out pages.
But if your data is "live", you end up needing per-view page creation, which is at minimum PHP realm (and certainly leaning into modern web framework with running servers realm).
I recently built a pro-bono website for a hobby of mine. The site is a dance promotion and event site, and the owner is a very non-technical dance teacher. It uses Eleventy (https://www.11ty.dev/) to generate a static site on Netlify (free tier), and it has some custom build code which pulls data from a Google Sheet which I have setup for the teacher to use to define upcoming events. It took a good dozen hours to build, but now it works like a charm while costing nothing to operate or manage. Now having built this, I have discovered a great and powerful sweet spot between absolute bare minimum and Rails/Phoenix/Django level.
Yes, even OP ends up using two libraries: Jinja for templating and Tailwind for styling. It’s the happy medium, as you say, between bare HTML + CSS and full-blown Django/Phoenix/Rails + Angular/React/Vue.
I tend to refactor on two, but I've heard that letting DRYness lapse until three tends to be the sweet spot in terms of likeliness to break even in effort. Although I guess pages per site is almost guaranteed to hit 3 anyway, whereas in general a block of code being used 3+ times doesn't necessarily have that same likelihood.
Have you open sourced this or found a similar project?
Does it make an API guy to the google sheets api client side to populate the data, if so is there a caching layer or does each client get a fresh copy.
I have not open sourced it. I probably wouldn't go to that trouble, but I might write a good blog post illustrating it.
The Google Sheet has a script associated with a button which the sheet editor uses to "publish" the changes. That triggers a rebuild on Netlify, and the build does the sheet data fetch. This was better than automatically triggering the build on sheet save, since the save happens within a second or two of every change.
Netlify has an unpublished URL trigger to force a rebuild, and that URL requires no authentication. Thus, one must be careful about making that URL public. But worst case scenario, the free tier Netlify build credits get used up for a period.
Pure HTML + CSS, with the CSS in the <head> or inline in each html tag... this is a fine way to get something going. And then when you have two pages, you pull the CSS out to a separate file.
But once you start making any site which has multiple pages of the same format, you want some kind of template system with includes and a (static page) generator.
If your pages are data-driven, then you might want a programmable site generator which can ingest the data and spit out pages.
But if your data is "live", you end up needing per-view page creation, which is at minimum PHP realm (and certainly leaning into modern web framework with running servers realm).
I recently built a pro-bono website for a hobby of mine. The site is a dance promotion and event site, and the owner is a very non-technical dance teacher. It uses Eleventy (https://www.11ty.dev/) to generate a static site on Netlify (free tier), and it has some custom build code which pulls data from a Google Sheet which I have setup for the teacher to use to define upcoming events. It took a good dozen hours to build, but now it works like a charm while costing nothing to operate or manage. Now having built this, I have discovered a great and powerful sweet spot between absolute bare minimum and Rails/Phoenix/Django level.