What’s in a Quarto project?

• _quarto.yml: meta-data (e.g. layout)
• index.qmd: homepage
• styles.scss: theme (color and fonts)

_quarto.yml

In this file, some basic information of the project is specified, such as project type, layout, theme.

This is where you modify the appearance of your website.

project:
  type: website
  output-dir: docs

website:
  page-navigation: true
  title: "Zero to Quarto Workshop"

  navbar:
    left:
      - href: index.qmd
        text: Home

    right: 
      - icon: github
        href: https://github.com
        
format:
  html:
    # theme: zephyr
    theme: styles.scss
    toc: true

index.qmd

Your homepage: when others click the URL you shared with them, this is where they land.

Content blocked by --- is the YAML header, which appears at the top of your page. Author, date can also be specified here.

---
title: "Zero to Quarto Workshop"
subtitle: "Build your first quarto website (or some other cool things!)"
format: 
  html:
    toc: true
    toc-depth: 2
---

Date: **Monday 23 October 2023, 6:30PM to 8:00PM, CEST** 
------------------
 
# Welcome!

Quarto is one of the most discussed topics in the R community for the past year. In the posit conf 2023 that just happened a few weeks ago, there were 23 (!) talks on this open-source publishing system. You can build a personal or organisation website; a course or workshop website; a blog; a scientific report; a presentation; all with the possibility to display and execute code (R, Python, Julia), and for free.

styles.scss

This file is optional; but good to have - when you want to customize the color and fonts.

However, if you are happy with the quarto preset themes, styles.scss is not necessary for the website to work.

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-grey: #FAFAFA;
$theme-beige: #FFFEF2;
$theme-purple0: #FFF0F5;
$theme-purple1: #E6E6FA;
$theme-purple2: #CBC3E3;
$theme-purple3: #88398A;
$theme-purple4: #9d709e;
$theme-purple5: #562457;


$body-bg: $theme-white;
$body-color: $theme-black; // text color
$headings-color: $theme-purple5; // applies to all 
$link-color: $theme-purple4;

Practice 2: Render your quarto project

Open index.qmd, find the render button.

Click render

Do you see a HTML page in your Viewer?

Practice 3: configure your quarto project

You need two more things before pushing everything to GitHub.

Set output-dir to docs in _quarto.yml

project:
  type: website
  output-dir: docs

(This is already done in the template you downloaded)

Create .nojekyll file

In terminal (or your favorite command line editor), in the root directory

touch .nojekyll

Render one last time, commit everything, push to remote (GitHub).

Practice 4: Configure GH Pages

Go to Setting > Pages > Build and deployment

• Choose Deploy from a branch
• Under Branch, select /docs. Save. It should take less than 1 minute to complete.

Once complete, your site should be available at https://your_username.github.io/repo_name.

Site navigation, add a new page

The location of a new page is specified in _quarto.yml.

To add another page next to Home, add the following lines,

website:
  page-navigation: true
  title: "Zero to Quarto Workshop"

  navbar:
    left:
      - href: index.qmd
        text: Home

      - href: your_new_page.qmd
        text: Your_new_page_name

Then, create a new your_new_page.qmd document.

You can either copy and paste index.qmd and modify the content; or use the button top-left of Rstudio > Add new quarto document.

Theme

Theme is controlled in _quarto.yml as well.

• for quarto preset themes, specify the names (such as cosmo, zephyr);
• for customized themes (such as the one used in he workshop), provide a styles.scss file where you have different colors and fonts.

format:
  html:
    # theme: zephyr
    theme: styles.scss
    toc: true

Practice 5: Add a new page to your website

It is always a good idea to add an about page to your website to let people know what the website is about!

Tasks

• Create an about.qmd file, write a few lines about what kind of website you want to create: e.g. workshop? personal website?
• Position your about page next to the right of the home page. (More on website navigation)
• Test out a few quarto themes, and/or use different colors specified in styles.scss (optional).

(Quarto provides special layout for about pages. Feel free to check them out!)

Figures and tables

One (of a few) way to add a figure:

![](path_to_figure.png) 
![caption](path_to_figure.png) {width=85% fig-align="center"}

One (of a few) way to add a table:

| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |

: Table name

Read about how to work on figures and tables.

Code chunks

Use a code fence (3 backticks) with the language you wish to run the code.

Summary

Today we went through 4 steps:

• set a version controlled quarto project
• build the project locally, configure necessary parts (output-dir and .nojekyll)
• push to GitHub, configure GH pages setting (more about publishing)
• add more content

Learn more

• Quarto Gallery shows a nice and inspiring collection of the types of projects you can create. Get inspired!
• Official guide on creating website, book, presentation and more.

Practice 6: Add a plot to your website

Experiment with adding content to your website:

• Reproduce the code chunk example in a quarto document; (you need ggplot2 package to do it)
• Include a figure in your quarto document.
  • a photo is a good idea to use for your personal portfolio;
  • or use the figure from the template -02quarto.