Resources I used for making this quarto website

Published

May 7, 2024

“The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it.” ― Terry Pratchett, Diggers

As with any new project, one of the best ways to (productively) procrastinate is to decide to learn some new tech. I’ve been putting up wordpress websites since the beginning of time and I am kinda bored of it. Most of my writing is in python, markdown files and jupyter notebooks, and so i figured a markdown and code friendly publishing platform would be a good thing. I looked around at the billion static site generators on Jamstack’s list, picked the ones that were python friendly and tried out Pelican, Lektor, Nikola, Hugo, Gatsby and skipped Jekyll because I had tried it out months ago.

All the tested SSGs were fast and easy enough to put up a basic website. But boy when it came to customizing the theme, adding special features and even something as simple as search, the experience was not fun at all.

I finally settled on Quarto because

  1. Frank harrel’s excellent biostats site is using it
  2. Bootstrap seemed like a relatively tameable beast for themeing
  3. Pretty much all the guides for it out there were by scientists 1 of different kinds which meant dealing with Jupyter notebooks and bibliographies and rendering code and graphs and a bunch of other things that nerds care about are taken care of.

a pie plot titled An inaccurate and inappropriate pie plot of time spent on different activities the plot shows that for x time spent on writing 10x was spent on plaing with colors and theme tweaking. less than these but more than writing is also spent on testing SSGs and github pushpullhell

Along the way, I discovered several useful tools and blogs that were of great help and here they are.

Overall, I probably spent the most time on Quarto’s documentation, which, while sparse, are very good for setting things up and learning the basics.

Marvin Schmitt’s template and detailed posts about how go about doing everything from setting up a site and structuring it were the most help inititally

I ended up with a refresher course on CSS’s grid system, and overall for boostrap the best guide was their website. A huge number of seemingly bot generated websites exist for bootstrap theme customization, but boy they suck.

Ella Kaye’s website was a huge help. I’ve learned a lot from her config files on the github repo

Silvia Canelon’s detailed documentation of how she ported from hugo was super useful in understanding the quirks of the system

Sam Csik’s guide on how to set up a blog is what I have used to set up this blog

I admit I spent an inordinate amount of time on this palette generator

I used the Huemint bootstrap theme generator to generate the css/scss for colors

Finally, Susie Lu’s Viz Palette app helped me with figuring out what color combos were best for readability and for those with visual problems.

PS: I went down a rabbithole of designing perceptually uniform color palettes but then I realized, many moons later that while we need to use these for designing visualizations, a website’s color design doesn’t need to be perceptually uniform.

Footnotes

  1. I am a data scientist, which is not a scientist at all, but an engineer of sorts. The confusion continues.↩︎