Dr. Liam D. Bailey

Introduction

Lots has changed in how we work in R over the past year or so. One big change has been the rise of Quarto (URL), which has expanded how we can work across different programming languages. Quarto is also great for generating static websites, particularly if you want to include programming content in languages like R or Python. So, in this blog I’m going to give a brief guide to how you can create a personal website using Quarto, how you can expand this to include a blog, and finally how you can use CSS and custom Javascript to make your website look sleek and professional.

It’s important to acknowledge that a lot of my process and website structure is ~~stolen~~ heavily influenced by Maya Gans (URL). Unfortunately, she hasn’t included a guide to her process so hopefully what I’ll include here can make a fantastic website like hers more achievable by others.

Other great resources you might find useful: - Albert Rapp

STEP 1: Create your website project

Before you can deploy your fancy new website you need to create a Quarto website project. This is easy to do in either RStudio (File > New Project… > Quarto Website) or VSCode (Ctrl/Cmd+Shft+P > Quarto: Create Project > Website Project). This will create a folder structure something like the one below:

[img/Quartowebsite_folders.png]

Whether or not you have an .Rproj file will depend on whether you’re using RStudio or VSCode, but the other files should be the same. We’ll cover each of them in detail, but to briefly describe each file:

*_quarto.yml*: Website meta-data.
about.qmd: Placeholder for the ‘about’ page of your website. I think in most cases this page won’t be needed!
index.qmd: Placeholder for the landing page of your website.
styles.css: Information about how your website will look (using Cascade Style Sheets = css).

If we want to see what this website will look like we can run the command quarto preview in the terminal.

Nothing usable yet, but we can improve this very quickly.

STEP 2: Add in your details

At as most simple, a personal website can just be an ‘online CV’ where somebody (say a potential employer) can find out a bit about you. So, let’s make our landing page (index.qmd) into a basic ‘profile’ for ourself. Luckily, Quarto has a standard ‘about’ page, including a number of templates.

Below, we update index.qmd to make an ‘about’ page for Joe Blogs. By specifying ‘about’ in our YAML meta-data (between the ---) we make it clear that we are making a page to introduce an individual or organization. You can read more about this (and different templates) here (https://quarto.org/docs/websites/website-about.html).

---
title: "Joe Blogs"
about:
    template: jolla
    image: profile.jpg
---

Hi I'm Joe Blogs and I like to work with R and Python!

## Education

School of Hard Knocks | London, UK | Sept 2012 - June 2018

## Experience

Business Co. | Junior Data Scientist | January 2019 - present

Note

Notice that we refer to a ‘profile.jpg’, so we will need to add this file into our new website project.

We can also make a few small changes to our *_quarto.yml* file to change our website meta-data. Below you can see the meta-data file, with some comments to explain the key changes.

project:
  type: website

website:
  ## I like to remove the search button
  search: false
  ## Update your website title to be informative.
  ## This also changes the text at the top of the navbar
  title: "Joe Blogs"
  navbar:
    ## Add in a GitHub and Twitter link in the navbar
    left:
      - icon: github
        href: https://github.com
      - icon: twitter
        href: https://twitter.com

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true
    ## I like to remove the 'margin' section by default
    grid:
      margin-width: 0px

See the difference below:

STEP 3: Basic styling

This is already a reasonable (if simple) personal page. Anybody visiting the site can learn a bit about you and find out more through your GitHub or Twitter. To make it stand out even a bit more we can start to customise the style of your page. We can do this in two ways:

STEP 3a: Quarto themes

In the *_quarto.yml* file above you’ll notice that we are using the default ‘cosmo’ theme for our website. Quarto includes 25 themes from the ‘Bootswatch’ project (https://bootswatch.com/). Even without learning CSS or Javascript, we can already customise the look and feel of our website by changing themes.

project:
  type: website

website:
  search: false
  title: "Joe Blogs"
  navbar:
    left:
      - icon: github
        href: https://github.com
      - icon: twitter
        href: https://twitter.com

format:
  html:
    ## Use the 'lux' theme instead of 'cosmo'
    theme: lux
    css: styles.css
    toc: true

STEP 3b: Basic CSS changes

The available Quarto themes provide a nice starting point for customisation. If we want to go further, we need to change the .css file our website uses. You’ll notice in *_quarto.yml* that we specify .css is defined in the file styles.css, so this is where we need to look.

In (very) short, a .css file will define how HTML elements in your page (e.g. headers, images, links) will look when they are loaded by a browser. Essentially, for particular elements we can specify their style, which might include things like colour, font size, or dimensions. I’m not going to go into more detail about CSS here. I’d recommend looking at Albert’s blog here (Albert Rapp) or other resources like W3School? ().

You can spend a long time learning and tweaking CSS. Still, even without being a CSS expert you can start to change elements of you blog. If you want to have the biggest bang for your buck without needing to learn detailed CSS here are some elements I suggest to change:

Background colour

The main body of your website is an HTML element called (surprisingly) ‘body’. If we change the ‘background’ style of this element we can give our blog a different coloured background. Simply add this code to the styles.css file with the hexcode for the colour of your choice:

/* Everything between {} is the style of the 'body' element */
body {
    background: #FFFFF0
}

Custom Font

You can use any available Google font as a custom font on your website. To do this, we first need to import the font in our .css file and then specify how that font should be used in our page. You can find the code needed to import a font directly on the Google Fonts website:

[[]]

You can add this at the start of the .css file and then use the font anywhere in your document. I’d recommend using a couple of different fonts for the body of your text and the headers on your website. You’ll notice below we adjust the ‘font-family’ style of the body and both h1 and h2 headers (which you create in Markdown with one or two #).

Note

When we specify multiple styles, each one should end with ;

/* Import bold Arvo font for title */
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap');

/* Use a thin (200 weight) version of Poppins for the main text*/ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

body {
    font-family: Poppins;
    background: #FFFFF0
}

/* Change style of BOTH h1 and h2 */
h1, h2 {
    font-family: Arvo
}

Coding Tip

If you’re importing multiple fonts you can combine with with & like so:

@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap&family=Poppins:wght@200&display=swap');

We might want to change not just font we use but also the size of that font. This can be particularly useful to make your name stand out. By adding this code to our .css, we specify that any h1 header with the class ‘title’ should have larger font. I’ll explain how we know what class to focus on in a future blog.

h1.title {
    font-size: 12pt;
}

And with just a few lines of CSS here is our finished product. This is already a nice neat personal website and I think already stands out more than the default we started out with. By changing a bit of meta-data and a few small CSS tweaks we have a unique website of our own.

Before
After

Building a Quarto website

Introduction

STEP 1: Create your website project

STEP 2: Add in your details

STEP 3: Basic styling

STEP 3a: Quarto themes

STEP 3b: Basic CSS changes

Background colour

Custom Font

Font Size