Website Options

All available options for website projects are documented below. See Creating a Website for an in-depth guide to creating websites with Quarto.

Project

Options that define the type, render targets, and output of a project. Project options are specified under the project key. For example:

---
project:
  type: website
  output-dir: _site
---
title
type

Project type (default, website, or book)

render

Files to render (defaults to all files)

execute-dir

Control the working directory for computations.

  • file: Use the directory of the file that is currently executing.
  • project: Use the root directory of the project.
output-dir

Output directory

lib-dir

HTML library (JS/CSS/etc.) directory

resources

Additional file resources to be copied to output directory

preview

Options for quarto preview (see Preview)

pre-render

Scripts to run as a pre-render step

post-render

Scripts to run as a post-render step

Preview

Specify options that control the behavior of quarto preview within the preview key. For example:

---
project:
  type: website
  output-dir: _site
  preview:
    port: 4200
    browser: false
---

Available preview options include:

port

Port to listen on (defaults to random value between 3000 and 8000)

host

Hostname to bind to (defaults to 127.0.0.1)

serve

Options for external preview server (see Serve)

browser

Open a web browser to view the preview (defaults to true)

watch-inputs

Re-render input files when they change (defaults to true)

navigate

Navigate the browser automatically when outputs are updated (defaults to true)

timeout

Time (in seconds) after which to exit if there are no active clients

Serve

Quarto v1.2 Required

The preview: serve options are only available in Quarto v1.2, which you can download at https://quarto.org/docs/download/.

If you are creating a project extension for another publishing system that includes its own preview server (for example, Hugo or Docusaurus) then use the preview: serve options to customize the behavior of the preview server.

cmd

Serve project preview using the specified command. Interpolate the --port into the command using {port}.

args

Additional command line arguments for preview command.

env

Environment variables to set for preview command.

ready

Regular expression for detecting when the server is ready.

See the Hugo and Docusaurus extension source code for example usages of preview: serve.

Website

Options that affect website output. Website options are specified under the website key. For example:

---
website:
  title: "My Website"
  image: opengraph.png
  page-navigation: true
---
title

Website title

description

Website description

favicon

The path to the favicon for this website

site-url

Base URL for published website

site-path

Path to site (defaults to /). Not required if you specify site-url.

repo-url

Base URL for website source code repository

repo-subdir

Subdirectory of repository containing website

repo-branch

Branch of website source code (defaults to main)

repo-actions

Links to source repository actions (none or one or more of edit, source, issue)

reader-mode

Displays a ‘reader-mode’ tool which allows users to hide the sidebar and table of contents when viewing a page.

google-analytics

The Google tracking Id or measurement Id of this website.

cookie-consent

The type of consent that should be requested, using one of these two values:

  • implied (default): This will notify the user that the site uses cookies and permit them to change preferences, but not block cookies unless the user changes their preferences.

  • express: This will block cookies until the user expressly agrees to allow them (or continue blocking them if the user doesn’t agree).

search

