Making websites

How to make a simple Quarto website
quarto
websites
Author

Anders Askeland

Published

February 28, 2023

Modified

May 13, 2024

Quarto is a open-source scientific and technical publishing system that allows us to create a variety of different outputs. This includes outputs such as PDF, Word files, or HTML documents. But in addition, Quarto has a inbuilt static site generator, with great integration with R and Python code.

Creating a Quarto blog

A quarto blog can be created in one single workflow. To create a new quarto blog select File -> New Project -> Quarto blog, decide on a name and select a folder where to store it, and press Create Project.

Create a blog post

Quarto files

After having created a Quarto blog, your RStudio will open a session that is populated with a variety of files and folders. Some of these files contain settings related to the blog, while other contains data. The files most important include:

  • _quarto.yml - Defines how the blog will be rendered.
  • index.qmd - Defines the content of your blog landing page.
  • styles.css - Defines the theme.

You might also notice a folder called posts/. As the name implies, this folder will contain our blog posts.

Create landing page

One of the first things we want to do is edit our blog landing page. For this example, we only want to change the title. The title can be changed by altering the title in index.qmd.

---
title: "My blog"
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

Define blog settings

In addition to editing the landing page, we can should also define blog specific settings. These settings are all defined inside the _quarto.yml file. Lets change the website title and add a link to our GitHub repository to the navigation bar by changing the _quarto.yml file to the following.

project:
  type: website

website:
  title: "My blog"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/rostools/coding-club
format:
  html:
    theme: cosmo
    css: styles.css

Create a blog post

To create a blog post, we need to go into the posts/ folder. From here we can see that there already exists two example blog posts, “welcome” and “post-with-code”. Lets delete those and create our own post.

After deleting the example blog posts, create a new folder called "first-blog-post". Inside this folder create a .qmd file called index.qmd. Your folders should look like this:

Posts folder

First-blog-post folder

Now, we can open the index.qmd file and start writing our first blog post.

At the very top, we need to define some post metadata in the form of YAML. We want to define a title, description, author, date, and categories. Lets add the following to our index.qmd.

---
title: "My first blog post"
description: "My first blog post using Quarto"
author: "Anders Askeland"
date: last-modified
categories: 
  - blog
  - first
---

Now we need to write our actual text body. To write our text body, we will write using Markdown, a simple and easy to use markup language.

Lets add the following text body.

---
title: "My first blog post"
description: "My first blog post using Quarto"
author: "Anders Askeland"
date: last-modified
categories: 
  - blog
  - first
---

# My first blog post

This is my first blog post.

Render the blog

Up until now, we have only been working in files and folders. But, how do we actually create a blog? This is where Quarto as a static site generate comes in, where we can use Quarto to automatically render us a blog website.

To render our blog into a website we can press the render button at the top of any index.qmd file in the main blog directory.

Render blog post

When having render the blog, the landing page should look like this:

Landing page to website

When viewing our blog post we should see:

Blog post on website

Host your blog

While we now have successfully created a blog, it is currently only stores locally on our own computer. It is not accessible from the internet.

There are a multitude of methods to host our blog. We will show you how to use GitHub (GitHub account required) to host a website in our next session.