From Blogdown to Quarto


August 30, 2022

When this blog was created in 2018, it used the paradigm of R with blogdown to GitHub through Netlify with Hugo to continuous deployment. I set up a custom domain, found a Hugo theme I really liked. And then, very quickly, everything went wrong.

The theme wasn’t updated and failed with newer versions of Hugo. Then, blogdown itself had issues with Hugo. After limping along for a while, I tried switching to a simpler theme, previously called Hugo Academic that worked better with blogdown. Hugo academic then got turned into a complicated theme called Wowchemy, which didn’t play well with blogdown (again).

Around this time, the folks at RStudio probably also realized that it’d be a good idea to have a theme that didn’t keep breaking, and Alison Hill and others created the Hugo Apéro theme, promising better compatibility with blogdown. For a year or more, I procrastinated at transitioning to the Apéro theme, but further development of Apéro seemed like a low priority (and Alison Hill left RStudio).

Enter Quarto, an “open-source scientific and technical publishing system built on Pandoc”, promising to be language agnostic (I work mostly in R, but like Julia, and occasionally resort to using Python) and with more flexible and integrated output support.

So, Hello World again, this time via Quarto!

The migration from blogdown to Quarto was relatively painless. Resources I found helpful:

I initially foolishly tried to recreate elements of the tranquilpeaks Hugo theme from scratch, but it was far less painful to use a default theme (litera) and tweak it a little bit.

For posterity, a summary of steps

  • Create a GitHub repo first (private, because I’m worried I’ll accidentally post protected health information)
  • Then create a new RStudio project, via Version Control -> Git
  • Copy in default Quarto blog files and push to GitHub
  • Netlify -> add new site -> import an existing project -> connect to GitHub
  • Back to GitHub to give Netlify access to private repo
  • In Netlify, deploy to main with base directory _site and no build command (not using Hugo any more)
  • Change site name
  • Try incredibly unsuccessfully to create a custom theme from scratch
  • Use litera default bootstrap theme and customize lightly instead
  • Remove Netlify DNS connection to old site and attach to new site

For migrating the small handful of old posts…

… I was lazy, and Quarto let me.

  • .md and .Rmd files were simply copied over
  • YAML headers just needed slight editing
  • posts now get their very own folders, so image files can now be kept together (much better!)
  • most everything was rendered by Quarto without issue
    • however, in the future, probably better NOT to have executably code running machine learning on half a million rows of data, in a blog post. Just save the output and use static .md

CSS / theme issues

When I set the title banner background to a dark gradient (a little tribute to my PediTools website, although the site’ index.qmd can change the title text color:

title-block-banner: peditools_gradient_horizontal.jpg
title-block-banner-color: "#e9ecef"

… setting the title block banner text color does NOT change the subtitle color, which remained illegible. The subtitle color had to be changed in styles.css:

.quarto-title-block .quarto-title-banner .lead {
  color: #e9ecef;

No real point in blathering on more – just wanted to signpost the migration from blogdown to Quarto.

(Photo by Movidagrafica Barcelona: