Quarto: Creating websites
Megumi Oshima & Nicholas Ducharme-Barth
January 2025
In addition to being able to produce an array of document types, Quarto can also be used to organize multiple html or revealjs documents into a website.
Website configuration is controlled by the _quarto.yml
file which defines:
project:
type: website
resources:
- assets/*
website:
title: "Open Science Workflow Training for ISC"
reader-mode: true
site-url: "https://moshima-pifsc.github.io/ISC_OSworkflow_training"
repo-url: "https://github.com/MOshima-PIFSC/ISC_OSworkflow_training"
repo-actions: [source, issue]
search: true
back-to-top-navigation: true
bread-crumbs: false
sidebar:
collapse-level: 1
style: "floating"
search: true
tools:
- icon: github
href: https://github.com/MOshima-PIFSC/ISC_OSworkflow_training
contents:
- text: "Home"
file: index.qmd
- section: "Day 1"
href: assets/day-1.html
contents:
- text: "Github for Collaborative Workflows"
file: assets/day-1-pres-github_basics.qmd
- text: "Codespaces"
file: assets/day-1-pres-codespaces.qmd
- text: "Reproducible environments"
file: assets/day-1-pres-reproducible_environments.qmd
- text: "Modifying Stock Synthesis files"
file: assets/day-1-pres-modify-stock-synthesis.qmd
- text: "Modifying Stock Synthesis files: Part 2"
file: assets/day-1-pres-modify-stock-synthesis_BILLWG.qmd
- section: "Day 2"
href: assets/day-2.html
contents:
- text: "Pull requests & code review"
file: assets/day-2-pres-PR-code-review.qmd
- text: "Building a Shiny app"
file: assets/day-2-pres-build-shiny.qmd
- section: "Day 3"
href: assets/day-3.html
contents:
- text: "Quarto: Reports and presentations"
file: assets/day-3-pres-quarto.qmd
- section: "Day 4"
href: assets/day-4.html
contents:
- text: "Quarto: Creating websites"
file: assets/day-4-pres-quarto-website.qmd
- section: "Group projects"
contents:
- text: "Report template"
file: assets/day-3-report-template.qmd
- section: "Contact us"
contents:
- text: "Nicholas Ducharme-Barth"
file: assets/web-about-nd.qmd
- text: "Megumi Oshima"
file: assets/web-about-mo.qmd
- text: "Michelle Sculley"
file: assets/web-about-ms.qmd
- section: "Support"
contents:
- text: "Submit an issue"
href: https://github.com/MOshima-PIFSC/ISC_OSworkflow_training/issues/new/choose
format:
html:
toc: true
toc-expand: false
theme:
- default
- assets/customizations/website-custom.scss
iframe
html
or revealjs
content can be embedded in an existing html
document using an iframe
.
```{=html}
<iframe width=100% height=200 src="../index.html" style="border: 1px solid #323C46; max-height: unset; max-width: unset; box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .5); border-radius: 5px;"></iframe>
```
/*-- scss:defaults --*/
// Check contrast: https://colourcontrast.cc/
// define colors
$website-background: #fafafa;
$theme-whale-gray: #323C46;
$theme-midnight-sky: #001743;
$theme-twilight-sky: #002364;
$theme-noaa-sky: #003087;
$theme-noaa-sea: #0085CA;
$theme-pale-sea: #C6E6F0;
$theme-dove-gray: #A5AAAF;
// Get fonts: https://fonts.google.com/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz@8..144&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;1,300&display=swap');
// define theme colors
$body-bg: $website-background;
$body-color: $theme-whale-gray;
$link-color: $theme-noaa-sea;
$headings-color: $theme-midnight-sky;
// define theme fonts
$font-family-sans-serif: 'Montserrat', sans-serif;
$headings-font-family: 'Roboto Serif', serif;
$headings-font-weight: 400;
/*-- scss:rules --*/
// add a shortcut for emphasizing text
.blue {
color: $theme-noaa-sky;
font-weight: bold;
}
.hide-text {
color: $theme-dove-gray;
}
// add underline for hyperlinks
.reveal .slide a {
text-decoration: underline;
}
Websites can be published to a number of different locations including:
Remember, use git checkout -b gh-pages
to create the branch
Once you have turned on the website and created the gh-pages
branch in the repository, you can publish your site with the command (in your terminal)
quarto publish gh-pages
branch
_quarto.yml
file to add your Quarto document under the Group projects sectionmain
branchISC Open Science Worflows Workshop 2025