Practical example

Create a static website with Quarto

Introduction

You will learn how to create your first static website with Quarto.

1 GitHub repository

To publish our website, we will use GitHub Pages. The first step is to create a repository on GitHub.

• Log in to GitHub
• Create a new repository called Quarto-practical
  • Visibility : Public
  • check Add a README file
  • Choose a license : Creative Commons Attribution ShareAlike 4.0
• Create a new branch called gh-pages
  • clic on button main
  • write gh-pages
  • clic on Create branch gh-pages from main
  • wait 30 seconds and then refresh the page

Why deploy from pages branch gh-pages ?

This will keep your branch main clean and avoid including html pages generated by Quarto :

• branch main : setup and content in qmd files
• branch gh-pages : html for deployment

• In the About section clic on ⚙️
  • Check Use your GitHub Pages website
  • Save changes

You can clic on the url. Your website is created but empty.

2 Local repository

It’s time to create a folder to store your local repository :

• Open Git Bash
• Create the absolute path : mkdir -p /p/Cours1A/Quarto
• Go to this folder: cd /p/Cours1A/Quarto
• Create a clone of your GitHub repository
  • On GitHub, clic on the green button Code, then SSH
  • copy the url (example : git@github.com:/ENSAI-1A-POO-TP.git)
  • replace username by yours and git clone git@github.com:<username>/ENSAI-1A-POO-TP.git

3 Edit your files

We will create and edit all needed files.

• Open Visual Studio
• File > Open Folder
  • Got to /p/Cours1A/Quarto
  • Clic once on Quarto-practical and then clic on Select a folder

3.1 _quarto.yml

In your repository’s root directory, you’ll find the mandatory _quarto.yml file. This configuration file holds metadata settings.

All files within your repository will inherit these metadata settings. However, you have the flexibility to redefine these values for each individual file.

• Create the _quarto.yml file in your repository’s root

• Paste the following code (you can custom title, navbar background color or both themes)

  project:
    type: website
  
  website:
    title: "Quarto tutorial"
    navbar:
      background: lightseagreen
      left:
        - href: index.qmd
          text: Home
  
  format:
    html:
      theme:
        dark: solar
        light: cosmo
      css: styles.css

Let’s have a closer look of these metadata

• project type : website, let’s say it’s the default value
• there is a navigation bar with a single tab
  • tab name : Home
  • it links to the index.qmd file ➡️ we will create it in the root
• the default format is html
  • with two themes : one for the dark mode (first one so it is the default theme) and one for light mode
    • on the navbar top left you will find a trigger to toggle theme from dark to light
  • it use styles from styles.css ➡️ we will create it in the root

3.2 styles.css

In this file you can define all styles you can imagin.

• create file styles.css in the root

• in this file, create for example a class of green text on orange background

  .green_orange{
    text: green;
    background: orange;
  }

3.3 index.qmd

This file is your homepage.

It will starts with some metadatas written in yaml and then markdown code.

3.4 .gitignore

3.5 .github/workflows/publish.yml

4 git push

---

5 Gear second