Appendix N — Webpages

In this tutorial, you will learn how to create a simple webpage using quarto, link multiple pages, and style your content using css.

N.1 Create a webpage

N.1.1 Create a project

Choose New Project... from the File menu (don’t save any workspaces)
Choose New Directory > Quarto Website
Set your project name to “mywebpage”

N.1.2 Render the site

In the upper right “Build” pane, click on the “Build website” hammer icon. This will render the website and automatically open it in a browser window. Alternatively, type the following into the Console pane:

quarto::quarto_render()

If you accidentally close the website and want to look at it again, you don’t have to re-render it. Click on the docs directory in the Files tab of the lower right pane, then click on index.html and choose View in Web Browser.

N.1.3 Site header

This is where you can set options like whether to show a table of contents and what the navigation bar will look like.

Open the file _quarto.yml

Replace the text with the following:

project:
  type: website
  output_dir: docs

website:
  title: "mywebsite"
  author: "YOUR NAME" 
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme:
      light: flatly
      dark: darkly
    css: styles.css
    toc: true

Save the file (do not change the name)
Re-render the site

N.1.4 Edit the pages

Edit the text in the index.qmd and about.qmd pages. You can use R markdown, including code chunks.

The project should open with the index.qmd file already open, and the following contents:

---
title: "mywebsite"
---

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

::: {.cell}

```{.r .cell-code}
1 + 1
```

::: {.cell-output .cell-output-stdout}

```
[1] 2
```


:::
:::

Delete everything and just type an opening paragraph about you.
Re-render the site

Note

I usually skip the title on the index page of a website (the default page that shows when you type the base url. For other pages, you can add the title (and any other quarto header info that is different from the main site _quarto.yml) inside the YAML header markings (three dashes). Alternatively, you can use a level-1 header at the top to indicate the page title (e.g., # Page Title).

N.2 Add pages

Create a new .qmd file for each webpage
Add content to the webpages using R Markdown
Re-render the site

If you include linked content like image files, make sure they are copied to your main project directory and linked using relative paths.

To get your website online, copy the contents of the docs directory to a web server. If you don’t have access to a web server, you can make free websites using a GitHub repository and GitHub Pages).

N.3 Styles

You can change the appearance of your website by changing the theme in the _quarto.yml file (see Appendix L), but the instructions below will help you to customise things even further.

N.3.1 Add custom styles

A custom style sheet is a document that determines how each element of your website should look. The default website already created one for you called styles.css and referenced in to the _quarto.yml file. If you’re creating a website from scratch, you can make a plain text file and link it by adding css: styles.css under format: html in the _quarto.yml file like this:

format:
  html:
    css: styles.css

Then you need to add your custom styles in this file The web has thousands of guides to CSS, but codeacademy has great interactive tutorials for learning html, css, and even more advanced web coding like javascript.

However, the basics of css are easy to learn and it’s best to just start playing around with it. Add the following text to your style.css file and re-render the website.

N.3.2 Change global fonts and colours

body {
  font-size: 2em;
  font-family: "Times New Roman";
  color: white;
  background-color: #660000;
}

This will make the text on your website larger, a different font, and change the text and background colours.

The theme you’re using might have css that blocks the styles you’re trying to change. You can add !important before the end colon to override that.

N.3.3 Change certain elements

Maybe you only want to change the font colour for your headings, not the rest of the text. You can apply a style to a specific element type by specifying the element name before the curly brackets.

h1, h2, h3 {
  text-align: center;
  color: hsl(0, 100%, 20%);
}

h3 {
  font-style: italic;
}

p {
  border: 1px solid green;
  padding: 10px;
  line-height: 2;
}

ul {
  border: 3px dotted red;
  border-radius: 10px;
  padding: 10px 30px;
}

N.4 Example using the styles above

The CSS above changes the styles for three levels of headers (h2, h3, h4) and sets the third level to italics.

N.4.1 Level 3 header

It also gives paragraphs (p) a green border and double-spacing.

N.4.1.1 Level 4 header

Unordered Lists (ul) get:

dotted red border
round corners
increased padding on top (10px) and sides (30px)