Quarto: Creating websites

Megumi Oshima & Nicholas Ducharme-Barth

January 2025

Building a website


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.

Configuration


Website configuration is controlled by the _quarto.yml file which defines:

Configuration

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

Embedding an 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>
```


Custom theming


Custom website and html themes can be defined using Sass


This is a [custom rule]{.blue}


This is a custom rule

/*-- 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;
}

Publishing


Websites can be published to a number of different locations including:

Setting up GitHub Pages

Remember, use git checkout -b gh-pages to create the branch

Publishing to GitHub Pages


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

Resources


Last group activity


  • Switch to your own branch
  • Edit the _quarto.yml file to add your Quarto document under the Group projects section
  • Commit your changes and we will work together to merge them into the main branch