My personal website with Quarto

quarto
Published

September 2, 2023

Introduction: What is Quarto?

I finally decided to use Quarto for my personal website. It is an open-source scientific and technical publishing system built on Pandoc. It allows researchers to create documents, presentations, and websites using markdown or other plain text formats with embedded code. It supports reproducible research, scientific communication, and academic blogging through elegant and customizable templates.

One of Quarto’s standout features is its ability to generate static websites. A static site means that the content is pre-rendered, not dynamically generated on a server for each visit. For academics, this offers several key advantages:

  • Speed: Static sites load faster, as they require no server-side processing.
  • Security: With no backend code to exploit, static sites have fewer vulnerabilities.
  • Version control: Easily track changes and collaborate using Git.
  • Portability: Host your site anywhere, including GitHub Pages, Netlify, or your university’s web server.

Quarto makes it straightforward to publish a research portfolio, blog, or teaching site using R, Python, or Julia.

Here are some of the tips I discovered while creating my website.

Styling

Bootswatch Templates

Quarto websites use Bootstrap for layout and design. This means you can easily modify the style of your site using Bootswatch themes open-source Bootstrap themes that give your site a unique visual identity.

To use a Bootswatch theme, modify your _quarto.yml file:

format:
  html:
    theme: flatly   # Pick any theme: cerulean, lumen, darkly, etc.
    css: styles.css # Optional: custom overrides

Icons for Google Scholar, ORCID, etc

On the navigation bar, I added links to my profile on several scientific platforms. I used two extensions to provide icons: iconify and academicons.

To install an extension, on the terminal just run

quarto add quarto-ext/fontawesome

And then add it to the navbar, modifying your _quarto.yml file:

  navbar:
    pinned: true
    
    right: 
      - text: ""
        href: https://orcid.org/0000-0003-3821-0014
        target: _blank

Dark mode

For switching automatically the website to dark mode, I use the extension auto-dark-mode by Garrick Aden-Buie.

Just install the extension running the following code in a terminal

quarto add gadenbuie/quarto-auto-dark

And then load the extension modifying your _quarto.yml file:

filters: 
  - auto-dark

The “About” Page Template

Quarto provides a special “about” template to introduce yourself professionally. It includes structured fields for photo, contact info, social media links, and a short biography—perfect for academic CV-style landing pages.

I use the bootstrap column system to also add a particles animation on the right side part of the page.

Here’s a simplified index.qmd example:

---
image: images/me.jpg
page-layout: custom
title: "François Perruchas"
about: 
  template: trestles
  image-shape: rounded
  image-width: 15rem
  id: ppc
  links:
    - text: " Orcid"
      href: "https://orcid.org/0000-0003-3821-0014"
resources: 
  - "pjs/app.js"
  - "pjs/particles.min.js"
  - "images/circle.svg"
---
::: {.grid}

:::{.g-col-lg-9 .g-col-md-12 .g-col-sm-12 .g-col-xs-12 .justify-content-center}

:::{#ppc}

Introduction text

:::
:::

::: {.g-col-lg-3 .d-sm-none .d-md-none .d-lg-block}
\```{=html}
<!-- particles.js container -->
<div id="particles-js" style="width:100%;height:100%;padding-right:2em;padding-top:3em;"></div>

<!-- scripts -->
<script src="pjs/particles.min.js"></script>
<script src="pjs/app.js"></script>
\```
:::

:::

Organizing Content with Quarto Listings

Overview

Quarto makes it easy to organize content using listings, especially useful for blogs, publications, teaching materials, or lab news.

A listing automatically displays a collection of pages from a folder. For example, you might store posts in posts/, and Quarto will generate a preview card or table for each post.

To create a blog listing:

website:
  sidebar:
    contents:
      - section: "Blog"
        contents: posts

format:
  html:
    listing:
      type: grid
      sort: "date desc"
      fields: ["title", "author", "date", "categories"]

Each file in posts/ (e.g., 2025-01-15-new-method.qmd) should include front matter:

title: "A New Method for Microbiome Analysis"
author: "Jane Researcher"
date: 2025-01-15
categories: [Bioinformatics, Methods]

Listings update automatically as new posts are added. You can also customize the layout, number of items, and whether to show excerpts, thumbnails, etc (see documentation).

Combine several sources for listings

Data & Projects

for “Data & Projects”, I list the content of a folder and the list of items in a YAML file, as follows:

title: "Data & Projects"
listing:
  type: default
  contents: 
    - projects
    - projects/project-list.yaml
  sort: "duration desc"

Teaching & Talks

for “Teaching & Talks”, I combine two lists, one for talks and the other for teaching. In both cases, I do not list the content of a folder, I just provide the list of items. Here a simplified version of the qmd file:

---
title: "Teaching & Talks"
listing:
  - id: teaching
    contents:
      - title: Innovation Management
        path: https://www.uv.es/uvweb/college/en/undergraduate-studies/undergraduate-studies-/degree-programmes-offered-1285846094474.html?idA=35825&idT=1313;2025
        acad-year: 2024-2025
        language: English
        degree: Degree in Business and Administration 
    sort: "acad-year desc, title"
    type: table
    sort-ui: false
    filter-ui: false
    field-display-names:
      title: "Course"
      acad-year: "Academic Year"
      language: "Language"
      degree: "Degree"
  - id: talks
    contents:
      - title: "European funding and development of nanotechnologies and nanosciences"
        path: https://doi.org/10.5281/zenodo.3946614
        description: 4th Geography of Innovation Conference, Barcelona
        date: 2018-02-01
        image: images/talks/nanoscience.png
    sort: "date desc"
    type: grid
    sort-ui: false
    filter-ui: false

---

# Talks & Conferences

::: {#talks}
:::

# Teaching

::: {#teaching}
:::

Exporting existing content to Quarto

Publications

For publications, I use a script that generates pages from a bibtex database. See this note for details.

Notes

I had already some notes published on a Wordpress blog. I exported and transformed them following these instructions.