Build your academic website with Quarto

Scientific workflows: Tools and Tips 🛠️

2026-04-16

What is this lecture series?

Scientific workflows: Tools and Tips 🛠️

📅 Every 3rd Thursday 🕓 4-5 p.m. 📍 Webex

  • One topic from the world of scientific workflows
  • Material provided online
  • If you don’t want to miss a lecture
  • For credit points: Send me a short message (Email or Webex)

Why an academic website?

  • Showcase your work, publications, projects, …
  • It’s yours, you can take it with you (unlike institutional pages)
  • A central place where people can find you and your research

Tools

There are many tools for static websites, today we use Quarto

  • Simple, works in RStudio / Positron / VS Code
  • Easy to publish for free
  • Excellent documentation

What a finished site can look like

Some examples of nice academic Quarto websites:

Goal for today: Build (and publish) a simple personal website with Quarto to perfect later!

Plan for today

  1. Quick Quarto intro/refresher
  2. Basic website from scratch
  3. Understand and customize an academic website template
  4. Publish your website via GitHub Pages

To follow along you only need:

  • Recent version of RStudio (or Positron, VS Code)
  • GitHub account (for publishing, optional)

What is Quarto?

Quarto is an open-source scientific and technical publishing system

Quarto can create many types of output:

  • Documents: HTML, PDF, Word
  • Presentations: HTML, Powerpoint
  • Books: HTML, ePub, PDF
  • Websites: HTML
  • …

What is Quarto?

A Quarto document (.qmd) is basically a text file

When you render it, Quarto turns it into a nice HTML/PDf/etc.

Basic components of a Quarto document

A Quarto document (.qmd) is basically a text file

A Quarto document (.qmd) has three components:

  • YAML header for metadata and configuration
  • Markdown text
  • (Optional) code chunks (R, Python, Julia, …)

The YAML header

---
title: "An example document"
author: "Selina Baldauf"
date: "2023-05-11"
format:
  html:
    theme: cosmo
    toc: true
---
  • Between --- at the top of the file
  • Metadata + config in “key: value” form
  • Careful with indentation and alignment of nested elements

The Markdown text

You write content like this:


# A section header

## A subsection header

Some **bold** and *italic* text and a
[link to Quarto](https://quarto.org).

- First bullet
- Second bullet
- Third bullet

And it will render like this:


A section header

A subsection header

Some bold and italic text and a link to Quarto.

  • First bullet
  • Second bullet
  • Third bullet

Other Quarto Markdown Basics

Checkout the Quarto docs

A Quarto website from scratch

Quarto website = a folder of .qmd files for content + _quarto.yml for configuration

Project structure

Create a Website project in R Studio:
File > New Project > New Directory > Quarto Website

File Purpose
_quarto.yml Site-wide config (navbar, theme, etc.)
index.qmd Home page
about.qmd About page
styles.css Small custom style tweaks
project-name.Rproj The R project file to open the project

Quarto website summary

  • Quarto website = a folder of .qmd files for content + _quarto.yml for configuration
  • To add a page: create a .qmd and add it to the navbar in _quarto.yml
  • See your changes: Render the project

Building an academic website

Create a personal website from a template

Get the template

  1. Download the template from here
  2. Unzip and open the .Rproj file in RStudio
  3. Click Render to see the template site

Project structure

File / Folder Purpose
_quarto.yml Site-wide config (navbar, theme, footer)
index.qmd Home page
about.qmd About page with your profile/CV
publications.qmd Publications page
blog.qmd + posts/ Blog listing + individual posts
styles.css Small custom style tweaks

Customize the _quarto.yml

✏️ Exercise (5 min):

  1. Change the site title and footer text
  2. Browse the themes from the theme list and swap the theme value for what you like most
  3. Render and see what changed

Learn more about _quarto.yml configuration

Customize the landing page index.qmd

✏️ Exercise (10 min):

  1. Replace the placeholder text with a short bio
  2. YAML: Update the links, delete what doesn’t apply, add what’s missing
  3. YAML: Try a different template and re-render
  4. (Optional) Add a photo to the project folder and update the image path

Learn more about “About page templates”

Check out the Quarto docs

Customize about.qmd and publications.qmd

✏️ Exercise (10 min):

Replace the placeholder content with your own content. You can also just add some lines and experiment with Markdown formatting. You can do the full content later.

Learn more about Markdown

Checkout the Markdown Basics on the Quarto website

Add a blog post

✏️ Exercise (10 min):

  1. Create a new folder in posts/, add an index.qmd with a title, date, and a few lines of text
  2. Render and check that it appears in the blog listing
  3. (Optional) Try changing listing type from default to grid or table in blog.qmd and render to see the difference

Learn more about listing page types

Check out the Quarto docs

Custom styling with SCSS

Themes are a starting point. If you want to tweak colors, fonts, or spacing, you can use SCSS.

Wire it into _quarto.yml:

format:
  html:
    theme: [cosmo, custom.scss]

Learn more about theming and custom styling

Publishing a website

How publishing works

  1. When you render, Quarto produces a folder of HTML, CSS, and image files (default: _site/)
  2. Upload these files to a hosting service that stores the files and serves them at a public URL

Hosting options: GitHub Pages, Netlify, Posit Connect Cloud, university web server, …

Publish your website

✏️ Exercise (10 min):

Follow the step-by-step guide. If your site is live, drop the URL in the chat!

Updating your site later

  1. Edit your .qmd files
  2. Render
  3. Commit and push (Git pane or GitHub Desktop)
  4. GitHub rebuilds automatically, changes are live in ~1 min

Wrap up

Where to go from here

Today

  • Built a Quarto website from scratch
  • Customized the main page types: About pages, plain pages, listing pages
  • Configured the site through _quarto.yml (themes, navbar, footer)
  • Published to GitHub Pages

Inspiration: academic Quarto sites

People are nice and provide source code for their websites. If you see elements that you like, you can check out how they did it and adapt it for your own site.

Site Source code
Silvia Canelón https://github.com/spcanelon/silvia
Andrew Heiss https://github.com/andrewheiss/ath-quarto
Sam Csik https://github.com/samanthacsik/samanthacsik.github.io
John Helveston https://github.com/jhelvy/jhelvy_quarto

More examples from Gang He’s curated list

Next steps

  • Customize your website
    • Add relevant content and pages
    • Customize the look with SCSS for custom styling
  • Use your custom domain (yourname.com) for your GitHub Pages site
  • Get an overview of other Quarto website features on the Quarto docs.

Next lecture/workshop

Topic tba


📅 21.05.2026 🕓 4-5/6 p.m. 📍 Webex

🔔 Subscribe to the mailing list

📧 For topic suggestions and/or feedback send me an email

The end :)

Questions?