Quarto: Customize Home Page Content

Using Quarto’s built-in page sections

In this post, we’ll cover how to customize what shows up on your home page (or any page, for that matter). In a later post, we’ll discuss how to arrange your content. For now, you’ll learn:

• Where to edit the content of your home page
• How to add Quarto’s special built-in sections (About, Listing)

What’s on your homepage?

Now it’s time to meet your new best friend, index.qmd

Behind every page on your Quarto site is a file named index.qmd. The file we’re looking for today is the index.qmd located in the root directory of your Quarto website.

Tip

If you want to take a peek at some other index.qmd files, you can find them under the /posts directory. /posts contains a directory for each of your posts. Inside each of those is an index.qmd file that contains the contents for that post.

The organization of your Quarto repository is reflected in the organization of your site.

• The index.qmd located in the root directory becomes your homepage (e.g. myblog.io)
• An index.qmd located in /posts/my-aweseome-post will become the page located at myblog.io/posts/my-awesome-post

For now, we’ll talk about the homepage, but you could add content in exactly the same way to any other page. There’s nothing “special” about the home page.

What’s in an index.qmd?

An index.qmd file is a standard qmd file, containing a YAML header followed by markdown content. A couple of things to note:

1. Quarto provides many YAML options for customizing the output for an HTML page. Most of these options are applicable to web pages. An index.qmd file should contain any options that are specific to that page. Site-wide options, (e.g. css) can instead be set in _quarto.yml.
2. index.qmd files can be a little unusual in that they don’t necessarily need to contain much (or any) content. Instead, for some pages, you use YAML settings to tell Quarto how to automatically populate the page. This is particularly useful for “listing” content - Quarto can generate e.g. a nice-looking list of all your blog posts, or a card for each of your projects.

Add markdown content

The simplest way to add content to your homepage is to write Quarto-flavored markdown in the body of the index.Rmd.

Add an About section

Add a Listing section