Website Basics

Start with a template

  1. Start somewhere logical:
Terminal
cd ~/Documents
  1. Get the website template:
Terminal

quarto use template EmilHvitfeldt/website-template

Start with a 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

No command, 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. (On Posit Cloud? Skip this step.)

  2. Open index.qmd

  3. Preview index.qmd

  4. Edit title and subtitle in the index.qmd YAML to reflect your site

  5. Preview

  6. What else is in index.qmd? Can you match the contents of index.qmd with contents of the webpage?

05:00

index.qmd Components

No peeking

Page Structure

index.qmd
---
title: "Alicia"
subtitle: "Data Scientist"
# `profile.jpg` photo by Jan Tinneberg on https://unsplash.com
image: profile.jpg
about: # https://quarto.org/docs/websites/website-about.html
  template: jolla
  links:
    - icon: github
      text: Github
      href: https://github.com
    - icon: linkedin
      text: LinkedIn
      href: https://linkedin.com
---

A little bit about me and my life.

## Education

University of XYZ, City \| Location \| Sept 20XX - June 20XX

## Experience

Workplace \| Job title \| April 20XX - present

Webpages are like any other Quarto document:

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

Use the visual editor (if you like)

About Pages

Special pages controlled by the about key in YAML.

Content and YAML values are combined using a template:

---
about:
  template: jolla
---

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

https://quarto.org/docs/websites/website-about.html

Your Turn

  1. Edit the content in index.qmd to reflect you.

  2. Try different templates and pick one.

  3. Edit the links to point at your own profiles, or add different links.

  4. Experiment with image-shape.

04:00

image

Used in about template, and social cards.

index.qmd
---
image: profile.jpg
---
website/
├── _quarto.yml
├── index.qmd
└── profile.jpg

Use a path relative to index.qmd

image

Used in about template, and social cards.

index.qmd
---
image: images/profile.jpg
---
website/
├── _quarto.yml
├── images/
│   └──  profile.jpg
└── index.qmd

Use a path relative to index.qmd

Your Turn

Replace the image with one that reflects you or your site.

04:00

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: "Home"
  open-graph: true # https://quarto.org/docs/websites/website-tools.html#open-graph
  page-footer: "Made with ❤️ and Quarto"
  navbar:
    right:
      - text: Home
        href: index.qmd

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