Quarto Academic Website Examples and Tips

Building Professional Academic Websites with Quarto

Template Resources

Template	Website	GitHub
Academic	Demo	Source
qtwAcademic	Docs	Source

TipRecommendation

Fork the template repository rather than actual websites to avoid receiving notifications on every update. Remember to remove any Google Analytics or tracking IDs from forked templates.

---

Using Includes for Reusable Content

To streamline updates across your site, use Quarto’s includes feature for reusable elements like syllabus statements, social sharing options, academic badges, and other reusable materials.

{{< include _statement.qmd >}}

Note

Prefixing include file names with an underscore (_) ensures they will not be rendered directly by Quarto.

Example Use Cases

• Course descriptions reused in main page and syllabus
• Academic badges for publications
• Social sharing buttons
• Footer information
• Author bio sections

---

Academic Badges

Display academic badges like Dimensions Citation badge and Altmetric badge.

Embedding Badges

Replace YOUR-DOI-HERE with your actual DOI.

Custom Badges for Highly Cited Papers

You can also showcase highly cited and hot papers using custom badges with HTML/CSS styling.

---

The Art of Listing

Listings are a powerful tool in Quarto, offering flexibility for creating visually appealing and organized pages.

Listing Types

Type	Description
default	Standard list view
grid	Grid layout with cards
table	Tabular format

Listing Options

listing:
  contents: posts
  type: grid
  grid-columns: 3
  image-height: 150px
  grid-item-align: center
  fields: [image, title, date, description]
  field-display-names:
    title: "Title"
    date: "Published"

Listing Specific Categories

To display a subset of items, use the include and exclude options:

listing:
  contents: 
    - publications.yml
  include:
    categories: "machine-learning"

Here, publications.yml is a YAML file containing a list of publications with predefined categories.

---

Listing External Items

To list external resources with key metadata:

- path: https://www.nature.com/articles/example
  image: /files/images/journal/nature.avif
  title: "Article Title Here"
  subtitle: "*Nature*"
  description: "Brief description of the article."
  date: "2024-10-26"

For efficiency, store multiple items in a YAML (.yml) file and reference it in Quarto:

listing:
  contents: publications.yml
  type: default

---

Publication Page Structure

Individual Publication Page

---
title: "Paper Title"
description: "Brief description"
subtitle: "*Journal Name*"
author: 
  - name: Author One
  - name: Author Two
date: "2024-01-15"
categories: [paper, topic1, topic2]
image: "featured.jpg"
citation:
  type: article-journal
  container-title: "Journal Name"
  doi: "10.xxxx/xxxxx"
  volume: 1
  issue: 1
  page: 1-10
  url: https://doi.org/10.xxxx/xxxxx
google-scholar: true
---

---

Exporting Revealjs Slides to PDF

Revealjs’s default PDF Export omits footnotes. Use decktape instead:

decktape reveal https://your-slides-url.html output.pdf

Fixing Font Errors

If you encounter: > “Cannot extract the embedded font ‘BAAAAA+SourceSansPro-Regular’. Some characters may not display or print correctly.”

Solution:

1. Open the PDF in Adobe Acrobat
2. Go to Use print production → Preflight → Analyze and fix it (default options)
3. Apply the necessary font correction

---

Social Sharing

For easy setup of social sharing buttons, AddToAny is a simple solution.

Example Include File

Create _social.qmd:

<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_linkedin"></a>
<a class="a2a_button_email"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

Then include it in your pages:

{{< include /files/includes/_social.qmd >}}

---

GitHub Actions for Auto-Deploy

name: Render and Publish

on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Check out repository
        uses: actions/checkout@v4
        
      - name: Set up Quarto
        uses: quarto-dev/quarto-actions/setup@v2
        
      - name: Render Quarto Project
        uses: quarto-dev/quarto-actions/render@v2
        
      - name: Publish to GitHub Pages
        uses: quarto-dev/quarto-actions/publish@v2
        with:
          target: gh-pages
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

---

Useful Resources

Resource	Link
Quarto Documentation	quarto.org
Quarto Websites Guide	Website Creation
Awesome Quarto	GitHub
Samantha Csik Tutorial	Creating Quarto Websites
Marvin Schmitt Tutorial	Complete Tutorial

---

Quick Reference

Common YAML Options

project:
  type: website
  output-dir: docs

website:
  title: "Site Title"
  navbar:
    left:
      - text: "Home"
        href: index.qmd
      - text: "Publications"
        href: publications.qmd
  footer:
    left: "© 2025 Your Name"

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

Freeze for Efficiency

execute:
  freeze: auto

This prevents re-rendering of unchanged content, speeding up builds significantly.

---

TipPro Tips

• Use freeze: auto to speed up rendering
• Store publications in YAML files for easier management
• Create include files for reusable components
• Use categories for filtering content in listings
• Set up GitHub Actions for automatic deployment