This is the current version of the website for the podcast https://www.hearthisidea.com. It was made by me.
This is a static site built on Eleventy (11ty) and hosted on Netlify, with Tailwind CSS and a small number of additional plugins. The previous version of the site was built using Gatsby JS.
You're welcome to use this site as a starter for your own site or blog, but note that it's incomplete, poorly documented, and not built for legibility.
Still, to run the site locally:
- Clone this repo
- Run
npm install - Run
npm run dev
Some unordered notes on making this site.
I started using GatsbyJS around 2019, when it was a popular option for small to medium static sites. Since then, it has grown to become a more comprehensive and powerful tool, but also a more complex one. I get the feeling it is now focused on sites maintained by full-time developers, or teams of developers.
A few particular frustrations began to accumulate:
- The only way I could figure out how to get a few things to work (like LaTeX compilation and the rating forms) required plugins which hadn't been updated in a while, so relied on legacy versions of
react. Sonpm installwould throw an error without the--legacy-peer-depsflag, which felt... sketchy. - Gatsby itself has a ton of dependencies and is very heavy (about half a gigabyte). It was therefore a pain to clone and update, and many dependencies would throw security errors.
- Sometimes my local development environment would simply break, and I'd be sent off on a multi-hour quest to figure out what arcane problem with my version of
Gatsby-clior whatever was causing it. - My frustrations were partly confirmed by Gatsby's waning popularity on the 'State of JS' survey.
Why switch to 11ty? I spent some time looking for static site generators which were simpler, and better suited to a more novice developer building a site with fewer fancy requirements. I settled on 11ty because it has a decent plugin ecosystem, it's built around JS, which I know relatively well, and it seems to have a very friendly support community. So far it's working out well — it feels pitched at just the level of simplicity vs capability that I want. I might switch to something like Next in the future, but I don't currently see a reason to do so.
In the previous version of this site, I hosted images in the repo itself. But this felt wrong, since in order to run the site locally, you needed to download the best part of 1GB of data.
I found it surprisingly difficult to find a solution for hosting images using Eleventy that allowed me to (i) process them with eleventy-image, (ii) use the standard Markdown image syntax rather than some kind of custom shortcode, and (iii) didn't feel too kludgy or inefficient. I couldn't find a way to get all three, which is strange, since I thought many people would be in my predicament. The approach I went for was to host my images on a Netlify Large Media setup (using Git LFS); and then Eleventy would download, process, and cache the images. I forfeited (ii), since I can't get this to work with the standard Markdown image syntax.
This still feels a bit fiddly, even if it weren't for the fact that Netlify recently discontinued their Large Media offering, so my setup will probably break in months to years. I plan to switch to Cloudinary, and maybe get Cloudinary to do all processing server-side, bypassing netlify-image.
Any ideas on this front greatly appreciated!
I installed Netlify CMS to give a way to edit the site without directly interfacing with git.
It seems to work quite nicely (though adding images remains a kludge and doesn't play well with the media interface, as mentioned).
I was intimidated by how to add a dark mode, but it wasn't so tricky. Tailwind supports dark modes well — the trick is to toggle a .dark class on the top-level <html> element (using JS), and then you use the dark: modifier Tailwind gives you.
In my tailwind.config.js, I added the colours from [Steph Ango's] delightful(https://stephango.com/) Flexoki colour scheme.
Comments, questions, and pull requests are all welcome!
