From Zero to Website in 20 Minutes

JSM 2024

Charlotte Wickham

From Zero to Website in 20 Minutes

Charlotte Wickham

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
The hex values for a two-color palette
A Google font

I also set up a Quarto Pub account

1. Don’t start from scratch

Use a template to get started

Terminal

quarto use template cwickham/minimal-website

Edit index.qmd to reflect yourself: YAML and content

2. Use an `about` template

Use the `about` key in the document YAML

Content and YAML values are combined using a template:

---
about:
  template: jolla
---

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

Add pages

File path becomes URL path

File location

demo.qmd

talks/index.qmd

data/air-quality.csv

URL

{ site url }/demo.html

{ site url }/talks/

{ site url }/data/air-quality.csv

Add navigation in `_quarto.yml`

Give a path from site root

_quarto.yml

website:
  navbar:
    right: 
      - demo.qmd

Or a nav item object:

_quarto.yml

website:
  navbar:
    right:
      - href: demo.qmd
        text: Demo
        icon: window-fullscreen

Or use side navigation

_quarto.yml

website:
  sidebar:
    contents:
      - href: demo.qmd
        text: Demo
        icon: window-fullscreen

4. Use listings for lists of content

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

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;

6. Publish

Use `quarto publish`

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

From Zero to Website in 20 Minutes