From Zero to Website in 20 Minutes

Annotated notes

Author

Charlotte Wickham

Outline

Don’t start from scratch
Use an about template
Add pages and customize navigation
Use listings for “lists” of content
Make the style your own
Publish

Disclosure: Things I collected earlier

A photo profile.jpg
A file called demo.qmd
A list of my talks stored in a YAML file
A two-color palette
A fonts

I also set up a Quarto Pub account

0. Setup

Set up empty RStudio project beforehand
Move assets/ to somewhere easy to get to

1. Don’t start from scratch

[4min]

Use a template to get started:

Start in an empty RStudio project

Run:

Terminal

quarto use template cwickham/minimal-website

Don’t create a new subdirectory when prompted.

A minimal website is:

index.qmd: Content for a homepage index.html
_quarto.yml: Project, website and format configuration

index.qmd is like any other Quarto document: YAML header, markdown text, possibly code cells. Render to preview.

Make some edits:

Edit YAML:
- title
- subtitle
- image-alt
Move new profile.jpg file in. Photo by Jr Korpa on Unsplash
Edit content of index.qmd.
Preview.

2. Use an `about` template

[2 mins]

index.qmd uses the about key in the document YAML. Special “about” page template: https://quarto.org/docs/websites/website-about.html

Content and YAML values are combined using a template:

---
about:
  template: jolla
---

Templates: jolla, trestles, solana, marquee, or broadside

Switch to solana.

3. Add pages and customize navigation

[4 mins]

Add pages

When you add files, the file path becomes URL path:

File Location	URL
`demo.qmd`	`{ site url }/demo.html`
`talks/index.qmd`	`{ site url }/talks/`
`data/air-quality.csv`	`{ site url }/data/air-quality.csv`

Add navigation in `_quarto.yml`

E.g. under website: navbar

Give a path from site root:

_quarto.yml

website:
  navbar:
    right: 
      - demo.qmd

Or a nav item object:

_quarto.yml

website:
  navbar:
    right:
      - href: slides.qmd
        text: Zero to Website
        icon: stopwatch

4. Use listings for lists of content

[6mins]

A listing is:

an automatically generated list of content
styled via a template, (built-in type, or custom template)
can be included on any page

Use listings for …

`contents` can be a YAML file

talks/index.qmd

---
title: Talks
listing:
  contents: talks.yml
  type: table
  fields: [title, venue, date]
---

talks/talks.yml

- title: "Quarto: Reproducible Publishing"
  date: 2024-03-01
  venue: Oakridge National Lab
  path: https://github.com/cwickham/oakridge
- title: What's New in Quarto?
  date: 2023-09-01
  venue: "`posit::conf(2023)`"
  path: https://youtu.be/WR08GESib9Y?si=vTxco6_yuEDV8TBC
- title: This Month I Learned...
  date: 2021-04-01
  venue: Rladies Washington D.C., via Zoom 
  path: https://cwickham.github.io/this-month-I-learned/#1

5. Make the style your own

[2mins]

Control style with custom `.scss` file

_quarto.yml

format:
  html:
    theme: [cosmo, styles.scss]

styles.scss

/*-- scss:defaults --*/

$body-bg: white; 
$body-color: #333333;
$primary: #333333;

// Common variables to add a bit more color: 
// $link-color, $headings-color, $navbar-bg
$navbar-bg: #eeeeee;

Change to:

styles.scss

/*-- scss:defaults --*/

$body-bg: #F1E9DA; 
$body-color: black;
$primary: #c23936;

// Common variables to add a bit more color: 
// $link-color, $headings-color, $navbar-bg

Add fonts

styles.scss

/*-- scss:rules --*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

h1, h2, .navbar-brand {
  font-family: 'Roboto Slab', sans-serif;
}

6. Publish

[1mins]

Use quarto publish: https://quarto.org/docs/publishing/

Terminal

quarto publish quarto-pub

Other venues: gh-pages, netlify, connect, posit-cloud

Updates? Re-run quarto publish

Wrap Up

Why Quarto for Websites?

You don’t need to learn anything new for page content
You get nice website features out of the box: GitHub links, social cards, navigation, etc.
A lot of customization available via YAML options
Customize style as much (or as little) as you want