Text for documentation (markdown + other few tricks)
Code (chunks) with your analysis (R and friends)
Structure of a Quarto website
For a website, each webpage is going to be its separate quarto document. To create a website, you need one extra YAML file that will stitch all those pages together. Enters: _quarto.yml
_quarto.yml can be seen as a config file that provides website options, such as style, name, navigation tools and more. Here is its content for this website:
Yep!! And as with any other R script, it is good practice to start by loading the libraries you are going to need for your analysis / website content.
library(httr2)library(knitr)library(tidyverse)
── Attaching core tidyverse packages ──────────────────────── tidyverse 2.0.0 ──
✔ dplyr 1.1.4 ✔ readr 2.1.5
✔ forcats 1.0.0 ✔ stringr 1.5.1
✔ ggplot2 3.5.1 ✔ tibble 3.2.1
✔ lubridate 1.9.4 ✔ tidyr 1.3.1
✔ purrr 1.0.4
── Conflicts ────────────────────────────────────────── tidyverse_conflicts() ──
✖ dplyr::filter() masks stats::filter()
✖ dplyr::lag() masks stats::lag()
ℹ Use the conflicted package (<http://conflicted.r-lib.org/>) to force all conflicts to become errors
Mmm… this is a lot of information we would like to hide.
Take two
Adding an execution option: #| warning: false to the code chunk will let us hide the warning messages when rendering the document
library(httr2)library(knitr)library(tidyverse)
Yeah!!!
Now we can start coding!
Did somebody say cat?? Sorry cute cat?! You can insert an image using the markdown syntax: 
A cat upside down
You can also customize alignment, size and more… add options with {fig-align="right" width=50%}
A smaller cat upside down… on the right
We are going to use the Cat API to add random cats to our website
req <-request("https://api.thecatapi.com/v1")resp <- req %>%# Then we add on the images pathreq_url_path_append("images/search") %>%# Add query parameters _width and _quantityreq_url_query(`limit`=1) %>%req_perform() %>%resp_body_json()knitr::include_graphics(resp[[1]]$url)
We might want to hide the code
Of course there is an option for that: #| echo: false
Or collapse it
Try #| code-fold: true if you want to get fancy
Code
req <-request("https://api.thecatapi.com/v1")resp <- req %>%# Then we add on the images pathreq_url_path_append("images/search") %>%# Add query parameters _width and _quantityreq_url_query(`limit`=1) %>%req_perform() %>%resp_body_json()knitr::include_graphics(resp[[1]]$url)
Do it in style
Themes
You can change the style of your website pretty easily using the 25 pre-defined themes selected from the Bootswatch project.
Let’s try flatly. We need to update _quarto.yml so the bottom looks like this:
Don’t forget to save your changes before rendering!!
Host it on GitHub
You can use GitHub pages to host your website for free! Everytime you push new content, your website will update within a few minutes!! Here we opted to save the rendered html files to a docs folder, which is a naming convention that GitHub uses to point to content for GitHub pages.
You also have other ways to customize further those default themes. For example you can use the Cascading Style Sheets or CSS to add specific rules to specific elements of your website. By default when you create a quarto website project in RStudio, it will create a file named style.css and add it to your styling options in _quarto.yml. This css file is empty by default. Let’s add some content to modify our headers of level 2 to be green and have more space between letters
Sass extends existing CSS features in a number of exciting ways, but importantly reduces repetition. You can use .scss stylesheet file(s) to define Sass variables to quickly customize your website’s theme. Sass variables are defined in the form $var-name: value;. Then you can use those variables to assign style to elements (that quarto has predefined). For example, let’s make our navigation bar purple:
/*-- scss:defaults --*/$purple:#800080; /* define the variable purple as a color */$navbar-bg: $purple; /* use this variable to change navbar background */
