How to add some personality to your Quarto Blog

quarto
A few of my favourite bells and whistles
Author

Daniel Tan

Published

September 20, 2022

Start from the basics

The basic Quarto blog covers a lot of ground. Here is a detailed walkthrough of how to build a blog with Quarto conducted by Rstudio/Posit, the makers of Quarto. Just following this alone will get you started with a perfectly beautiful and functional blog.

However, your blog is also your personal slice out on the internet, and if you can add just a tad bit of your personality into the content, it makes it more enjoyable for your readers. Here are my favourite tips.

Note

While it is fun to add these bells and whistles, do not lose focus on the most important part of your blog - the content.

1. Enrich your Appendices

An important facet that Quarto supports is Scholarly Writing. With a few simple flags in your _metadata.yml file, you can easily configure each blog post to neatly organize your footnotes, references, license and citation information in an appendix section at the bottom of your post.

This appendix section is easily customizable by inserting any other information you think your reader might appreciate. 1 of the simplest things to add is a Last Updated section. I insert this block of code at the bottom of every post, and each time I make a change to a post and re-render, this code chunk will automatically reflect this last updated date.

Code 
```{python}
#| output: false
from datetime import date
print(f"Last updated: {date.today().strftime('%d %B %y')}")
```

If you like to do more than just log a post’s last update, I recommend checking out Danielle Navarro’s source code for her quarto blog for a more impressive appendix.

2. Make custom CSS tweaks

The default Quarto blog comes ready with many Bootstrap themes from the Bootswatch project. I found that a really efficient way to tackle styling for your blog is to start with one of these ready-made themes (I chose Litera) and then add on custom css to make small tweaks. I am consistently surprised how some seemingly small css tweaks can create a dramatic effect on your overall site.

I wrote this SCSS snippet following steps from RappA’s youtube video. This block of css helps to perfectly align the elements in my navbar with the margins of my content body. I cannot express in words how much joy this tiny tweak brings me.

.navbar > .container-xxl, .navbar > .container-xl, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container, .navbar > .container-fluid {
  max-width: 1145px;
  margin: 0 auto;

Source: GIPHY

3. Sneak in Easter Eggs in your page footer

Page footers are generally reserved for important business-y messages. The usual suspects are either copyrights, licenses or “lovingly built with”s. I wanted my blog to be slightly different. I like to reward any reader who has read my posts all the way to the end with a nice easter egg in the form of one of my favourite quotes!

Scroll down right now and find your easter-egg quote! Thank you for reading my post in its entirety 😊

Note

When I first wrote this post, I used Quarto’s pre and post render hooks to insert a new quote into the page-footer field of my _quarto.yml. But this proved clunky, because _quarto.yml was a project-wide config, and I wanted a different quote for every post, which meant I needed to manually trigger this pre-render hook multiple times. As of this commit, I opted to add my random quotes using code blocks instead.

I maintain a simple text file with quotes that I enjoy. I simply pick a random quote from this file, wrap the text and insert the output into <blockquote> tags like so.

Code 
```{python}
#| output: false
import random
import textwrap
with open("../../quotes.txt") as f:
    quotes = f.readlines()
quotes = [q.strip() for q in quotes]
res = random.choice(quotes)
print("\n".join(textwrap.wrap(res)))
```

4. Create a custom 404 page

Last but not least, let’s not forget that some potential readers might land on a missing page, or use a url with a small typo. No reason to let them be greeted with a humdrum, run-of-the-mill 404 page! Quarto allows you to easily customize your 404 page. For my 404 page, I chose this simple image I created with DallE2.

DallE2 with prompt “dogs of different breeds happily running around with 404 text, cartoon style”

Conclusion

And there you go, hope you found a tip or two you can use. Let’s go make your personal slice of the internet your own 💪!

Appendix

─ Session info ───────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.1 (2023-06-16)
 os       macOS Ventura 13.5
 system   x86_64, darwin20
 ui       X11
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       Asia/Singapore
 date     2023-08-10
 pandoc   3.1.6 @ /usr/local/bin/ (via rmarkdown)
 quarto   1.3.433

─ Packages ───────────────────────────────────────────────────────────────────
 package     * version date (UTC) lib source
 sessioninfo * 1.2.2   2021-12-06 [1] CRAN (R 4.3.0)

 [1] /Users/ddanieltan/Code/ddanieltan.com/renv/library/R-4.3/x86_64-apple-darwin20
 [2] /Users/ddanieltan/Library/Caches/org.R-project.R/R/renv/sandbox/R-4.3/x86_64-apple-darwin20/84ba8b13

─ Python configuration ───────────────────────────────────────────────────────
 python:         /Users/ddanieltan/miniconda3/envs/py310/bin/python
 libpython:      /Users/ddanieltan/miniconda3/envs/py310/lib/libpython3.10.dylib
 pythonhome:     /Users/ddanieltan/miniconda3/envs/py310:/Users/ddanieltan/miniconda3/envs/py310
 version:        3.10.4 (main, Mar 31 2022, 03:38:35) [Clang 12.0.0 ]
 numpy:          /Users/ddanieltan/miniconda3/envs/py310/lib/python3.10/site-packages/numpy
 numpy_version:  1.21.5
 
 python versions found: 
  /usr/local/bin/python3
  /Users/ddanieltan/miniconda3/envs/py310/bin/python
  /Users/ddanieltan/miniconda3/bin/python
  /Users/ddanieltan/miniconda3/envs/dev/bin/python
  /Users/ddanieltan/miniconda3/envs/ml/bin/python
  /Users/ddanieltan/miniconda3/envs/web/bin/python

──────────────────────────────────────────────────────────────────────────────
Somewhere, something incredible is waiting to be known – Carl Sagan

Reuse

Citation

BibTeX citation:
@online{tan2022,
  author = {Tan, Daniel},
  title = {How to Add Some Personality to Your {Quarto} {Blog}},
  date = {2022-09-20},
  url = {https://www.ddanieltan.com/posts/blogtips},
  langid = {en}
}
For attribution, please cite this work as:
Tan, Daniel. 2022. “How to Add Some Personality to Your Quarto Blog.” September 20, 2022. https://www.ddanieltan.com/posts/blogtips.