Site search (true or false to enable/disable, or provide custom Search Options

navbar

Navbar options (see Navbar)

sidebar

Sidebar options (see Sidebar)

body-header

Markdown to insert at the beginning of each page’s body (below the title and author block).

body-footer

Markdown to insert below each page’s body.

margin-header

Markdown to place above margin content (text or file path)

margin-footer

Markdown to place below margin content (text or file path)

page-navigation

Provide next and previous article links in footer

page-footer

Page footer. Text content or page footer definition.

image

Default site thumbnail image for twitter /open-graph

comments
open-graph

Generate Open Graph metadata (see Open Graph options)

twitter-card

Generate Twitter Card metadata (see Twitter Card options)

Social

Social metadata is provided as a subkey of website options. You can specify true to generate social metadata using a set of default option, or specify one or more Twitter or Open Graph specific options as enumerated below. For example:

---
website:
  open-graph: true
  twitter-card: 
    site: "@sitehandle"
---

Twitter Card

title

The title of the page. Note that by default Quarto will automatically use the title metadata from the page. Specify this field if you’d like to override the title for this provider.

description

A short description of the content. Note that by default Quarto will automatically use the description metadata from the page. Specify this field if you’d like to override the description for this provider.

image

The path to a preview image for the content. By default, Quarto will use the image value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-alt

The alt text for the preview image. By default, Quarto will use the image-alt value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-width

Image width (pixels)

image-height

Image height (pixels)

card-style

Card style (summary or summary_large_image).

If this is not provided, the best style will automatically selected based upon other metadata. You can learn more about Twitter Card styles here.

creator

@username of the content creator (must be a quoted string)

site

@username of the website (must be a quoted string)

Open Graph

title

The title of the page. Note that by default Quarto will automatically use the title metadata from the page. Specify this field if you’d like to override the title for this provider.

description

A short description of the content. Note that by default Quarto will automatically use the description metadata from the page. Specify this field if you’d like to override the description for this provider.

image

The path to a preview image for the content. By default, Quarto will use the image value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-alt

The alt text for the preview image. By default, Quarto will use the image-alt value from the format metadata. If you provide an image, you may also optionally provide an image-width and image-height.

image-width

Image width (pixels)

image-height

Image height (pixels)

locale

Locale of open graph metadata

site-name

Name that should be displayed for the overall site. If not explicitly provided in the open-graph metadata, Quarto will use the website or book title by default.

Comments

You can add commenting to your website using either Hypothesis or Utterances.

Hypothesis

Enable and configure Hypothesis commenting via comments key. For example:

---
website:
  comments: 
    hypothesis:
      theme: clean
      openSidebar: false
---
openSidebar

Controls whether the sidebar opens automatically on startup.

showHighlights

Controls whether the in-document highlights are shown by default (always or never)

theme

Controls the overall look of the sidebar (classic or clean)

enableExperimentalNewNoteButton

Controls whether the experimental New Note button should be shown in the notes tab in the sidebar.

usernameUrl

Specify a URL to direct a user to, in a new tab. when they click on the annotation author link in the header of an annotation.

services

Array of service definitions

branding

Custom branding/colors to apply to UI

externalContainerSelector

A CSS selector specifying the containing element into which the sidebar iframe will be placed.

focus

User focused filter set for the available annotations on a page

requestConfigFromFrame

Specify a host iframe to request configuration from

assetRoot

The root URL from which assets are loaded.

sidebarAppUrl

The URL for the sidebar application which displays annotations.

For additional documentation on the Hypothesis options enumerated above, see the Hypothesis Publisher Config documentation.

Utterances

Enable and configure Utterances commenting via the comments key. For example:

---
website:
  comments: 
    utterances:
      repo: quarto-dev/quarto-web
---
repo

The Github repo that will be used to store comments.

label

The label that will be assigned to issues created by Utterances.

theme

The Github theme that should be used for Utterances (github-light, github-dark, github-dark-orange, icy-dark, dark-blue, photon-dark, body-light, or gruvbox-dark)

issue-term

How posts should be mapped to Github issues (pathname, url, title or og:title)

Giscus

Enable and configure usage of the Giscus app via the comments key. For example:

---
website:
  comments:
    giscus:
      repo: quarto-dev/quarto-web
---
repo

The Github repo that will be used to store comments.

In order to work correctly, the repo must be public, with the giscus app installed, and the discussions feature must be enabled.

repo-id

The Github repository identifier.

You can quickly find this by using the configuration tool at https://giscus.app. If this is not provided, Quarto will attempt to discover it at render time.

category

The discussion category where new discussions will be created. It is recommended to use a category with the Announcements type so that new discussions can only be created by maintainers and giscus.

category-id

The Github category identifier.

You can quickly find this by using the configuration tool at https://giscus.app. If this is not provided, Quarto will attempt to discover it at render time.

mapping

The mapping between the page and the embedded discussion.

  • pathname: The discussion title contains the page path
  • url: The discussion title contains the page url
  • title: The discussion title contains the page title
  • og:title: The discussion title contains the og:title metadata value
  • any other string or number: Any other strings will be passed through verbatim and a discussion title containing that value will be used. Numbers will be treated as a discussion number and automatic discussion creation is not supported.
reactions-enabled

Display reactions for the discussion’s main post before the comments.

loading

Specify loading: lazy to defer loading comments until the user scrolls near the comments container.

input-position

Place the comment input box above or below the comments.

theme

The giscus theme to use when displaying comments.

language

The language that should be used when displaying the commenting interface.

Listings

Listings enable you to automatically generate the contents of a page (or region of a page) from a list of Quarto documents or other custom data. You can enable listings on a page using the listing option in the document front matter, for example:

---
title: "Listing Example"
listing: default
---
id

The id of this listing. When the listing is rendered, it will place the contents into a div with this id. If no such div is defined on the page, a div with this id will be created and appended to the end of the page.

In no id is provided for a listing, Quarto will synthesize one when rendering the page.

type

The type of listing to create. Choose one of:

  • default: A blog style list of items
  • table: A table of items
  • grid: A grid of item cards
  • custom: A custom template, provided by the template field
contents

The files or path globs of Quarto documents or YAML files that should be included in the listing.

sort

Sort items in the listing by these fields. The sort key is made up of a field name followed by a direction asc or desc.

For example: date asc

max-items

The maximum number of items to include in this listing.

page-size

The number of items to display on a page.

sort-ui

Shows or hides the sorting control for the listing. To control the fields that will be displayed in the sorting control, provide a list of field names.

filter-ui

Shows or hides the filtering control for the listing. To control the fields that will be used to filter the listing, provide a list of field names. By default all fields of the listing will be used when filtering.

categories

Display item categories from this listing in the margin of the page.

  • numbered: Category list with number of items
  • unnumbered: Category list
  • cloud: Word cloud style categories
feed

Create an RSS feed for this page using the items in this listing (see Feed).

date-format

The date format to use when displaying dates (e.g. d-M-yyy). Learn more about supported date formatting values here.

max-description-length

The maximum length (in characters) of the description displayed in the listing. Defaults to 175.

image-placeholder

The default image to use if an item in the listing doesn’t have an image.

image-align

In default type listings, whether to place the image on the right or left side of the post content (left or right).

image-height

The height of the image being displayed (a CSS height string).

The width is automatically determined and the image will fill the rectangle without scaling (cropped to fill).

grid-columns

In grid type listings, the number of columns in the grid display. Defaults to 3.

grid-item-border

In grid type listings, whether to display a border around the item card. Defaults to true.

grid-item-align

In grid type listings, the alignment of the content within the card (left (default), right, or center).

table-striped

In table type listings, display the table rows with alternating background colors. Defaults to false.

table-hover

In table type listings, highlight rows of the table when the user hovers the mouse over them. Defaults to false.

template

The path to a custom listing template.

template-params

Parameters that are passed to the custom template.

fields

The list of fields to include in this listing.

field-display-names

A mapping that provides display names for specific fields. For example, to display the title column as ‘Report’ in a table listing you would write:

listing:
  field-display-names:
  title: "Report"
field-types

Provides the date type for the field of a listing item. Unknown fields are treated as strings unless a type is provided. Valid types are date, number.

field-links

The list of fields to display as hyperlinks to the source document when the listing type is a table. By default, only the title or filename is displayed as a link.

field-required

Fields that items in this listing must have populated. If a listing is rendered and one more items in this listing is missing a required field, an error will occur and the render will.

Feed

Enable an RSS feed for your listing by including the feed option.

items

The number of items to include in your feed. Defaults to 20.

type

Whether to include full or partial content in the feed.

  • full (default): Include the complete content of the document in the feed.
  • partial: Include only the first paragraph of the document in the feed.
title

The title for this feed. Defaults to the site title provided the Quarto project.

image

The path to an image for this feed. If not specified, the image for the page the listing appears on will be used, otherwise an image will be used if specified for the site in the Quarto project.

description

The description of this feed. If not specified, the description for the page the listing appears on will be used, otherwise the description of the site will be used if specified in the Quarto project.

language

The language of the feed. Omitted if not specified. See https://www.rssboard.org/rss-language-codes for a list of valid language codes.

categories

A list of categories for which to create separate RSS feeds containing only posts with that category.

About

Layout a simple about page for an individual or organization. For more, see the About Pages documentation.

id

The target id of this about page. When the about page is rendered, it will place read the contents of a div with this id into the about template that you have selected (and replace the contents with the rendered about content).

If no such div is defined on the page, a div with this id will be created and appended to the end of the page.

template

The template to use to layout this about page. Choose from:

  • jolla
  • trestles
  • solana
  • marquee
  • broadside
image

The path to the main image on the about page. If not specified, the image provided for the document itself will be used.

image-width

A valid CSS width for the about page image.

image-shape

The shape of the image on the about page.

  • rectangle
  • round
  • rounded
links

Links (as navigation items) to display on the about page.