Making a website with Quarto

By Gonçalo Matos

The goal

Create a simple and beautiful website that can be easily updated by anyone of the team without requiring programming skills.

Why Quarto?

Why Quarto?

  • Open-source
  • Document oriented
📄 index.qmd
📁 info
📄 info/accommodation.qmd
📄 info/contacts.qmd
📄 info/gettingAround.qmd
📁 forum
📄 forum/day1.qmd
📄 forum/day2.qmd
📄 forum/day3.qmd

Why Quarto?

  • Open-source
  • Document oriented
  • No coding required

Easy to write, easy to read

Markdown Syntax Output 
*italics*, **bold**, ***bold italics***
 italics, bold, bold italics 
### Heading 3

Heading 3

 
- Bullet point
  • Bullet point
 
[Link text](https://example.com)
 Link text

Why Quarto?

  • Open-source
  • Document oriented
  • No coding required
  • Functional elements built-in

Top navigation
website:
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        href: index.qmd
      - talks.qmd
      - about.qmd

Sidebar
website:
  sidebar:
    style: "docked"
    search: true
    contents:
      - text: "Introduction"
        href: introduction.qmd

Built-in search
website:
  navbar:
    search: true

Why Quarto?

  • Open-source
  • Document oriented
  • No coding required
  • Functional elements built-in
  • GitHub pages ready
$ quarto publish gh-pages

u-shift.github.io/DTNLisbon

Why Quarto?

Quick to build, easy to maintain, smooth delivery

How did we addapt it?

Plain text markdown info/venue.qmd

---
title: "Venue"
format:
  html:
    css: ../styles/info.css

---

The DTN Annual Forum 2025 will be hosted at Institute of Geography and Spatial Planning (IGOT). 
It is located in the heart of Lisbon city and inside University of Lisbon campus, accessible by 
several transport modes. For more details on how to [get to Lisbon](/info/gettingToLisbon.html), 
[to the venue](/info/gettingHere.html) and [around the city](/info/gettingAround.html), check the
respective pages.

![](https://www.igot.ulisboa.pt/sites/default/files/styles/imagem_banner_grande/public/images/
image_focal_point/2022-09/258-9487dbb71c4495cae503c1c2fc4f2c68.png?h=7097b478&itok=jzGbW0-5)
{.preview-image}

Sidebar for simpler navigation _quarto.yml

website:
  sidebar:
    - id: info
      title: "Practical info"
      collapse-level: 2
      contents:
        - info/venue.qmd
        - info/gettingHere.qmd
        - info/gettingAround.qmd
        - info/gettingToLisbon.qmd
        - info/accommodation.qmd
        - info/guides.qmd

Style improvements styles/theme.scss

.sidebar-item {
    border: 1px solid #cd7eabff;
    border-radius: 32px;
    padding: 6px;
    padding-left: 12px;
    text-wrap: wrap;

    &:has(a.active) {background-color: #cd7eabff;}
    &:has(a.active) .sidebar-item-text span {color: #ffffff!important;}
    &:hover{text-decoration: underline;}

    .active {font-weight: bold;}

    .sidebar-item-text {
        span {color: black!important;}
    }
}

Plain text markdown forum/day1

---
title: 10th Sept. (Wednesday)
image: "/images/backgrounds/dtn.png"
format:
  html:
    css: ../styles/schedule.css
---

| |  |
| --- | ---- |
| 8:00 - 9:00 | <span class="event-outline-blue"></span> Registration / coffee
| 9:00        | <span class="event-outline-blue"></span> Welcome 
| 09:30       | <span class="event-filled-green"></span> Think! Data won’t tell the full
| 10:15       | <span class="event-outline-blue"></span> Coffee break 
| 10:45       | <span class="event-filled-orange size-2"></span> PhD poster pitching 
| 12:15       | <span class="event-outline-blue"></span> Lunch           |
| 14:00       | <span class="event-filled-blue size-2"></span> Lisbon Public Transit Experience

Style improvements styles/schedule.css

table td:has(.event-outline-blue) {
    border: 1px solid #0798C6 !important;
}
table td:has(.event-filled-green) {
    background-color: #9Cb380 !important;
    color: #fff!important;
}
table td:has(.event-filled-orange) {
    background-color: #FF7F51 !important;
    color: #fff;
}
table td:has(.event-filled-blue) {
    color: #fff!important;
    background-color: #0798C6 !important;
}

Plain text markdown based on built-in listing feature speakers/index.qmd

---
title: "Speakers"
image: "/images/backgrounds/dtn.png"

format:
  html:
    css: ../styles/speakers.css

listing:
    type: grid
    contents:
    - path: /speakers/jcosteira.html
      image: https://isr.tecnico.ulisboa.pt/jcosteira.jpg
      title: João Paulo Costeira
      description: ""
      categories: []

    - path: /speakers/zbent.html
      image: https://nacto.org/wp-content/uploads/Bent-sq.jpg
      title: Zabe Bent
      description: ""
      categories: []
---

Plain text markdown, with a tweak 🤫 index.qmd

---
title: "<span class='text-hidden'>EIT Urban Mobility DTN Annual Forum 2025</span><img"
sidebar: false
image: "/images/backgrounds/dtn.png"
format:
  html:
    page-layout: custom
    css: styles/home.css
    include-before-body: html/home/header.html
---

The DTN Annual Forum is the DTN’s annual flagship event that gathers experts, scholars, and industry
leaders from around the world to discuss the latest advancements in urban mobility. This vibrant forum
offers participants an opportunity to present their research, engage in insightful discussions, and
foster collaborations.

Adding custom HTML before page content assets/timer.html

Created with ChatGPT

Want to know more? 👀
Dive in! 🤿

Check the code at github.com/U-Shift/DTNlisbon