Quarto
Websites

Basic website

Let’s dive right in!

https://unsplash.com/@noaa

Get the template

  1. Start somewhere logical:
Terminal
cd ~/Documents
  1. Get the website template:
Terminal
quarto use template skaltman/whr-website-template

Get the template

  1. Follow the prompts:
Terminal
Quarto templates may execute code when documents are rendered. If you do not 
trust the authors of the template, we recommend that you do not install or 
use the template.
? Do you trust the authors of this template (Y/n) › Y
? Create a subdirectory for template? (Y/n) › Y
? Directory name: › website

  1. Open the folder:

    RStudio: New Project > Existing Directory >

    VS Code: File > Open Folder >

  2. Open index.qmd

Workflow

Preview. Edit. Save. Preview.

Preview

Current page

Cmd/Ctrl + Shift + K

Whole site

Build > Render Website

Current page

Cmd/Ctrl + Shift + K

Whole site

Use Terminal:

Terminal
quarto preview

Requires Quarto Extension

Current page

Terminal
quarto preview index.qmd

Whole site

Terminal
quarto preview

Your turn

  1. Get the starter template. If you’re using Posit Cloud, skip this step and instead open the whr-website project. If you’re using Codespaces, follow the instructions here, but go to this repo instead.

  2. Open index.qmd and click Render/Preview.

  3. Edit title index.qmd YAML to better reflect the site and add a subtitle. Preview.

  4. Add some text to index.qmd explaining the plot. Preview.

05:00

Page Structure

index.qmd
---
title: "Global Happiness"
execute:
  echo: false
  warning: false
  message: false
---

Data from: [World Happiness Report](https://www.worldhappiness.report/).

```{r}
#| label: setup
library(tidyverse)
library(quarto)
library(brand.yml)

whr <- read_csv(here::here("data/whr.csv"))

brand <- read_brand_yml("_brand.yml")

theme_whr <-
  theme_brand_ggplot2("_brand.yml") +
  theme(
    plot.title = element_text(size = 14, face = "bold"),
    plot.subtitle = element_text(size = 12)
  ) 
```

Webpages are like any other Quarto document:

  1. Start with a YAML header
  2. Can include code cells
  3. Everything else is markdown content

Website Structure

A minimal website has two files: index.qmd and _quarto.yml

  • index.qmd: Renders to index.html, your home page.

  • _quarto.yml: Controls project and website properties.

When rendered you will get a _site/ folder. This contains everything needed to serve the site.

_quarto.yml

_quarto.yml
project:
  type: website

website:
  title: "whr-website"
  navbar:
    left:
      - href: index.qmd
        text: Home

format:
  html:
    toc: true

Quarto projects

Our website is a Quarto project.

All Quarto projects include a _quarto.yml file.

This is a Quarto Project.

my-folder/
├── _quarto.yml
├── my-document.qmd

This is not.

my-folder/
├── my-document.qmd

Quarto projects

A Quarto project is a directory that provides:

  • A way to render all or some of the files in a directory with a single command (e.g. quarto render myproject).
  • A way to share YAML configuration across multiple documents.

Why didn’t we need this before?

Only some Quarto outputs require a Quarto project, including:

  • websites
  • books
  • blogs

Navbar - add a page

_quarto.yml
project:
  type: website

website:
  title: "whr-website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: new-page.qmd
        text: New page

format:
  html:
    toc: true

Your turn

  1. Add some information to about.qmd.
  2. Edit _quarto.yml so that the navbar includes the about page.
  3. How do you think you change the position of the links in the navbar? Change them to appear on the right.
04:00

There’s much more!

There are many more options for site navigation, including

Learn more: https://quarto.org/docs/websites/website-navigation.html

Theming

Photo by Daniele Levis Pelusi on Unsplash

Built-in theme

Like regular HTML documents and dashboards, you can use a built-in Bootswatch theme.

_quarto.yml
project:
  type: website

website:
  title: "whr-website"
  navbar:
    left:
      - href: index.qmd
        text: Home

format:
  html:
    toc: true
    theme: cerulean

Learn more: https://quarto.org/docs/output-formats/html-themes.html

Style in _quarto.yml

Control basic options like colors and fonts in _quarto.yml.

_quarto.yml
project:
  type: website

website:
  title: "whr-website"
  navbar:
    left:
      - href: index.qmd
        text: Home

format:
  html:
    toc: true
    fontcolor: "blue"
    backgroundcolor: "white"

Learn more: https://quarto.org/docs/output-formats/html-themes.html

Or…

Deployment

Photo by engin akyurt on Unsplash

Publishing options

There are a variety of ways to publish Quarto documents, presentations, dashboards, and websites.

Learn more: https://quarto.org/docs/publishing/

Posit Connect Cloud

https://connect.posit.cloud/

Easily publish and share data applications and documents in a cloud environment within minutes.

Posit Connect Cloud

Publish from:

Posit Connect Cloud

Quarto Pub

Free publishing service for static content created with Quarto.

Learn more: https://quarto.org/docs/publishing/quarto-pub.html

Quarto Pub

Easiest option for today. https://quartopub.com/.

  1. Run
Terminal
quarto publish
  1. Select Quarto Pub.

Learn more: https://quarto.org/docs/publishing/quarto-pub.html

Your turn

Publish your website to Quarto Pub.

  1. From the Terminal, run quarto publish, then select Quarto Pub.
  2. Follow the prompts to set up an account and publish.

If you have time, publish to Connect Cloud. Note: if you’re using R, you will need an renv.lock file (learn how here) if publishing from Positron or VS Code, or a manifest.json file (learn how here) if publishing from GitHub.

07:00

Making a website from scratch

Quick start guide

Terminal
quarto create project website mysite

Learn more: https://quarto.org/docs/websites/