Lecture 3

Getting Started with Jupyter Notebook and Quarto

Byeong-Hak Choe
bchoe@geneseo.edu

SUNY Geneseo

January 27, 2025

Getting Started with Jupyter Notebook and Quarto

Building a Personal Website on GitHub

Let’s Practice Markdown!

  • Jupyter Notebook, Quarto, and GitHub-based Discussion Boards use markdown as its underlying document syntax.

  • Let’s do Classwork 2.

Getting Started with Jupyter Notebook and HTML

YAML

  • An YAML (yet another markup language) header surrounded by ---.
    • It is commonly used for document configuration (e.g., title, author, date, style, …).

Getting Started with Jupyter Notebook and HTML

Knitting / Rendering

  • When we knit the document, Quarto sends the .qmd file to jupyter/knitr, which executes all of the code chunks and creates a new markdown (.md) document which includes the code and its output.

  • The markdown file (*.md) generated by jupyter/knitr is then processed by pandoc, which is responsible for creating the output file.

Getting Started with Jupyter Notebook and HTML

Markdown, Jupyter Notebook, and HTML

  • The very original version of Markdown was invented mainly to write HTML content more easily.
    • For example, - SOME_TEXT in “.md” is equivalent to <ul><li> SOME_TEXT </li> in ”.html”
  • Pandoc makes it possible to convert a Markdown document to a large variety of output formats, such as HTML.

Getting Started with Jupyter Notebook and HTML

Markdown, Jupyter Notebook, and HTML

---
title: "Habits"
author: YOUR_NAME
date: January 27, 2025
format: 
  html
---
  • To create an HTML document from Jupyter Notebook, we specify the html output format in the YAML metadata of our document.
    • By default, format: html is set.
  • Open an empty Jupyter Notebook file from Google Colab (or VSCode).
    • Create the first cell that is Text.
    • Type the above YAML metadata to the first Text cell.

Getting Started with Jupyter Notebook and HTML

Markdown, Jupyter Notebook, and HTML

---
title: "Python Basics"
author: YOUR_NAME
date: "2025-01-27"
---

  • Download the Jupyter Notebook file, danl-210-python-basic.ipynb from Brightspace, and open it from Google Colab (or VSCode if you prefer).

  • The above syntax is part of YAML metadata in danl-210-python-basic.ipynb.

    • YAML should be always in the first cell, and the first cell should be text, not code.

  • In YAML, indentation really matters!

    • tab (or four spaces) defines a level in YAML.

Managing a Website with Jupyter Notebook and Quarto

Quarto Website: _quarto.yml

---
project:
  type: website

website:
  title: "YOUR NAME"
  navbar:
    left:
      - text: Project
        href: danl_proj_nba.ipynb
      - text: Blog
        href: blog-listing.qmd
format:
  html:
    theme: cosmo
    css: styles.css
    toc: false
---

  • The _quarto.yml file configures the website settings.

  • Indentation matters!

  • In RStudio, open the project USERNAME.github.io.Rporj.
    1. Click Project: (None) at the top-right corner.
    2. Click USERNAME.github.io.Rproj.
  • _quarto.yml configures a website, and provides various options for HTML documents within the website.

Quarto Website

Custom CSS

  • Cascading Style Sheets (CSS) is used to format the layout of a webpage (color, font, text size, background, display, etc.).
    • HTML will format the architecture of the house.
    • CSS will be the carpet and walls to decorate the house.
    • JavaScript adds interactive elements in the house, such as opening doors and lighting.
  • We are not front-end web developers.
    • We will not cover the use of CSS and JavaScript.

Quarto Website

Rendering

  • The Render button (command/Ctrl + shift + K) renders a single Quarto document file (e.g., index.qmd) to create an output document.

  • quarto render from Terminal renders ALL Quarto documents and Jupyter Notebook files in your local working directory:

quarto render
  • quarto render should be used if there is any change in _quarto.yml.

Tip

  • Edit _quarto.yml, *.qmd, or *.ipynb files ONLY from your local laptop or Google Colab.
    • Do not edit them from your GitHub repo for the website.

Quarto Website

Adding *.ipynb to a Quarto website

  • By default, quarto render doesn’t execute any code in .ipynb notebooks.

  • quarto render renders .ipynb notebooks, so that corresponding html files are rendered.

    • If you need to update cell outputs in *.ipynb, run that *.ipynb on Google Colab, save the notebook, and download it to your local working directory.

Quarto Website

Appearance and Style

  • theme specifies the Bootstrap theme to use for the page (themes are drawn from the Bootswatch theme library).
    • Valid themes include default, bootstrap, cerulean, cosmo, darkly, flatly, journal, lumen, paper, readable, sandstone, simplex, spacelab, united, and yeti.
  • highlight-style specifies the code highlighting style.
    • Supported styles include default, tango, pygments, kate, monochrome, espresso, zenburn, haddock, breezedark, and textmate.

Quarto Website

About

Quarto Website

Icons and Emojis

Quarto Website

left:
  - text: Project
    href: danl_proj_nba.ipynb
  - text: Blog
    href: blog-listing.qmd
  • We can add a new page to the website through navbar in _quarto.yml

Quarto Website

left:
  - text: "Python Data Analysis"
    menu:
      - pandas_basic.ipynb
      - seaborn_basic.ipynb

Quarto Website Basics